feat: 添加prettier格式化代码

src/plugins/copyFileUrl2Clipboard/copy.ts

@@ -1,16 +1,16 @@
-import { VirtualFile } from "@/class/VirtualDirectory"
-import config from "@/config"
-import { usePluginHooksType } from "@/types/type"
+import { VirtualFile } from '@/class/VirtualDirectory'
+import config from '@/config'
+import { usePluginHooksType } from '@/types/type'
 import copy2Clipboard from 'copy-to-clipboard'
 
 const copy = (__: any, vFiles: VirtualFile[], hooks: usePluginHooksType) => {
-    const { globalAlertTip } = hooks
-    const vFile = vFiles[0]
-    console.log(vFile.url)
-    copy2Clipboard(`${config.baseUrl}${vFile.url}`)
-    globalAlertTip(`${vFile.name}的链接已复制至剪切板`, {
-        type: 'info',
-        timeout: 2000
-    })
+   const { globalAlertTip } = hooks
+   const vFile = vFiles[0]
+   console.log(vFile.url)
+   copy2Clipboard(`${config.baseUrl}${vFile.url}`)
+   globalAlertTip(`${vFile.name}的链接已复制至剪切板`, {
+      type: 'info',
+      timeout: 2000
+   })
 }
-export default copy
+export default copy

src/plugins/copyFileUrl2Clipboard/export.ts

@@ -1,29 +1,29 @@
-import { Plugin, PluginGroup } from "@/class/PluginCenter";
-import Copy from "./copy";
-import { CopyOutline } from "@vicons/ionicons5";
-import { PluginExportType } from "@/types/type";
-import { shallowRef } from "vue";
+import { Plugin, PluginGroup } from '@/class/PluginCenter'
+import Copy from './copy'
+import { CopyOutline } from '@vicons/ionicons5'
+import { PluginExportType } from '@/types/type'
+import { shallowRef } from 'vue'
 
 const pluginConfig: Plugin = {
-	name: "复制链接",
-	icon: shallowRef(CopyOutline),
-	filter: (vDirs, vFiles) => {
-		if (vDirs.length !== 0) {
-			return false;
-		}
-		if (vFiles.length !== 1) {
-			return false;
-		}
-		return true;
-	},
-	disable: false,
-	group: [PluginGroup.default],
-	func: Copy,
-	priority: -1
-};
+   name: '复制链接',
+   icon: shallowRef(CopyOutline),
+   filter: (vDirs, vFiles) => {
+      if (vDirs.length !== 0) {
+         return false
+      }
+      if (vFiles.length !== 1) {
+         return false
+      }
+      return true
+   },
+   disable: false,
+   group: [PluginGroup.default],
+   func: Copy,
+   priority: -1
+}
 
-export default pluginConfig;
+export default pluginConfig
 
-export const type = PluginExportType.default;
+export const type = PluginExportType.default
 
-export const key = 'miaoCopy';
+export const key = 'miaoCopy'

src/plugins/fullScreen/export.ts

@@ -1,23 +1,23 @@
-import { Plugin, PluginGroup } from "@/class/PluginCenter";
-import fullScreen from "./fullScreen";
-import { ExpandOutline } from "@vicons/ionicons5";
-import { PluginExportType } from "@/types/type";
-import { shallowRef } from "vue";
+import { Plugin, PluginGroup } from '@/class/PluginCenter'
+import fullScreen from './fullScreen'
+import { ExpandOutline } from '@vicons/ionicons5'
+import { PluginExportType } from '@/types/type'
+import { shallowRef } from 'vue'
 
 const pluginConfig: Plugin = {
-	name: "全屏",
-	icon: shallowRef(ExpandOutline),
-	filter: () => {
-		return true;
-	},
-	disable: false,
-	group: [PluginGroup.mainMenu],
-	func: fullScreen,
-	priority: -1
-};
+   name: '全屏',
+   icon: shallowRef(ExpandOutline),
+   filter: () => {
+      return true
+   },
+   disable: false,
+   group: [PluginGroup.mainMenu],
+   func: fullScreen,
+   priority: -1
+}
 
-export default pluginConfig;
+export default pluginConfig
 
-export const type = PluginExportType.default;
+export const type = PluginExportType.default
 
-export const key = "fullScreen";
+export const key = 'fullScreen'

src/plugins/fullScreen/fullScreen.ts

@@ -1,4 +1,4 @@
 const fullScreen = () => {
-    document.body.requestFullscreen()
+   document.body.requestFullscreen()
 }
-export default fullScreen
+export default fullScreen

src/plugins/miaoCodeMirror/export.ts

@@ -3,47 +3,47 @@ import { CodeOutline } from '@vicons/ionicons5'
 import { PluginExportType } from '@/types/type'
 
 const pluginConfig: registerComponentOption = {
-    key: 'miaoCodeMirror',
-    name: '代码编辑',
-    icon: CodeOutline,
-    getComponent: async () =>
-        (await import('@/plugins/miaoCodeMirror/miaoCodeMirror.vue')).default,
-    filter: (vDirs, vFiles) => {
-        if (vDirs.length !== 0) {
-            return false
-        }
-        if (vFiles.length !== 1) {
-            return false
-        }
-        for (let end of [
-            'js',
-            'ts',
-            'jsx',
-            'tsx',
-            'py',
-            'html',
-            'css',
-            'scss',
-            'go',
-            'json',
-            'md',
-            'yaml',
-            'txt',
-            'xml',
-            'vue',
-            'srt',
-            'vtt',
-            'ass',
-            'ssa'
-        ]) {
-            if (vFiles[0].name.endsWith(end)) {
-                return true
-            }
-        }
-        return false
-    }
+   key: 'miaoCodeMirror',
+   name: '代码编辑',
+   icon: CodeOutline,
+   getComponent: async () =>
+      (await import('@/plugins/miaoCodeMirror/miaoCodeMirror.vue')).default,
+   filter: (vDirs, vFiles) => {
+      if (vDirs.length !== 0) {
+         return false
+      }
+      if (vFiles.length !== 1) {
+         return false
+      }
+      for (let end of [
+         'js',
+         'ts',
+         'jsx',
+         'tsx',
+         'py',
+         'html',
+         'css',
+         'scss',
+         'go',
+         'json',
+         'md',
+         'yaml',
+         'txt',
+         'xml',
+         'vue',
+         'srt',
+         'vtt',
+         'ass',
+         'ssa'
+      ]) {
+         if (vFiles[0].name.endsWith(end)) {
+            return true
+         }
+      }
+      return false
+   }
 }
 
 export default pluginConfig
 
-export const type = PluginExportType.component
+export const type = PluginExportType.component

src/plugins/miaoCodeMirror/miaoCodeMirror.vue

@@ -1,21 +1,34 @@
 <template>
-    <miao-message-provider ref="miaoMessage">
-        <div class="codemirror-container" ref="rootRef" :class="`codemirror-container-${theme}`">
-            <div class="codemirror-container-top">
-                <div class="codemirror-container-btn codemirror-container-btn-save" @click="handleSave">
-                    保存
-                </div>
-                <div class="codemirror-container-btn codemirror-container-btn-save" @click="handleReset">
-                    恢复到上次保存
-                </div>
+   <miao-message-provider ref="miaoMessage">
+      <div
+         class="codemirror-container"
+         ref="rootRef"
+         :class="`codemirror-container-${theme}`"
+      >
+         <div class="codemirror-container-top">
+            <div
+               class="codemirror-container-btn codemirror-container-btn-save"
+               @click="handleSave"
+            >
+               保存
             </div>
-            <div class="codemirror-container-main">
-                <NScrollbar style="max-height: calc(100%)">
-                    <codemirror v-model="codeData" :extensions="extensions" />
-                </NScrollbar>
+            <div
+               class="codemirror-container-btn codemirror-container-btn-save"
+               @click="handleReset"
+            >
+               恢复到上次保存
             </div>
-        </div>
-    </miao-message-provider>
+         </div>
+         <div class="codemirror-container-main">
+            <NScrollbar style="max-height: calc(100%)">
+               <codemirror
+                  v-model="codeData"
+                  :extensions="extensions"
+               />
+            </NScrollbar>
+         </div>
+      </div>
+   </miao-message-provider>
 </template>
 
 <script setup lang="ts">
@@ -29,7 +42,7 @@ import { NScrollbar } from 'naive-ui'
 const miaoFetchApi = useMiaoFetchApi()
 
 const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
-    required: true
+   required: true
 })
 
 const decoder = new TextDecoder('utf-8')
@@ -45,31 +58,31 @@ const extensions = ref<any[]>([])
 const theme = ref<'light' | 'dark'>('light')
 
 const handleSave = async () => {
-    if (bakData.value === codeData.value || !vFile.value) {
-        miaoMessage.value?.alertTip('内容未改动', {
-            timeout: 3000,
-            type: 'info'
-        })
-        return
-    }
-    const parentDir = vFile.value?.parent
-    const file_bak = new File(
-        [new Blob([bakData.value ?? ''])],
-        `${vFile.value?.name}.bak`
-    )
-    const file = new File([new Blob([codeData.value ?? ''])], vFile.value.name)
-    bakData.value = codeData.value
-    const { response } = miaoFetchApi.upload(file, parentDir)
-    false && miaoFetchApi.upload(file_bak, parentDir)
-    await response
-    miaoMessage.value?.alertTip('保存成功', {
-        timeout: 5000,
-        type: 'success'
-    })
+   if (bakData.value === codeData.value || !vFile.value) {
+      miaoMessage.value?.alertTip('内容未改动', {
+         timeout: 3000,
+         type: 'info'
+      })
+      return
+   }
+   const parentDir = vFile.value?.parent
+   const file_bak = new File(
+      [new Blob([bakData.value ?? ''])],
+      `${vFile.value?.name}.bak`
+   )
+   const file = new File([new Blob([codeData.value ?? ''])], vFile.value.name)
+   bakData.value = codeData.value
+   const { response } = miaoFetchApi.upload(file, parentDir)
+   false && miaoFetchApi.upload(file_bak, parentDir)
+   await response
+   miaoMessage.value?.alertTip('保存成功', {
+      timeout: 5000,
+      type: 'success'
+   })
 }
 
 const handleReset = async () => {
-    codeData.value = bakData.value
+   codeData.value = bakData.value
 }
 
 // const switchTheme = async () => {
@@ -85,125 +98,125 @@ const handleReset = async () => {
 // }
 
 const getLangExtensions = async (fileName: string) => {
-    const ext = fileName.split('.').pop()?.toLocaleLowerCase()
-    switch (ext) {
-        case 'js':
-        case 'jsx':
-        case 'ts':
-        case 'tsx':
-            const { javascript } = await import('@codemirror/lang-javascript')
-            return [
-                javascript({
-                    jsx: ext.substring(2, 3) === 'x',
-                    typescript: ext.substring(0, 2) === 'js'
-                })
-            ]
-            break
-        case 'css':
-        case 'scss':
-            const { sass } = await import('@codemirror/lang-sass')
-            return [sass()]
-            break
-        case 'html':
-            const { html } = await import('@codemirror/lang-html')
-            return [html()]
-            break
-        case 'py':
-            const { python } = await import('@codemirror/lang-python')
-            return [python()]
-            break
-        case 'go':
-            const { go } = await import('@codemirror/lang-go')
-            return [go()]
-            break
-        case 'json':
-            const { json } = await import('@codemirror/lang-json')
-            return [json()]
-            break
-        case 'md':
-            const { markdown } = await import('@codemirror/lang-markdown')
-            return [markdown()]
-            break
-        case 'yaml':
-            const { yaml } = await import('@codemirror/lang-yaml')
-            return [yaml()]
-            break
-        case 'vue':
-            const { vue } = await import('@codemirror/lang-vue')
-            return [vue()]
-            break
-        case 'xml':
-            const { xml } = await import('@codemirror/lang-xml')
-            return [xml()]
-            break
-        default:
-            return []
-    }
+   const ext = fileName.split('.').pop()?.toLocaleLowerCase()
+   switch (ext) {
+      case 'js':
+      case 'jsx':
+      case 'ts':
+      case 'tsx':
+         const { javascript } = await import('@codemirror/lang-javascript')
+         return [
+            javascript({
+               jsx: ext.substring(2, 3) === 'x',
+               typescript: ext.substring(0, 2) === 'js'
+            })
+         ]
+         break
+      case 'css':
+      case 'scss':
+         const { sass } = await import('@codemirror/lang-sass')
+         return [sass()]
+         break
+      case 'html':
+         const { html } = await import('@codemirror/lang-html')
+         return [html()]
+         break
+      case 'py':
+         const { python } = await import('@codemirror/lang-python')
+         return [python()]
+         break
+      case 'go':
+         const { go } = await import('@codemirror/lang-go')
+         return [go()]
+         break
+      case 'json':
+         const { json } = await import('@codemirror/lang-json')
+         return [json()]
+         break
+      case 'md':
+         const { markdown } = await import('@codemirror/lang-markdown')
+         return [markdown()]
+         break
+      case 'yaml':
+         const { yaml } = await import('@codemirror/lang-yaml')
+         return [yaml()]
+         break
+      case 'vue':
+         const { vue } = await import('@codemirror/lang-vue')
+         return [vue()]
+         break
+      case 'xml':
+         const { xml } = await import('@codemirror/lang-xml')
+         return [xml()]
+         break
+      default:
+         return []
+   }
 }
 
 onMounted(async () => {
-    vFile.value = currentFiles.value[0]
-    const fileName = currentFiles.value[0].name
-    codeData.value = decoder.decode(
-        await (miaoFetchApi.getFile(currentFiles.value[0], {
-            axiosOption: {
-                headers: {
-                    'Cache-Control': 'no-cache'
-                }
+   vFile.value = currentFiles.value[0]
+   const fileName = currentFiles.value[0].name
+   codeData.value = decoder.decode(
+      await miaoFetchApi.getFile(currentFiles.value[0], {
+         axiosOption: {
+            headers: {
+               'Cache-Control': 'no-cache'
             }
-        }).response)
-    )
-    bakData.value = codeData.value
-    extensions.value = [...(await getLangExtensions(fileName))]
+         }
+      }).response
+   )
+   bakData.value = codeData.value
+   extensions.value = [...(await getLangExtensions(fileName))]
 
-    rootRef.value?.addEventListener('keydown', (event) => {
-        if (event.ctrlKey && event.key === 's') {
-            event.preventDefault()
-            handleSave()
-        }
-    })
+   rootRef.value?.addEventListener('keydown', (event) => {
+      if (event.ctrlKey && event.key === 's') {
+         event.preventDefault()
+         handleSave()
+      }
+   })
 })
 </script>
 
 <style scoped lang="scss">
 .codemirror-container {
-    width: 100%;
-    height: 100%;
-    overflow-y: hidden;
+   width: 100%;
+   height: 100%;
+   overflow-y: hidden;
 
-    .codemirror-container-top {
-        height: 25px;
-        display: flex;
-        border-bottom: 1px solid #000;
-    }
+   .codemirror-container-top {
+      height: 25px;
+      display: flex;
+      border-bottom: 1px solid #000;
+   }
 
-    .codemirror-container-btn {
-        height: 25px;
-        padding: 0 10px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-        user-select: none;
-        background-color: none;
-        transition: background-color 0.25s;
+   .codemirror-container-btn {
+      height: 25px;
+      padding: 0 10px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      user-select: none;
+      background-color: none;
+      transition: background-color 0.25s;
 
-        &:hover {
-            background-color: #e8e8e8;
-        }
-    }
+      &:hover {
+         background-color: #e8e8e8;
+      }
+   }
 
-    .codemirror-container-main {
-        height: calc(100% - 25px);
-        position: relative;
-    }
+   .codemirror-container-main {
+      height: calc(100% - 25px);
+      position: relative;
+   }
 }
 
 .codemirror-container-dark {
-    background-color: rgb(30, 30, 30);
+   background-color: rgb(30, 30, 30);
 }
 
 .codemirror-container-light {
-    background-color: rgb(255, 255, 255);
+   background-color: rgb(255, 255, 255);
 }
 </style>

src/plugins/miaoCrypto/export.ts

@@ -3,23 +3,22 @@ import { registerComponentOption } from '@/class/PluginCenter'
 import { PluginExportType } from '@/types/type'
 
 const pluginConfig: registerComponentOption = {
-    key: 'miaoCrypto',
-    name: '文件加密',
-    getComponent: async () =>
-        (await import('./miaoCrypto.vue')).default,
-    filter: (vDirs, vFiles) => {
-        return true
-        if (vDirs.length !== 0) {
-            return false
-        }
-        if (vFiles.length !== 1) {
-            return false
-        }
-        return vFiles[0].name.endsWith('txt')
-    },
-    disable: true,
+   key: 'miaoCrypto',
+   name: '文件加密',
+   getComponent: async () => (await import('./miaoCrypto.vue')).default,
+   filter: (vDirs, vFiles) => {
+      return true
+      if (vDirs.length !== 0) {
+         return false
+      }
+      if (vFiles.length !== 1) {
+         return false
+      }
+      return vFiles[0].name.endsWith('txt')
+   },
+   disable: true
 }
 
 export default pluginConfig
 
-export const type = PluginExportType.component
+export const type = PluginExportType.component

src/plugins/miaoCrypto/hooks/AES.ts

@@ -8,12 +8,12 @@ import aes_worker from '../workers/aes-worker?worker'
  * @returns {Uint8Array}
  */
 export default (key: string, data: Uint8Array) => {
-    const key_u8i = aesJs.utils.utf8.toBytes(key)
-    return new Promise<Uint8Array>((resolve) => {
-        const aesWorker = new aes_worker()
-        aesWorker.onmessage = (event) => {
-            resolve(event.data)
-        }
-        aesWorker.postMessage({ data, key: key_u8i })
-    })
+   const key_u8i = aesJs.utils.utf8.toBytes(key)
+   return new Promise<Uint8Array>((resolve) => {
+      const aesWorker = new aes_worker()
+      aesWorker.onmessage = (event) => {
+         resolve(event.data)
+      }
+      aesWorker.postMessage({ data, key: key_u8i })
+   })
 }

src/plugins/miaoCrypto/miaoCrypto.vue

@@ -1,27 +1,41 @@
 <template>
-    <miao-drop-handler @on-virtual-files="handleDropVirtualFiles">
-        <div class="miaoCrypto-container">
-            <div class="miaoCrypto-container-encrypt miaoCrypto-container-item">
-
-                <n-scrollbar style="max-height: 100%">
-                    <div v-for="item of workItemList" :key="item.id" class="miaoCrypto-container-item-item">
-                        <div class="miaoCrypto-container-item-percentBar" :style="{
-                            zIndex: 0,
-                            width: item.getBufferProgress !== -1 ? `${item.getBufferProgress * 100}%` : `0%`,
-                            backgroundColor: 'blue'
-                        }"></div>
-                        <div class="miaoCrypto-container-item-percentBar" :style="{
-                            zIndex: 1,
-                            width: item.status === 'finish' ? `100%` : `0%`,
-                            backgroundColor: 'green'
-                        }"></div>
-                        <span class="miaoCrypto-container-item-content">{{ item.name }}{{ item.status }}</span>
-                    </div>
-                </n-scrollbar>
-            </div>
-            <!-- <div class="miaoCrypto-container-decrypt miaoCrypto-container-item"></div> -->
-        </div>
-    </miao-drop-handler>
+   <miao-drop-handler @on-virtual-files="handleDropVirtualFiles">
+      <div class="miaoCrypto-container">
+         <div class="miaoCrypto-container-encrypt miaoCrypto-container-item">
+            <n-scrollbar style="max-height: 100%">
+               <div
+                  v-for="item of workItemList"
+                  :key="item.id"
+                  class="miaoCrypto-container-item-item"
+               >
+                  <div
+                     class="miaoCrypto-container-item-percentBar"
+                     :style="{
+                        zIndex: 0,
+                        width:
+                           item.getBufferProgress !== -1
+                              ? `${item.getBufferProgress * 100}%`
+                              : `0%`,
+                        backgroundColor: 'blue'
+                     }"
+                  ></div>
+                  <div
+                     class="miaoCrypto-container-item-percentBar"
+                     :style="{
+                        zIndex: 1,
+                        width: item.status === 'finish' ? `100%` : `0%`,
+                        backgroundColor: 'green'
+                     }"
+                  ></div>
+                  <span class="miaoCrypto-container-item-content">
+                     {{ item.name }}{{ item.status }}
+                  </span>
+               </div>
+            </n-scrollbar>
+         </div>
+         <!-- <div class="miaoCrypto-container-decrypt miaoCrypto-container-item"></div> -->
+      </div>
+   </miao-drop-handler>
 </template>
 
 <script setup lang="ts">
@@ -38,159 +52,160 @@ import { computed } from 'vue'
 const miaoFetchApi = useMiaoFetchApi()
 
 interface workItem {
-    id: number
-    status: 'wait' | 'process' | 'finish' | 'error'
-    buffer?: Uint8Array
-    getBuffer: () => Promise<Uint8Array>
-    getBufferProgress: number
-    getBufferAbort?: () => void
-    isGettingBuffer: boolean
-    name: string
+   id: number
+   status: 'wait' | 'process' | 'finish' | 'error'
+   buffer?: Uint8Array
+   getBuffer: () => Promise<Uint8Array>
+   getBufferProgress: number
+   getBufferAbort?: () => void
+   isGettingBuffer: boolean
+   name: string
 }
 
 class Work {
-    constructor(func: (key: string, data: Uint8Array) => Promise<Uint8Array>) {
-        this.queue = []
-        this.func = func
-        this.abortLoop = false
-    }
-    queue: workItem[]
-    func: (key: string, data: Uint8Array) => Promise<Uint8Array>
-    abortLoop: boolean
-    get isBusy() {
-        return this.queue.filter((v) => v.status === 'process').length > 0
-    }
-    async funcLoop() {
-        if (this.isBusy || this.abortLoop) {
-            return
-        }
-        const currentItem = this.queue.filter((v) => v.status === 'wait')[0]
-        if (currentItem === undefined || currentItem.buffer === undefined) {
-            return
-        }
-        currentItem.status = 'process'
-        try {
-            currentItem.buffer = await this.func(key.value, currentItem.buffer)
-            currentItem.status = 'finish'
-        } catch (e) {
-            currentItem.status = 'error'
-        }
-        this.funcLoop()
-    }
-    async getBufferLoop() {
-        const _list = this.queue.filter(
-            (v) => v.isGettingBuffer === false && v.buffer === undefined
-        )
-        if (_list.length === 0 || this.abortLoop) {
-            return
-        }
-        const item = _list[0]
-        item.isGettingBuffer = true
-        try {
-            item.buffer = await item.getBuffer()
-        } catch(e) {
-            item.status = 'error'
-        }
-        item.isGettingBuffer = false
-        this.funcLoop()
-        this.getBufferLoop()
-    }
-    push(itemList: workItem[]) {
-        this.queue.push(...itemList)
-        this.getBufferLoop()
-    }
-    pushVFiles(itemList: VirtualFile[]) {
-        this.push(
-            itemList.map((v) => {
-                const item: workItem = shallowReactive({
-                    id: Math.random(),
-                    status: 'wait',
-                    name: v.name,
-                    getBuffer: () => {
-                        const { response, abort } = miaoFetchApi.getFile(v, {
-                            onProcess(percent) {
-                                item.getBufferProgress = percent
-                            }
-                        })
-                        item.getBufferAbort = abort
-                        return response
-                    },
-                    isGettingBuffer: false,
-                    getBufferProgress: 0
-                })
-                return item
+   constructor(func: (key: string, data: Uint8Array) => Promise<Uint8Array>) {
+      this.queue = []
+      this.func = func
+      this.abortLoop = false
+   }
+   queue: workItem[]
+   func: (key: string, data: Uint8Array) => Promise<Uint8Array>
+   abortLoop: boolean
+   get isBusy() {
+      return this.queue.filter((v) => v.status === 'process').length > 0
+   }
+   async funcLoop() {
+      if (this.isBusy || this.abortLoop) {
+         return
+      }
+      const currentItem = this.queue.filter((v) => v.status === 'wait')[0]
+      if (currentItem === undefined || currentItem.buffer === undefined) {
+         return
+      }
+      currentItem.status = 'process'
+      try {
+         currentItem.buffer = await this.func(key.value, currentItem.buffer)
+         currentItem.status = 'finish'
+      } catch (e) {
+         currentItem.status = 'error'
+      }
+      this.funcLoop()
+   }
+   async getBufferLoop() {
+      const _list = this.queue.filter(
+         (v) => v.isGettingBuffer === false && v.buffer === undefined
+      )
+      if (_list.length === 0 || this.abortLoop) {
+         return
+      }
+      const item = _list[0]
+      item.isGettingBuffer = true
+      try {
+         item.buffer = await item.getBuffer()
+      } catch (e) {
+         item.status = 'error'
+      }
+      item.isGettingBuffer = false
+      this.funcLoop()
+      this.getBufferLoop()
+   }
+   push(itemList: workItem[]) {
+      this.queue.push(...itemList)
+      this.getBufferLoop()
+   }
+   pushVFiles(itemList: VirtualFile[]) {
+      this.push(
+         itemList.map((v) => {
+            const item: workItem = shallowReactive({
+               id: Math.random(),
+               status: 'wait',
+               name: v.name,
+               getBuffer: () => {
+                  const { response, abort } = miaoFetchApi.getFile(v, {
+                     onProcess(percent) {
+                        item.getBufferProgress = percent
+                     }
+                  })
+                  item.getBufferAbort = abort
+                  return response
+               },
+               isGettingBuffer: false,
+               getBufferProgress: 0
             })
-        )
-    }
+            return item
+         })
+      )
+   }
 }
 
 const encryptWork = reactive(new Work(aes_ctr_worker))
 // const decryptWork = reactive(new Work(aes_ctr_worker))
 
 const workItemList = computed(() => [
-    ...encryptWork.queue
-    // ...decryptWork.queue
+   ...encryptWork.queue
+   // ...decryptWork.queue
 ])
 
 const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
-    required: true
+   required: true
 })
 
 const key = ref('ABlockIs16Bytes!')
 
 const handleDropVirtualFiles = (vFiles: VirtualFile[]) => {
-    encryptWork.pushVFiles(vFiles)
+   encryptWork.pushVFiles(vFiles)
 }
 
 onMounted(() => {
-    encryptWork.pushVFiles(currentFiles.value)
+   encryptWork.pushVFiles(currentFiles.value)
 })
 
 onUnmounted(() => {
-    encryptWork.abortLoop = true
-    encryptWork.queue.forEach(item => {
-        item.getBufferAbort && item.getBufferAbort()
-    })
+   encryptWork.abortLoop = true
+   encryptWork.queue.forEach((item) => {
+      item.getBufferAbort && item.getBufferAbort()
+   })
 })
 </script>
 
 <style scoped lang="scss">
 .miaoCrypto-container {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
+   width: 100%;
+   height: 100%;
+   display: flex;
+   flex-direction: column;
 
-    &-item {
-        max-height: 100%;
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
+   &-item {
+      max-height: 100%;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
 
-        &-item {
-            margin: 10px auto;
-            width: 95%;
-            height: 40px;
-            background-color: #fff;
-            box-shadow: 0 0 15px -7px rgba(0, 0, 0, 0.1725490196),
-                0 0 3px 1px #43434359;
+      &-item {
+         margin: 10px auto;
+         width: 95%;
+         height: 40px;
+         background-color: #fff;
+         box-shadow:
+            0 0 15px -7px rgba(0, 0, 0, 0.1725490196),
+            0 0 3px 1px #43434359;
+         border-radius: 5px;
+         position: relative;
+
+         .miaoCrypto-container-item-percentBar {
+            height: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
             border-radius: 5px;
+         }
+
+         .miaoCrypto-container-item-content {
             position: relative;
-
-            .miaoCrypto-container-item-percentBar {
-                height: 100%;
-                position: absolute;
-                top: 0;
-                left: 0;
-                border-radius: 5px;
-            }
-
-            .miaoCrypto-container-item-content {
-                position: relative;
-                z-index: 3
-            }
-        }
-    }
+            z-index: 3;
+         }
+      }
+   }
 }
 </style>

src/plugins/miaoCrypto/workers/aes-worker.ts

@@ -1,9 +1,9 @@
 import aesJs from 'aes-js'
 
 self.onmessage = async function (event) {
-    const data = event.data.data as Uint8Array
-    const key = event.data.key as Uint8Array
-    var aesCtr = new aesJs.ModeOfOperation.ctr(key, new aesJs.Counter(7058))
-    const encryptData = aesCtr.encrypt(data)
-    self.postMessage(encryptData)
+   const data = event.data.data as Uint8Array
+   const key = event.data.key as Uint8Array
+   var aesCtr = new aesJs.ModeOfOperation.ctr(key, new aesJs.Counter(7058))
+   const encryptData = aesCtr.encrypt(data)
+   self.postMessage(encryptData)
 }

src/plugins/miaoDirectory/components/miaoDirectoryBottom.vue

@@ -1,55 +1,57 @@
 <template>
-    <div class="miao-directory-container-bottom" :style="{
-      backgroundColor:
-        index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)'
-    }">
+   <div
+      class="miao-directory-container-bottom"
+      :style="{
+         backgroundColor: index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)'
+      }"
+   >
       <div class="container-bottom-item">
-        <div class="container-bottom-item-icon">
-          <add-outline :style="{
-            color:
-              index % 2 === 0
-                ? 'rgb(0 0 0)'
-                : 'rgb(255 255 255)'
-          }" @click="emit('add-new-item')" />
-        </div>
+         <div class="container-bottom-item-icon">
+            <add-outline
+               :style="{
+                  color: index % 2 === 0 ? 'rgb(0 0 0)' : 'rgb(255 255 255)'
+               }"
+               @click="emit('add-new-item')"
+            />
+         </div>
       </div>
       <div class="container-bottom-item">
-        <div class="container-bottom-item-icon">
-          <cloud-upload-outline :style="{
-            color:
-              index % 2 === 0
-                ? 'rgb(0 0 0)'
-                : 'rgb(255 255 255)'
-          }" @click="emit('pick-files-upload')" />
-        </div>
+         <div class="container-bottom-item-icon">
+            <cloud-upload-outline
+               :style="{
+                  color: index % 2 === 0 ? 'rgb(0 0 0)' : 'rgb(255 255 255)'
+               }"
+               @click="emit('pick-files-upload')"
+            />
+         </div>
       </div>
-    </div>
-  </template>
+   </div>
+</template>
 
-  <script setup lang="ts">
-  import { AddOutline, CloudUploadOutline } from '@vicons/ionicons5'
-  defineProps<{
-    index: number
-  }>()
+<script setup lang="ts">
+import { AddOutline, CloudUploadOutline } from '@vicons/ionicons5'
+defineProps<{
+   index: number
+}>()
 
-  const emit = defineEmits<{
-    'add-new-item': []
-    'pick-files-upload': []
-  }>()
-  </script>
+const emit = defineEmits<{
+   'add-new-item': []
+   'pick-files-upload': []
+}>()
+</script>
 
-  <style scoped lang="scss">
-  .miao-directory-container-bottom {
-    height: 60px;
-    background-color: bisque;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    user-select: none;
-    box-shadow: 0px 1px 10px #888888;
-    z-index: 2;
+<style scoped lang="scss">
+.miao-directory-container-bottom {
+   height: 60px;
+   background-color: bisque;
+   display: flex;
+   justify-content: space-around;
+   align-items: center;
+   user-select: none;
+   box-shadow: 0px 1px 10px #888888;
+   z-index: 2;
 
-    .container-bottom-item {
+   .container-bottom-item {
       height: 40px;
       width: 40px;
       display: flex;
@@ -57,21 +59,21 @@
       align-items: center;
 
       .container-bottom-item-icon {
-        svg {
-          width: 30px;
-          height: 30px;
-          transition: width 0.3s ease;
-          transition: height 0.3s ease;
-          cursor: pointer;
-        }
+         svg {
+            width: 30px;
+            height: 30px;
+            transition: width 0.3s ease;
+            transition: height 0.3s ease;
+            cursor: pointer;
+         }
 
-        &:hover {
-          svg {
-            width: 40px;
-            height: 40px;
-          }
-        }
+         &:hover {
+            svg {
+               width: 40px;
+               height: 40px;
+            }
+         }
       }
-    }
-  }
-  </style>
+   }
+}
+</style>

src/plugins/miaoDirectory/components/miaoDirectoryItem.vue

@@ -1,71 +1,103 @@
 <template>
-    <miao-draggable-div class="miao-item" :isDraggable="!draggable" ref="itemRef" @on-drag-start="handleDragStart">
-        <miaoContextMenu :options="dropDownOptions ?? []" :touch-time-out="500" @select="handleDropdownSelect">
-            <div class="item-main" :class="selected ? 'item-main-selected' : ''" ref="mainRef">
-                <div class="item-main-front" :style="{ backgroundColor: props.color }"></div>
-                <Icon class="item-main-icon" v-show="clientWidth > 250"></Icon>
-                <div class="item-main-info">
-                    <div class="item-main-info-name">
-                        <Icon class="item-main-info-name-icon" v-if="clientWidth <= 250"></Icon>
-                        <n-ellipsis :style="{ maxWidth: clientWidth > 250 ? '80%' : '75%' }">{{ name }}</n-ellipsis>
-                    </div>
-                    <div class="item-main-info-date" v-if="time">
-                        {{ time }}
-                    </div>
-                </div>
-                <miao-draggable-div class="item-main-dragBtn" :isDraggable="draggable">
-                    <ReorderFourOutline></ReorderFourOutline>
-                </miao-draggable-div>
+   <miao-draggable-div
+      class="miao-item"
+      :isDraggable="!draggable"
+      ref="itemRef"
+      @on-drag-start="handleDragStart"
+   >
+      <miaoContextMenu
+         :options="dropDownOptions ?? []"
+         :touch-time-out="500"
+         @select="handleDropdownSelect"
+      >
+         <div
+            class="item-main"
+            :class="selected ? 'item-main-selected' : ''"
+            ref="mainRef"
+         >
+            <div
+               class="item-main-front"
+               :style="{ backgroundColor: props.color }"
+            ></div>
+            <Icon
+               class="item-main-icon"
+               v-show="clientWidth > 250"
+            ></Icon>
+            <div class="item-main-info">
+               <div class="item-main-info-name">
+                  <Icon
+                     class="item-main-info-name-icon"
+                     v-if="clientWidth <= 250"
+                  ></Icon>
+                  <n-ellipsis
+                     :style="{ maxWidth: clientWidth > 250 ? '80%' : '75%' }"
+                  >
+                     {{ name }}
+                  </n-ellipsis>
+               </div>
+               <div
+                  class="item-main-info-date"
+                  v-if="time"
+               >
+                  {{ time }}
+               </div>
             </div>
-        </miaoContextMenu>
-    </miao-draggable-div>
+            <miao-draggable-div
+               class="item-main-dragBtn"
+               :isDraggable="draggable"
+            >
+               <ReorderFourOutline></ReorderFourOutline>
+            </miao-draggable-div>
+         </div>
+      </miaoContextMenu>
+   </miao-draggable-div>
 </template>
 
 <script setup lang="ts">
 import miaoContextMenu from '@/components/miaoContextMenu.vue'
 import {
-    DocumentText,
-    FileTray,
-    Help,
-    Image,
-    LogoChrome,
-    LogoCss3,
-    LogoJavascript,
-    LogoVue,
-    PlayCircle,
-    Disc,
-    ReorderFourOutline,
+   DocumentText,
+   FileTray,
+   Help,
+   Image,
+   LogoChrome,
+   LogoCss3,
+   LogoJavascript,
+   LogoVue,
+   PlayCircle,
+   Disc,
+   ReorderFourOutline
 } from '@vicons/ionicons5'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import dateFormatter from '@/hooks/dateFormatter'
 import { NEllipsis } from 'naive-ui'
-import { DropdownOption } from 'naive-ui/es/dropdown';
+import { DropdownOption } from 'naive-ui/es/dropdown'
 import miaoDraggableDiv from '@/components/miaoDraggableDiv.vue'
 // import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
 
 // const miaoFetchApi = useMiaoFetchApi()
 
 const props = defineProps<{
-    item: {
-        name: string,
-        type: 'directory' | 'file'
-        stats: {
-            mtimeMs: number
-        }
-    }
-    name?: string
-    color: string
-    dropDownOptions?: DropdownOption[]
-    selected?: boolean
+   item: {
+      name: string
+      type: 'directory' | 'file'
+      stats: {
+         mtimeMs: number
+      }
+   }
+   name?: string
+   color: string
+   dropDownOptions?: DropdownOption[]
+   selected?: boolean
 }>()
 
 const emit = defineEmits<{
-    download: []
-    delete: []
-    rename: []
-    dragStart: [e: DragEvent]
-    onSelected: []
-    plugin: [plugin: string]
+   download: []
+   delete: []
+   rename: []
+   dragStart: [e: DragEvent]
+   onSelected: []
+   plugin: [plugin: string]
 }>()
 
 const mainRef = ref<HTMLDivElement>()
@@ -78,227 +110,224 @@ const clientWidth = ref<number>(666)
 
 const name = props.name ?? props.item.name
 
-const observer = new ResizeObserver(entries => {
-    for (let entry of entries) {
-        clientWidth.value = entry.contentRect.width;
-    }
-});
+const observer = new ResizeObserver((entries) => {
+   for (let entry of entries) {
+      clientWidth.value = entry.contentRect.width
+   }
+})
 
 const time = computed(() => {
-    return dateFormatter(
-        new Date(props.item.stats.mtimeMs),
-        'yyyy-MM-dd hh:mm:ss'
-    )
+   return dateFormatter(
+      new Date(props.item.stats.mtimeMs),
+      'yyyy-MM-dd hh:mm:ss'
+   )
 })
 
 // 应该将所有事件emit出去才对
 const handleDropdownSelect = (key: string) => {
-    if (key === 'rename') {
-        emit('rename')
-    } else if (key === 'download') {
-        emit('download')
-    } else if (key === 'delete') {
-        emit('delete')
-    } else if (key === 'select') {
-        emit('onSelected')
-    } else if (key.startsWith('plugin:')) {
-        const plugin = key.split(':')[1]
-        emit('plugin', plugin)
-    }
+   if (key === 'rename') {
+      emit('rename')
+   } else if (key === 'download') {
+      emit('download')
+   } else if (key === 'delete') {
+      emit('delete')
+   } else if (key === 'select') {
+      emit('onSelected')
+   } else if (key.startsWith('plugin:')) {
+      const plugin = key.split(':')[1]
+      emit('plugin', plugin)
+   }
 }
 
 const Icon = computed(() => {
-    try {
-        if (props.item.type === 'directory') {
-            return FileTray
-        } else if (props.item.type === 'file') {
-            const aft = props.item.name.split('.').at(-1)?.toLowerCase()
-            if (!aft) {
-                throw 1
-            } else if (
-                ['txt', 'doc', 'docs', 'docx', 'xls', 'xlsx'].includes(aft)
-            ) {
-                return DocumentText
-            } else if (
-                ['mp3', 'wav', 'ape', 'acc', 'ogg', 'flac'].includes(aft)
-            ) {
-                return Disc
-            } else if (
-                [
-                    'xbm',
-                    'tif',
-                    'pjp',
-                    'svgz',
-                    'jpg',
-                    'jpeg',
-                    'ico',
-                    'tiff',
-                    'gif',
-                    'svg',
-                    'jfif',
-                    'webp',
-                    'png',
-                    'bmp',
-                    'pjpeg',
-                    'avif'
-                ].includes(aft)
-            ) {
-                return Image
-            } else if (['mp4', 'm2v', 'mkv'].includes(aft)) {
-                return PlayCircle
-            } else if (['js', 'jsx', 'ts', 'tsx'].includes(aft)) {
-                return LogoJavascript
-            } else if (['html'].includes(aft)) {
-                return LogoChrome
-            } else if (['css', 'scss', 'less'].includes(aft)) {
-                return LogoCss3
-            } else if (['vue'].includes(aft)) {
-                return LogoVue
-            }
+   try {
+      if (props.item.type === 'directory') {
+         return FileTray
+      } else if (props.item.type === 'file') {
+         const aft = props.item.name.split('.').at(-1)?.toLowerCase()
+         if (!aft) {
+            throw 1
+         } else if (
+            ['txt', 'doc', 'docs', 'docx', 'xls', 'xlsx'].includes(aft)
+         ) {
             return DocumentText
-        }
-    } catch {
-        return Help
-    }
+         } else if (['mp3', 'wav', 'ape', 'acc', 'ogg', 'flac'].includes(aft)) {
+            return Disc
+         } else if (
+            [
+               'xbm',
+               'tif',
+               'pjp',
+               'svgz',
+               'jpg',
+               'jpeg',
+               'ico',
+               'tiff',
+               'gif',
+               'svg',
+               'jfif',
+               'webp',
+               'png',
+               'bmp',
+               'pjpeg',
+               'avif'
+            ].includes(aft)
+         ) {
+            return Image
+         } else if (['mp4', 'm2v', 'mkv'].includes(aft)) {
+            return PlayCircle
+         } else if (['js', 'jsx', 'ts', 'tsx'].includes(aft)) {
+            return LogoJavascript
+         } else if (['html'].includes(aft)) {
+            return LogoChrome
+         } else if (['css', 'scss', 'less'].includes(aft)) {
+            return LogoCss3
+         } else if (['vue'].includes(aft)) {
+            return LogoVue
+         }
+         return DocumentText
+      }
+   } catch {
+      return Help
+   }
 })
 
 const itemRef = ref()
 
 const handleDragStart = (e: DragEvent) => {
-    emit('dragStart', e)
+   emit('dragStart', e)
 }
 
 onMounted(() => {
-    if (mainRef.value) {
-        observer.observe(mainRef.value);
-    }
+   if (mainRef.value) {
+      observer.observe(mainRef.value)
+   }
 })
 
 onBeforeUnmount(() => {
-    if (mainRef.value) {
-        observer.unobserve(mainRef.value);
-    }
+   if (mainRef.value) {
+      observer.unobserve(mainRef.value)
+   }
 })
 </script>
 
 <style lang="scss" scoped>
 .miao-item {
-    cursor: pointer;
-    width: calc(100% - 20px);
-    // min-width: 170px;
-    // aspect-ratio: 66/9;
-    height: 50px;
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 10px 10px;
+   cursor: pointer;
+   width: calc(100% - 20px);
+   // min-width: 170px;
+   // aspect-ratio: 66/9;
+   height: 50px;
+   position: relative;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   margin: 10px 10px;
 
-    .item-main {
-        position: relative;
-        width: 100%;
-        height: 95%;
-        background-color: rgb(255, 255, 255);
-        border-radius: 7px;
-        display: flex;
-        align-items: center;
-        transition: background-color 0.3s ease;
-        overflow-x: hidden;
+   .item-main {
+      position: relative;
+      width: 100%;
+      height: 95%;
+      background-color: rgb(255, 255, 255);
+      border-radius: 7px;
+      display: flex;
+      align-items: center;
+      transition: background-color 0.3s ease;
+      overflow-x: hidden;
 
-        .item-main-front {
-            height: 100%;
-            min-width: 10px;
-            border-radius: 7px 0 0 7px;
-            background-color: rgb(0, 0, 0);
-        }
+      .item-main-front {
+         height: 100%;
+         min-width: 10px;
+         border-radius: 7px 0 0 7px;
+         background-color: rgb(0, 0, 0);
+      }
 
-        .item-main-icon {
-            min-width: 30px;
-            margin-left: 10px;
-            height: 30px;
-            width: 30px;
-            color: #00403e;
-            transition: color 0.15s ease-out;
-        }
+      .item-main-icon {
+         min-width: 30px;
+         margin-left: 10px;
+         height: 30px;
+         width: 30px;
+         color: #00403e;
+         transition: color 0.15s ease-out;
+      }
 
-        .item-main-info {
-            margin-left: 10px;
-            height: 100%;
-            width: calc(100% - 10px);
+      .item-main-info {
+         margin-left: 10px;
+         height: 100%;
+         width: calc(100% - 10px);
+         display: flex;
+         flex-direction: column;
+
+         &-name {
+            position: relative;
+            user-select: none;
             display: flex;
-            flex-direction: column;
-
-            &-name {
-                position: relative;
-                user-select: none;
-                display: flex;
-                align-items: center;
-                margin-top: 3px;
-
-                &-icon {
-                    color: #00403e;
-                    width: 20px;
-                    margin-right: 5px;
-                    transition: color 0.15s ease-out;
-                }
-            }
-
-            &-date {
-                user-select: none;
-                font-size: small;
-                text-wrap: nowrap;
-            }
-        }
-
-        .item-main-option {
-            height: 100%;
-            width: 20px;
-            position: absolute;
-            right: 0;
-            border-radius: 0 7px 7px 0;
-            background-color: rgba(0, 0, 0, 0);
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
             align-items: center;
+            margin-top: 3px;
 
-            transition: background-color 0.3s;
+            &-icon {
+               color: #00403e;
+               width: 20px;
+               margin-right: 5px;
+               transition: color 0.15s ease-out;
+            }
+         }
+
+         &-date {
+            user-select: none;
+            font-size: small;
+            text-wrap: nowrap;
+         }
+      }
+
+      .item-main-option {
+         height: 100%;
+         width: 20px;
+         position: absolute;
+         right: 0;
+         border-radius: 0 7px 7px 0;
+         background-color: rgba(0, 0, 0, 0);
+         display: flex;
+         flex-direction: column;
+         justify-content: center;
+         align-items: center;
+
+         transition: background-color 0.3s;
+
+         .item-main-option-icon {
+            color: #000;
+            transition: color 0.15s;
+         }
+
+         &:hover,
+         &:active {
+            background-color: #8b8b8b;
 
             .item-main-option-icon {
-                color: #000;
-                transition: color 0.15s;
+               color: #fff;
             }
+         }
+      }
 
-            &:hover,
-            &:active {
-                background-color: #8b8b8b;
+      &:hover,
+      &:active {
+         background-color: #d2d2d2;
+      }
+   }
 
-                .item-main-option-icon {
-                    color: #fff;
-                }
-            }
-        }
+   .item-main-selected {
+      background-color: rgba(0, 128, 207, 0.32);
 
-        &:hover,
-        &:active {
-            background-color: #d2d2d2;
-        }
-    }
-
-    .item-main-selected {
-        background-color: rgba(0, 128, 207, 0.32);
-
-        &:hover {
-            background-color: rgba(0, 128, 207, 0.64);
-            ;
-        }
-    }
+      &:hover {
+         background-color: rgba(0, 128, 207, 0.64);
+      }
+   }
 }
 
 .item-main-dragBtn {
-    width: 20px;
-    height: 20px;
-    position: absolute;
-    right: 5px;
+   width: 20px;
+   height: 20px;
+   position: absolute;
+   right: 5px;
 }
 </style>

src/plugins/miaoDirectory/components/miaoDirectoryItemsContainer.vue

@@ -1,46 +1,54 @@
 <template>
-    <div
-        class="miao-directory-container-items"
-        :style="{
-            backgroundColor: index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
-        }">
-        <n-scrollbar ref="scrollbarRef" style="max-height: 100%">
-            <miao-lazy-div
-                v-for="dir in showData_directory"
-                :key="dir.id"
-                min-height="50px"
-                margin="10px">
-                <miaoDirectoryItem
-                    :item="dir"
-                    :color="props.color"
-                    :selected="selectedItem.includes(dir)"
-                    :drop-down-options="itemDropDownOptions(dir).value"
-                    @delete="handleItemDelete(dir)"
-                    @plugin="(p) => handleItemUsePlugin(dir)(p)"
-                    @click="handleItemClick(dir)"
-                    @drag-start="(e) => handleItemDragStart(dir)(e)"
-                    @rename="handleItemRename(dir)"
-                    @on-selected="handleItemSelect(dir)" />
-            </miao-lazy-div>
-            <miao-lazy-div
-                v-for="file in showData_files"
-                :key="file.id"
-                min-height="50px">
-                <miaoDirectoryItem
-                    :item="file"
-                    :color="props.color"
-                    :selected="selectedItem.includes(file)"
-                    :drop-down-options="itemDropDownOptions(file).value"
-                    @click="handleItemClick(file)"
-                    @download="handleItemDownload(file)"
-                    @delete="handleItemDelete(file)"
-                    @drag-start="(e) => handleItemDragStart(file)(e)"
-                    @rename="handleItemRename(file)"
-                    @plugin="(p) => handleItemUsePlugin(file)(p)"
-                    @on-selected="handleItemSelect(file)" />
-            </miao-lazy-div>
-        </n-scrollbar>
-    </div>
+   <div
+      class="miao-directory-container-items"
+      :style="{
+         backgroundColor: index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
+      }"
+   >
+      <n-scrollbar
+         ref="scrollbarRef"
+         style="max-height: 100%"
+      >
+         <miao-lazy-div
+            v-for="dir in showData_directory"
+            :key="dir.id"
+            min-height="50px"
+            margin="10px"
+         >
+            <miaoDirectoryItem
+               :item="dir"
+               :color="props.color"
+               :selected="selectedItem.includes(dir)"
+               :drop-down-options="itemDropDownOptions(dir).value"
+               @delete="handleItemDelete(dir)"
+               @plugin="(p) => handleItemUsePlugin(dir)(p)"
+               @click="handleItemClick(dir)"
+               @drag-start="(e) => handleItemDragStart(dir)(e)"
+               @rename="handleItemRename(dir)"
+               @on-selected="handleItemSelect(dir)"
+            />
+         </miao-lazy-div>
+         <miao-lazy-div
+            v-for="file in showData_files"
+            :key="file.id"
+            min-height="50px"
+         >
+            <miaoDirectoryItem
+               :item="file"
+               :color="props.color"
+               :selected="selectedItem.includes(file)"
+               :drop-down-options="itemDropDownOptions(file).value"
+               @click="handleItemClick(file)"
+               @download="handleItemDownload(file)"
+               @delete="handleItemDelete(file)"
+               @drag-start="(e) => handleItemDragStart(file)(e)"
+               @rename="handleItemRename(file)"
+               @plugin="(p) => handleItemUsePlugin(file)(p)"
+               @on-selected="handleItemSelect(file)"
+            />
+         </miao-lazy-div>
+      </n-scrollbar>
+   </div>
 </template>
 
 <script setup lang="ts">
@@ -55,128 +63,128 @@ import { renderIcon } from '@/hooks/miaoTools'
 const pluginCenter = usePluginCenter()
 
 const props = defineProps<{
-    color: string
-    index: number
-    showData_directory: VirtualDirectory[]
-    showData_files: VirtualFile[]
-    selectedItem: (VirtualFile | VirtualDirectory)[]
+   color: string
+   index: number
+   showData_directory: VirtualDirectory[]
+   showData_files: VirtualFile[]
+   selectedItem: (VirtualFile | VirtualDirectory)[]
 }>()
 
 const emit = defineEmits<{
-    'item-click': [item: VirtualDirectory | VirtualFile]
-    'item-download': [item: VirtualFile]
-    'item-delete': [item: VirtualDirectory | VirtualFile]
-    'item-drag-start': [_event: DragEvent, item: VirtualDirectory | VirtualFile]
-    'item-rename': [item: VirtualDirectory | VirtualFile]
-    'item-select': [item: VirtualDirectory | VirtualFile]
+   'item-click': [item: VirtualDirectory | VirtualFile]
+   'item-download': [item: VirtualFile]
+   'item-delete': [item: VirtualDirectory | VirtualFile]
+   'item-drag-start': [_event: DragEvent, item: VirtualDirectory | VirtualFile]
+   'item-rename': [item: VirtualDirectory | VirtualFile]
+   'item-select': [item: VirtualDirectory | VirtualFile]
 }>()
 
 const scrollbarRef = ref()
 
 const itemDropDownOptions = (item: VirtualDirectory | VirtualFile) =>
-    computed(() => {
-        const items = [...props.selectedItem]
-        const selected = props.selectedItem.includes(item)
-        if (!selected) {
-            items.push(item)
-        }
-        const vDirs = items.filter((v) => v.type === 'directory')
-        const vFiles = items.filter((v) => v.type === 'file')
-        const options = [
-            {
-                label: '重命名',
-                key: 'rename'
-            },
-            {
-                label: '删除',
-                key: 'delete'
-            }
-        ]
-        if (item.type === 'file') {
-            options.push(
-                ...[
-                    {
-                        label: '下载',
-                        key: 'download'
-                    }
-                ]
-            )
-        }
-        if (selected === false) {
-            options.push(
-                ...[
-                    {
-                        label: '多选:选择',
-                        key: 'select'
-                    }
-                ]
-            )
-        } else {
-            options.push(
-                ...[
-                    {
-                        label: '多选:取消',
-                        key: 'select'
-                    }
-                ]
-            )
-        }
-        options.push(
-            ...pluginCenter.getUsablePlugin(vDirs, vFiles).map((v) => ({
-                label: `插件:${v.name}`,
-                key: `plugin:${v.key}`,
-                icon: v.icon ? renderIcon(v.icon) : undefined
-            }))
-        )
-        return options
-    })
+   computed(() => {
+      const items = [...props.selectedItem]
+      const selected = props.selectedItem.includes(item)
+      if (!selected) {
+         items.push(item)
+      }
+      const vDirs = items.filter((v) => v.type === 'directory')
+      const vFiles = items.filter((v) => v.type === 'file')
+      const options = [
+         {
+            label: '重命名',
+            key: 'rename'
+         },
+         {
+            label: '删除',
+            key: 'delete'
+         }
+      ]
+      if (item.type === 'file') {
+         options.push(
+            ...[
+               {
+                  label: '下载',
+                  key: 'download'
+               }
+            ]
+         )
+      }
+      if (selected === false) {
+         options.push(
+            ...[
+               {
+                  label: '多选:选择',
+                  key: 'select'
+               }
+            ]
+         )
+      } else {
+         options.push(
+            ...[
+               {
+                  label: '多选:取消',
+                  key: 'select'
+               }
+            ]
+         )
+      }
+      options.push(
+         ...pluginCenter.getUsablePlugin(vDirs, vFiles).map((v) => ({
+            label: `插件:${v.name}`,
+            key: `plugin:${v.key}`,
+            icon: v.icon ? renderIcon(v.icon) : undefined
+         }))
+      )
+      return options
+   })
 
 const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
-    emit('item-click', item)
+   emit('item-click', item)
 }
 
 const handleItemDownload = (item: VirtualFile) => {
-    emit('item-download', item)
+   emit('item-download', item)
 }
 
 const handleItemDelete = (item: VirtualDirectory | VirtualFile) => {
-    emit('item-delete', item)
+   emit('item-delete', item)
 }
 
 const handleItemDragStart =
-    (item: VirtualDirectory | VirtualFile) => (_event: DragEvent) => {
-        emit('item-drag-start', _event, item)
-    }
+   (item: VirtualDirectory | VirtualFile) => (_event: DragEvent) => {
+      emit('item-drag-start', _event, item)
+   }
 
 const handleItemRename = (item: VirtualDirectory | VirtualFile) => {
-    emit('item-rename', item)
+   emit('item-rename', item)
 }
 
 const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
-    emit('item-select', item)
+   emit('item-select', item)
 }
 
 const handleItemUsePlugin =
-    (item: VirtualDirectory | VirtualFile) => (plugin: string) => {
-        const items = [...props.selectedItem]
-        const selected = props.selectedItem.includes(item)
-        if (!selected) {
-            items.push(item)
-        }
-        const vDirs = items.filter((v) => v.type === 'directory')
-        const vFiles = items.filter((v) => v.type === 'file')
-        pluginCenter.usePlugin(plugin, vDirs, vFiles)
-    }
+   (item: VirtualDirectory | VirtualFile) => (plugin: string) => {
+      const items = [...props.selectedItem]
+      const selected = props.selectedItem.includes(item)
+      if (!selected) {
+         items.push(item)
+      }
+      const vDirs = items.filter((v) => v.type === 'directory')
+      const vFiles = items.filter((v) => v.type === 'file')
+      pluginCenter.usePlugin(plugin, vDirs, vFiles)
+   }
 
 defineExpose({
-    scrollTo: (...args: any) => scrollbarRef.value.scrollTo(...args)
+   scrollTo: (...args: any) => scrollbarRef.value.scrollTo(...args)
 })
 </script>
 
 <style scoped lang="scss">
 .miao-directory-container-items {
-    width: 100%;
-    flex: 1;
-    min-height: 0;
+   width: 100%;
+   flex: 1;
+   min-height: 0;
 }
 </style>

src/plugins/miaoDirectory/components/miaoDirectoryTop.vue

@@ -1,152 +1,176 @@
 <template>
-    <div class="miao-directory-container-top" :style="{
-        backgroundColor:
-            index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
-    }">
-        <div class="container-top-colorfulBar" :style="{ backgroundColor: props.color }"></div>
-        <div class="container-top-breadcrumb">
-            <div class="container-top-breadcrumb-container">
-                <n-breadcrumb separator=">" style="margin-left: 5px">
-                    <n-breadcrumb-item :clickable="false">
-                        <n-icon size="18">
-                            <CloudOutline />
-                        </n-icon>
-                    </n-breadcrumb-item>
-                    <n-breadcrumb-item v-for="dir in currentDirectory?.getParents"
-                        @click="handleClickBreadcrumbItem(dir)" :clickable="true">
-                        <div>{{ dir.name }}</div>
-                    </n-breadcrumb-item>
-                </n-breadcrumb>
-            </div>
-        </div>
-        <div class="container-top-tools">
-            <n-icon class="container-top-tools-item" size="15" @click="$emit('back')">
-                <ChevronBackOutline />
+   <div
+      class="miao-directory-container-top"
+      :style="{
+         backgroundColor: index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
+      }"
+   >
+      <div
+         class="container-top-colorfulBar"
+         :style="{ backgroundColor: props.color }"
+      ></div>
+      <div class="container-top-breadcrumb">
+         <div class="container-top-breadcrumb-container">
+            <n-breadcrumb
+               separator=">"
+               style="margin-left: 5px"
+            >
+               <n-breadcrumb-item :clickable="false">
+                  <n-icon size="18">
+                     <CloudOutline />
+                  </n-icon>
+               </n-breadcrumb-item>
+               <n-breadcrumb-item
+                  v-for="dir in currentDirectory?.getParents"
+                  @click="handleClickBreadcrumbItem(dir)"
+                  :clickable="true"
+               >
+                  <div>{{ dir.name }}</div>
+               </n-breadcrumb-item>
+            </n-breadcrumb>
+         </div>
+      </div>
+      <div class="container-top-tools">
+         <n-icon
+            class="container-top-tools-item"
+            size="15"
+            @click="$emit('back')"
+         >
+            <ChevronBackOutline />
+         </n-icon>
+         <n-icon
+            class="container-top-tools-item"
+            size="14"
+            @click="$emit('reload')"
+         >
+            <ReloadOutline class="container-top-tools-item-reload" />
+         </n-icon>
+         <n-dropdown
+            trigger="click"
+            :options="openMenuOption"
+            @select="(key: string) => emit('menuSelect', key)"
+         >
+            <n-icon
+               class="container-top-tools-item"
+               size="14"
+            >
+               <EllipsisVertical />
             </n-icon>
-            <n-icon class="container-top-tools-item" size="14" @click="$emit('reload')">
-                <ReloadOutline class="container-top-tools-item-reload" />
-            </n-icon>
-            <n-dropdown trigger="click" :options="openMenuOption" @select="(key: string) => emit('menuSelect', key)">
-                <n-icon class="container-top-tools-item" size="14">
-                    <EllipsisVertical />
-                </n-icon>
-            </n-dropdown>
-        </div>
-    </div>
+         </n-dropdown>
+      </div>
+   </div>
 </template>
 
 <script setup lang="ts">
 import { NBreadcrumbItem, NBreadcrumb, NIcon, NDropdown } from 'naive-ui'
 import {
-    CloudOutline,
-    ChevronBackOutline,
-    ReloadOutline,
-    EllipsisVertical,
+   CloudOutline,
+   ChevronBackOutline,
+   ReloadOutline,
+   EllipsisVertical
 } from '@vicons/ionicons5'
 import VirtualDirectory from '@/class/VirtualDirectory'
 
 const props = defineProps<{
-    color: string;
-    index: number
-    currentDirectory: VirtualDirectory | undefined;
-    openMenuOption: {
-        key: string,
-        label: string,
-        [key: string]: any,
-    }[]
+   color: string
+   index: number
+   currentDirectory: VirtualDirectory | undefined
+   openMenuOption: {
+      key: string
+      label: string
+      [key: string]: any
+   }[]
 }>()
 
 const emit = defineEmits<{
-    back: [],
-    reload: [],
-    menuSelect: [key: string]
-    'set-current-directory': [virtualDirectory: VirtualDirectory]
+   back: []
+   reload: []
+   menuSelect: [key: string]
+   'set-current-directory': [virtualDirectory: VirtualDirectory]
 }>()
 
 const handleClickBreadcrumbItem = (virtualDirectory: VirtualDirectory) => {
-    emit('set-current-directory', virtualDirectory)
+   emit('set-current-directory', virtualDirectory)
 }
-
 </script>
 
 <style scoped lang="scss">
 .miao-directory-container-top {
-    height: 30px;
-    width: 100%;
-    user-select: none;
-    position: relative;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-    background-color: #f1f1f1;
+   height: 30px;
+   width: 100%;
+   user-select: none;
+   position: relative;
+   display: flex;
+   align-items: center;
+   overflow: hidden;
+   background-color: #f1f1f1;
 
-    .container-top-colorfulBar {
-        height: 70%;
-        width: 5px;
-        margin-left: 10px;
-        border-radius: 3px 0 0 3px;
-    }
+   .container-top-colorfulBar {
+      height: 70%;
+      width: 5px;
+      margin-left: 10px;
+      border-radius: 3px 0 0 3px;
+   }
 
-    .container-top-breadcrumb {
-        position: relative;
-        height: 70%;
-        width: calc(100% - 95px);
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        // overflow: hidden;
-        overflow-y: hidden;
-        overflow-x: hidden;
-        background-color: #ffffff;
-        padding: 0 5px;
-        border-radius: 0 3px 3px 0;
+   .container-top-breadcrumb {
+      position: relative;
+      height: 70%;
+      width: calc(100% - 95px);
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      // overflow: hidden;
+      overflow-y: hidden;
+      overflow-x: hidden;
+      background-color: #ffffff;
+      padding: 0 5px;
+      border-radius: 0 3px 3px 0;
 
-        .container-top-breadcrumb-container {
-            position: absolute;
-            height: 100%;
-            right: 0;
-            top: 0;
-            min-width: 100%;
-            display: flex;
-            justify-content: flex-start;
-            align-items: center;
-        }
-    }
+      .container-top-breadcrumb-container {
+         position: absolute;
+         height: 100%;
+         right: 0;
+         top: 0;
+         min-width: 100%;
+         display: flex;
+         justify-content: flex-start;
+         align-items: center;
+      }
+   }
 
-    .container-top-tools {
-        position: relative;
-        height: 100%;
-        // width: 70px;
-        padding: 0 5px;
-        display: flex;
-        justify-content: space-around;
-        align-items: center;
+   .container-top-tools {
+      position: relative;
+      height: 100%;
+      // width: 70px;
+      padding: 0 5px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
 
-        .container-top-tools-item {
-            width: 20px;
-            height: 20px;
-            margin: 0 1px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            background-color: #ffffff00;
-            border-radius: 5px;
-            transition: background-color 0.3s;
-            cursor: pointer;
+      .container-top-tools-item {
+         width: 20px;
+         height: 20px;
+         margin: 0 1px;
+         display: flex;
+         justify-content: center;
+         align-items: center;
+         background-color: #ffffff00;
+         border-radius: 5px;
+         transition: background-color 0.3s;
+         cursor: pointer;
 
-            .container-top-tools-item-reload {
-                transition: transform 0.6s ease-in-out;
-            }
+         .container-top-tools-item-reload {
+            transition: transform 0.6s ease-in-out;
+         }
 
-            &:hover {
-                background-color: rgba(128, 128, 128, 0.4);
-            }
+         &:hover {
+            background-color: rgba(128, 128, 128, 0.4);
+         }
 
-            &:active .container-top-tools-item-reload {
-                transform: rotate(360deg);
-            }
-        }
-
-    }
+         &:active .container-top-tools-item-reload {
+            transform: rotate(360deg);
+         }
+      }
+   }
 }
-</style>
+</style>

src/plugins/miaoDirectory/export.ts

@@ -3,21 +3,20 @@ import FileTray from '@vicons/ionicons5/es/FileTray'
 // import MiaoDirectory from '@/plugins/miaoDirectory/miaoDirectory.vue'
 
 const pluginConfig: registerComponentOption = {
-    key: 'miaoDirectory',
-    name: '文件夹',
-    icon: FileTray,
-    getComponent: async () =>
-        (await import('@/plugins/miaoDirectory/miaoDirectory.vue')).default,
-    filter: (vDirs, vFiles) => {
-        if (vFiles.length) {
-            return false
-        }
-        return vDirs.length === 1
-    }
+   key: 'miaoDirectory',
+   name: '文件夹',
+   icon: FileTray,
+   getComponent: async () =>
+      (await import('@/plugins/miaoDirectory/miaoDirectory.vue')).default,
+   filter: (vDirs, vFiles) => {
+      if (vFiles.length) {
+         return false
+      }
+      return vDirs.length === 1
+   }
 }
 
 export default pluginConfig
 
-
 import { PluginExportType } from '@/types/type'
-export const type = PluginExportType.component
+export const type = PluginExportType.component

src/plugins/miaoDirectory/export_onInit.ts

@@ -1,37 +1,40 @@
-import { Plugin, PluginGroup } from "@/class/PluginCenter";
-import { PluginExportType } from "@/types/type";
-import { watch } from "vue";
+import { Plugin, PluginGroup } from '@/class/PluginCenter'
+import { PluginExportType } from '@/types/type'
+import { watch } from 'vue'
 
 const pluginConfig: Plugin = {
-	name: "初始化完成之后打开miaoDirectory",
-	filter: () => {
-		return false;
-	},
-	disable: false,
-	group: [PluginGroup.immediately],
-	func: (_, __, hooks) => {
-		const { getPluginCenter, getRootVDirectory, getViews } = hooks
-		const views = getViews();
-		const pc = getPluginCenter();
-		const root = getRootVDirectory();
-		setTimeout(() => {
-			if (views.length === 0) {
-				pc.usePlugin('miaoDirectory', [root])
-			}
-			watch(() => views.length, () => {
-				if(views.length === 0) {
-					pc.usePlugin('miaoDirectory', [root])
-				}
-			})
-			
-			pc.deregister('miaoDirectory_onInit')
-		})
-	},
-	priority: -1
-};
+   name: '初始化完成之后打开miaoDirectory',
+   filter: () => {
+      return false
+   },
+   disable: false,
+   group: [PluginGroup.immediately],
+   func: (_, __, hooks) => {
+      const { getPluginCenter, getRootVDirectory, getViews } = hooks
+      const views = getViews()
+      const pc = getPluginCenter()
+      const root = getRootVDirectory()
+      setTimeout(() => {
+         if (views.length === 0) {
+            pc.usePlugin('miaoDirectory', [root])
+         }
+         watch(
+            () => views.length,
+            () => {
+               if (views.length === 0) {
+                  pc.usePlugin('miaoDirectory', [root])
+               }
+            }
+         )
 
-export default pluginConfig;
+         pc.deregister('miaoDirectory_onInit')
+      })
+   },
+   priority: -1
+}
 
-export const type = PluginExportType.default;
+export default pluginConfig
 
-export const key = "miaoDirectory_onInit";
+export const type = PluginExportType.default
+
+export const key = 'miaoDirectory_onInit'

src/plugins/miaoIframe/export.ts

@@ -2,25 +2,24 @@ import { registerComponentOption } from '@/class/PluginCenter'
 import LogoChrome from '@vicons/ionicons5/es/LogoChrome'
 
 const pluginConfig: registerComponentOption = {
-    key: 'miaoIframe',
-    name: '框架',
-    icon: LogoChrome,
-    getComponent: async () =>
-        (await import('@/plugins/miaoIframe/miaoIframe.vue')).default,
-    filter: (vDirs, vFiles) => {
-        if (vDirs.length !== 0) {
-            return false
-        }
-        if (vFiles.length !== 1) {
-            return false
-        }
-        return vFiles[0].name.endsWith('html')
-    },
-	priority: 2
+   key: 'miaoIframe',
+   name: '框架',
+   icon: LogoChrome,
+   getComponent: async () =>
+      (await import('@/plugins/miaoIframe/miaoIframe.vue')).default,
+   filter: (vDirs, vFiles) => {
+      if (vDirs.length !== 0) {
+         return false
+      }
+      if (vFiles.length !== 1) {
+         return false
+      }
+      return vFiles[0].name.endsWith('html')
+   },
+   priority: 2
 }
 
 export default pluginConfig
 
-
 import { PluginExportType } from '@/types/type'
-export const type = PluginExportType.component
+export const type = PluginExportType.component

src/plugins/miaoIframe/miaoIframe.vue

@@ -1,52 +1,54 @@
 <template>
-    <div class="miao-markdown-container-miaomiaomiao">
-        <iframe
-            ref="iframeRef"
-            :src="iframeSrc"
-            frameborder="0"
-            class="iframe-container-iframe"></iframe>
-    </div>
+   <div class="miao-markdown-container-miaomiaomiao">
+      <iframe
+         ref="iframeRef"
+         :src="iframeSrc"
+         frameborder="0"
+         class="iframe-container-iframe"
+      ></iframe>
+   </div>
 </template>
 
 <script setup lang="ts">
 import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
-import cloneDeep from 'lodash/cloneDeep';
+import cloneDeep from 'lodash/cloneDeep'
 import { inject, onMounted, ref } from 'vue'
-import buildFromTree from '../../hooks/buildFromTree';
+import buildFromTree from '../../hooks/buildFromTree'
 
 const root = inject('rootDirectory') as VirtualDirectory
 const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
-    required: true
+   required: true
 })
 
 const iframeSrc = ref<string>()
-const iframeRef = ref<HTMLIFrameElement>();
+const iframeRef = ref<HTMLIFrameElement>()
 
 const sendRootTree = () => {
-    iframeRef.value?.contentWindow && iframeRef.value.contentWindow.postMessage(cloneDeep(root.tree), "*");
+   iframeRef.value?.contentWindow &&
+      iframeRef.value.contentWindow.postMessage(cloneDeep(root.tree), '*')
 }
 
 const handleIframeMessage = (e: MessageEvent<any>) => {
-    e
-    // const data = e.data;
-    sendRootTree()
+   e
+   // const data = e.data;
+   sendRootTree()
 }
 onMounted(() => {
-    iframeSrc.value = currentFiles.value[0].url
-    if (typeof window.addEventListener != "undefined") {
-      window.addEventListener("message", handleIframeMessage, false);
-    }
-    console.log(buildFromTree(cloneDeep(root.tree)))
+   iframeSrc.value = currentFiles.value[0].url
+   if (typeof window.addEventListener != 'undefined') {
+      window.addEventListener('message', handleIframeMessage, false)
+   }
+   console.log(buildFromTree(cloneDeep(root.tree)))
 })
 </script>
 
 <style scoped lang="scss">
 .miao-markdown-container-miaomiaomiao {
-    width: 100%;
-    height: 100%;
-    .iframe-container-iframe {
-        width: inherit;
-        height: inherit;
-    }
+   width: 100%;
+   height: 100%;
+   .iframe-container-iframe {
+      width: inherit;
+      height: inherit;
+   }
 }
 </style>

src/plugins/miaoImages/export.ts

@@ -3,47 +3,46 @@ import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
 import { Image } from '@vicons/ionicons5'
 
 const pluginConfig: registerComponentOption = {
-    key: 'miaoImages',
-    name: '图片浏览',
-    icon: Image,
-    getComponent: async () =>
-        (await import('@/plugins/miaoImages/miaoImages.vue')).default,
-    filter: (vDirs: VirtualDirectory[], vFiles: VirtualFile[]) => {
-        if (vDirs.length === 0 && vFiles.length === 0) {
-            return false
-        }
-        if (vDirs.length) {
-            return true
-        }
-        for (let vf of vFiles)
-            for (let end of [
-                'xbm',
-                'tif',
-                'pjp',
-                'svgz',
-                'jpg',
-                'jpeg',
-                'ico',
-                'tiff',
-                'gif',
-                'svg',
-                'jfif',
-                'webp',
-                'png',
-                '.bmp',
-                'pjpeg',
-                'avif'
-            ]) {
-                if (vf.name.endsWith(end)) {
-                    return true
-                }
+   key: 'miaoImages',
+   name: '图片浏览',
+   icon: Image,
+   getComponent: async () =>
+      (await import('@/plugins/miaoImages/miaoImages.vue')).default,
+   filter: (vDirs: VirtualDirectory[], vFiles: VirtualFile[]) => {
+      if (vDirs.length === 0 && vFiles.length === 0) {
+         return false
+      }
+      if (vDirs.length) {
+         return true
+      }
+      for (let vf of vFiles)
+         for (let end of [
+            'xbm',
+            'tif',
+            'pjp',
+            'svgz',
+            'jpg',
+            'jpeg',
+            'ico',
+            'tiff',
+            'gif',
+            'svg',
+            'jfif',
+            'webp',
+            'png',
+            '.bmp',
+            'pjpeg',
+            'avif'
+         ]) {
+            if (vf.name.endsWith(end)) {
+               return true
             }
-        return false
-    }
+         }
+      return false
+   }
 }
 
 export default pluginConfig
 
-
 import { PluginExportType } from '@/types/type'
-export const type = PluginExportType.component
+export const type = PluginExportType.component

src/plugins/miaoImages/miaoImages.vue

@@ -1,62 +1,76 @@
 <template>
-    <miao-drop-handler
-        @on-virtual-directory="handleDrop"
-        @on-virtual-files="handleDrop">
-        <miao-message-provider ref="miaoMessageRef">
-            <div class="miaoImage" ref="rootRef">
-                <n-scrollbar ref="NScrollbarRef" style="max-height: 100%;">
-                    <div
-                        class="miaoImage-container"
-                        v-for="imageGroup in imageGroupList">
-                        <div class="miaoImage-container-day">
-                            <!-- <div class="miaoImage-container-divide miaoImage-container-divide-before">
+   <miao-drop-handler
+      @on-virtual-directory="handleDrop"
+      @on-virtual-files="handleDrop"
+   >
+      <miao-message-provider ref="miaoMessageRef">
+         <div
+            class="miaoImage"
+            ref="rootRef"
+         >
+            <n-scrollbar
+               ref="NScrollbarRef"
+               style="max-height: 100%"
+            >
+               <div
+                  class="miaoImage-container"
+                  v-for="imageGroup in imageGroupList"
+               >
+                  <div class="miaoImage-container-day">
+                     <!-- <div class="miaoImage-container-divide miaoImage-container-divide-before">
                             <div class="miaoImage-container-divide-line"></div>
                         </div> -->
-                            <span class="miaoImage-container-day-text">
-                                {{ imageGroup.day }}
-                            </span>
-                            <!-- <div class="miaoImage-container-divide">
+                     <span class="miaoImage-container-day-text">
+                        {{ imageGroup.day }}
+                     </span>
+                     <!-- <div class="miaoImage-container-divide">
                             <div class="miaoImage-container-divide-line"></div>
                         </div> -->
-                        </div>
-                        <div
-                            class="miaoImage-container-row"
-                            v-for="vFile in imageGroup.items"
-                            :key="vFile.id">
-                            <img
-                                :src="vFile.url"
-                                class="miaoImage-container-row-image"
-                                loading="lazy"
-                                :class="
-                                    activeImage === vFile
-                                        ? 'miaoImage-container-row-image-active'
-                                        : ''
-                                "
-                                @click="activeImage = vFile" />
-                        </div>
-                    </div>
-                </n-scrollbar>
-                <miao-mask
-                    :show="activeImage !== undefined"
-                    @click="activeImage = undefined"
-                    class="miaoImage-mask"
-                    @wheel="handleWheel">
-                    <ChevronBack
-                        class="miaoImage-mask-btn miaoImage-mask-btn-back"
-                        @click="handleActiveImageBack" />
-                    <img
-                        :src="activeImage?.url"
-                        class="miaoImage-mask-active"
-                        @click="(e) => e.stopPropagation()"
-                        draggable="false"
-                        :style="{transform: `scale(${imgViewScale})`}" />
-                    <ChevronForward
-                        class="miaoImage-mask-btn miaoImage-mask-btn-forward"
-                        @click="handleActiveImageForward" />
-                </miao-mask>
-            </div>
-        </miao-message-provider>
-    </miao-drop-handler>
+                  </div>
+                  <div
+                     class="miaoImage-container-row"
+                     v-for="vFile in imageGroup.items"
+                     :key="vFile.id"
+                  >
+                     <img
+                        :src="vFile.url"
+                        class="miaoImage-container-row-image"
+                        loading="lazy"
+                        :class="
+                           activeImage === vFile
+                              ? 'miaoImage-container-row-image-active'
+                              : ''
+                        "
+                        @click="activeImage = vFile"
+                     />
+                  </div>
+               </div>
+            </n-scrollbar>
+            <miao-mask
+               :show="activeImage !== undefined"
+               @click="activeImage = undefined"
+               class="miaoImage-mask"
+               @wheel="handleWheel"
+            >
+               <ChevronBack
+                  class="miaoImage-mask-btn miaoImage-mask-btn-back"
+                  @click="handleActiveImageBack"
+               />
+               <img
+                  :src="activeImage?.url"
+                  class="miaoImage-mask-active"
+                  @click="(e) => e.stopPropagation()"
+                  draggable="false"
+                  :style="{ transform: `scale(${imgViewScale})` }"
+               />
+               <ChevronForward
+                  class="miaoImage-mask-btn miaoImage-mask-btn-forward"
+                  @click="handleActiveImageForward"
+               />
+            </miao-mask>
+         </div>
+      </miao-message-provider>
+   </miao-drop-handler>
 </template>
 
 <script setup lang="ts">
@@ -70,32 +84,32 @@ import { NScrollbar } from 'naive-ui'
 import { ChevronBack, ChevronForward } from '@vicons/ionicons5'
 
 const imageSuffixList = [
-    'xbm',
-    'tif',
-    'pjp',
-    'svgz',
-    'jpg',
-    'jpeg',
-    'ico',
-    'tiff',
-    'gif',
-    'svg',
-    'jfif',
-    'webp',
-    'png',
-    'bmp',
-    'pjpeg',
-    'avif'
+   'xbm',
+   'tif',
+   'pjp',
+   'svgz',
+   'jpg',
+   'jpeg',
+   'ico',
+   'tiff',
+   'gif',
+   'svg',
+   'jfif',
+   'webp',
+   'png',
+   'bmp',
+   'pjpeg',
+   'avif'
 ]
 
 const currentDirectories = defineModel<VirtualDirectory[]>(
-    'currentDirectories',
-    {
-        required: true
-    }
+   'currentDirectories',
+   {
+      required: true
+   }
 )
 const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
-    required: true
+   required: true
 })
 
 const NScrollbarRef = ref()
@@ -106,263 +120,258 @@ const imageFileList = ref<VirtualFile[]>([])
 const activeImage = ref<VirtualFile>()
 
 const imageGroupList = computed(() => {
-    return groupByDay(imageFileList.value)
+   return groupByDay(imageFileList.value)
 })
 
 watch(activeImage, () => {
-    nextTick(scrollToActiveImage)
-    imgViewScale.value = 1
+   nextTick(scrollToActiveImage)
+   imgViewScale.value = 1
 })
 
 const groupByDay = (array: VirtualFile[]) => {
-    const result = []
-    let currentDay = null
-    let currentGroup: VirtualFile[] = []
+   const result = []
+   let currentDay = null
+   let currentGroup: VirtualFile[] = []
 
-    for (const item of array) {
-        const date = new Date(item.stats.mtimeMs)
-        const day = `${date.getFullYear()}年 ${String(
-            date.getMonth() + 1
-        ).padStart(2, '0')}月 ${String(date.getDate()).padStart(2, '0')}日`
+   for (const item of array) {
+      const date = new Date(item.stats.mtimeMs)
+      const day = `${date.getFullYear()}年 ${String(
+         date.getMonth() + 1
+      ).padStart(2, '0')}月 ${String(date.getDate()).padStart(2, '0')}日`
 
-        if (day !== currentDay) {
-            if (currentGroup.length > 0) {
-                result.push({
-                    day: currentDay,
-                    items: currentGroup
-                })
-            }
-            currentDay = day
-            currentGroup = [item]
-        } else {
-            currentGroup.push(item)
-        }
-    }
-    if (currentGroup.length > 0) {
-        result.push({
-            day: currentDay,
-            items: currentGroup
-        })
-    }
+      if (day !== currentDay) {
+         if (currentGroup.length > 0) {
+            result.push({
+               day: currentDay,
+               items: currentGroup
+            })
+         }
+         currentDay = day
+         currentGroup = [item]
+      } else {
+         currentGroup.push(item)
+      }
+   }
+   if (currentGroup.length > 0) {
+      result.push({
+         day: currentDay,
+         items: currentGroup
+      })
+   }
 
-    return result
+   return result
 }
 
 const scrollToActiveImage = () => {
-    const dom = rootRef.value?.querySelector(
-        '.miaoImage-container-row-image-active'
-    )
-    dom && NScrollbarRef.value.scrollTo({
-        top: dom.offsetTop - 30,
-        behavior: 'smooth'
-    })
+   const dom = rootRef.value?.querySelector(
+      '.miaoImage-container-row-image-active'
+   )
+   dom &&
+      NScrollbarRef.value.scrollTo({
+         top: dom.offsetTop - 30,
+         behavior: 'smooth'
+      })
 }
 
 const handleActiveImageBack = (e: any) => {
-    e.stopPropagation()
-    if (!activeImage.value) {
-        return
-    }
-    const index = imageFileList.value.indexOf(activeImage.value)
-    activeImage.value =
-        imageFileList.value[
-            (index - 1 + imageFileList.value.length) %
-                imageFileList.value.length
-        ]
+   e.stopPropagation()
+   if (!activeImage.value) {
+      return
+   }
+   const index = imageFileList.value.indexOf(activeImage.value)
+   activeImage.value =
+      imageFileList.value[
+         (index - 1 + imageFileList.value.length) % imageFileList.value.length
+      ]
 }
 
 const handleActiveImageForward = (e: any) => {
-    e.stopPropagation()
-    if (!activeImage.value) {
-        return
-    }
-    const index = imageFileList.value.indexOf(activeImage.value)
-    activeImage.value =
-        imageFileList.value[
-            (index + 1 + imageFileList.value.length) %
-                imageFileList.value.length
-        ]
+   e.stopPropagation()
+   if (!activeImage.value) {
+      return
+   }
+   const index = imageFileList.value.indexOf(activeImage.value)
+   activeImage.value =
+      imageFileList.value[
+         (index + 1 + imageFileList.value.length) % imageFileList.value.length
+      ]
 }
 
 const handleDrop = async (vItems: (VirtualFile | VirtualDirectory)[]) => {
-    const length_before = imageFileList.value.length
-    if (vItems[0].type === 'directory') {
-        // @ts-ignore
-        currentDirectories.value = [...currentDirectories.value, ...vItems]
-        for (const i of vItems) {
-            // @ts-ignore
-            await updateImageSrcList(i)
-        }
-    } else {
-        // @ts-ignore
-        currentFiles.value = [...currentFiles, ...vItems]
-        // @ts-ignore
-        await updateImageSrcList(vItems)
-    }
-    miaoMessageRef.value?.alertTip(
-        length_before === imageFileList.value.length
-            ? '未发现任何可添加图片'
-            : `导入${imageFileList.value.length - length_before}张图片`,
-        {
-            type:
-                length_before === imageFileList.value.length
-                    ? 'info'
-                    : 'success',
-            timeout: 5000
-        }
-    )
+   const length_before = imageFileList.value.length
+   if (vItems[0].type === 'directory') {
+      // @ts-ignore
+      currentDirectories.value = [...currentDirectories.value, ...vItems]
+      for (const i of vItems) {
+         // @ts-ignore
+         await updateImageSrcList(i)
+      }
+   } else {
+      // @ts-ignore
+      currentFiles.value = [...currentFiles, ...vItems]
+      // @ts-ignore
+      await updateImageSrcList(vItems)
+   }
+   miaoMessageRef.value?.alertTip(
+      length_before === imageFileList.value.length
+         ? '未发现任何可添加图片'
+         : `导入${imageFileList.value.length - length_before}张图片`,
+      {
+         type:
+            length_before === imageFileList.value.length ? 'info' : 'success',
+         timeout: 5000
+      }
+   )
 }
 
 const updateImageSrcList = async (source: VirtualFile[] | VirtualDirectory) => {
-    let newFileList: VirtualFile[]
-    if ('type' in source) {
-        await source.update()
-        newFileList = [
-            ...(source.files?.filter((v) =>
-                imageSuffixList.includes(v.name.split('.').pop() ?? '')
-            ) ?? [])
-        ]
-    } else {
-        newFileList = [
-            ...(source.filter((v) =>
-                imageSuffixList.includes(v.name.split('.').pop() ?? '')
-            ) ?? [])
-        ]
-    }
-    imageFileList.value = uniq([...imageFileList.value, ...newFileList]).sort(
-        (a, b) => -a.stats.mtimeMs + b.stats.mtimeMs
-    )
+   let newFileList: VirtualFile[]
+   if ('type' in source) {
+      await source.update()
+      newFileList = [
+         ...(source.files?.filter((v) =>
+            imageSuffixList.includes(v.name.split('.').pop() ?? '')
+         ) ?? [])
+      ]
+   } else {
+      newFileList = [
+         ...(source.filter((v) =>
+            imageSuffixList.includes(v.name.split('.').pop() ?? '')
+         ) ?? [])
+      ]
+   }
+   imageFileList.value = uniq([...imageFileList.value, ...newFileList]).sort(
+      (a, b) => -a.stats.mtimeMs + b.stats.mtimeMs
+   )
 }
 
 const handleWheel = (e: WheelEvent) => {
-    if (e.deltaY < 0) {
-        imgViewScale.value *= 1.42857
-    } else {
-        imgViewScale.value /= 1.42857
-    }
+   if (e.deltaY < 0) {
+      imgViewScale.value *= 1.42857
+   } else {
+      imgViewScale.value /= 1.42857
+   }
 }
 
 onMounted(async () => {
-    const length_before = imageFileList.value.length
-    for (const i of [currentFiles.value, ...currentDirectories.value]) {
-        await updateImageSrcList(i)
-    }
-    miaoMessageRef.value?.alertTip(
-        length_before === imageFileList.value.length
-            ? '未发现任何新增图片'
-            : `导入${imageFileList.value.length - length_before}张图片`,
-        {
-            type:
-                length_before === imageFileList.value.length
-                    ? 'info'
-                    : 'success',
-            timeout: 5000
-        }
-    )
+   const length_before = imageFileList.value.length
+   for (const i of [currentFiles.value, ...currentDirectories.value]) {
+      await updateImageSrcList(i)
+   }
+   miaoMessageRef.value?.alertTip(
+      length_before === imageFileList.value.length
+         ? '未发现任何新增图片'
+         : `导入${imageFileList.value.length - length_before}张图片`,
+      {
+         type:
+            length_before === imageFileList.value.length ? 'info' : 'success',
+         timeout: 5000
+      }
+   )
 })
 </script>
 
 <style scoped lang="scss">
 .miaoImage {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
+   width: 100%;
+   height: 100%;
+   position: relative;
+   display: flex;
+   flex-wrap: wrap;
+   gap: 10px;
 
-    .miaoImage-container {
-        width: 100%;
-        display: flex;
-        flex-wrap: wrap;
-        margin-bottom: 20px;
-        margin-top: 20px;
+   .miaoImage-container {
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      margin-bottom: 20px;
+      margin-top: 20px;
 
-        .miaoImage-container-day {
-            width: 100%;
-            display: flex;
-            align-items: center;
+      .miaoImage-container-day {
+         width: 100%;
+         display: flex;
+         align-items: center;
+         position: relative;
+         margin: 0 20px;
+
+         .miaoImage-container-divide {
+            flex: 1;
+            height: 100%;
             position: relative;
-            margin: 0 20px;
-
-            .miaoImage-container-divide {
-                flex: 1;
-                height: 100%;
-                position: relative;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-            }
-
-            .miaoImage-container-divide-line {
-                height: 3px;
-                width: 100%;
-                border-radius: 5px;
-                background-color: rgb(244 244 244);
-            }
-
-            .miaoImage-container-divide-before {
-                flex: 0.1;
-            }
-
-            .miaoImage-container-day-text {
-                margin: 0 0 0 10px;
-                font-size: 15px;
-                user-select: none;
-            }
-        }
-
-        .miaoImage-container-row {
             display: flex;
             justify-content: center;
             align-items: center;
-            width: 25%;
+         }
+
+         .miaoImage-container-divide-line {
+            height: 3px;
+            width: 100%;
+            border-radius: 5px;
+            background-color: rgb(244 244 244);
+         }
+
+         .miaoImage-container-divide-before {
+            flex: 0.1;
+         }
+
+         .miaoImage-container-day-text {
+            margin: 0 0 0 10px;
+            font-size: 15px;
+            user-select: none;
+         }
+      }
+
+      .miaoImage-container-row {
+         display: flex;
+         justify-content: center;
+         align-items: center;
+         width: 25%;
+         aspect-ratio: 1;
+
+         .miaoImage-container-row-image {
+            width: 80%;
             aspect-ratio: 1;
+            object-fit: cover;
+            transition: width 0.25s;
+            box-shadow: 0 0 10px -5px;
+            cursor: pointer;
+            user-select: none;
 
-            .miaoImage-container-row-image {
-                width: 80%;
-                aspect-ratio: 1;
-                object-fit: cover;
-                transition: width 0.25s;
-                box-shadow: 0 0 10px -5px;
-                cursor: pointer;
-                user-select: none;
-
-                &:hover {
-                    width: 90%;
-                }
-
-                &-active {
-                    width: 90%;
-                }
+            &:hover {
+               width: 90%;
             }
-        }
-    }
 
-    .miaoImage-mask {
-        background-color: rgba(0, 0, 0, 0.444);
-        overflow: hidden;
-    }
+            &-active {
+               width: 90%;
+            }
+         }
+      }
+   }
 
-    .miaoImage-mask-active {
-        max-width: 80%;
-        max-height: 80%;
-        user-select: none;
-    }
+   .miaoImage-mask {
+      background-color: rgba(0, 0, 0, 0.444);
+      overflow: hidden;
+   }
 
-    .miaoImage-mask-btn {
-        color: #ffffff99;
-        width: 7%;
-        position: absolute;
-        cursor: pointer;
+   .miaoImage-mask-active {
+      max-width: 80%;
+      max-height: 80%;
+      user-select: none;
+   }
 
-        &-back {
-            left: 1%;
-        }
+   .miaoImage-mask-btn {
+      color: #ffffff99;
+      width: 7%;
+      position: absolute;
+      cursor: pointer;
 
-        &-forward {
-            right: 1%;
-        }
-    }
+      &-back {
+         left: 1%;
+      }
+
+      &-forward {
+         right: 1%;
+      }
+   }
 }
 </style>

src/plugins/miaoMarkdown/export.ts

@@ -2,24 +2,23 @@ import { registerComponentOption } from '@/class/PluginCenter'
 import DocumentText from '@vicons/ionicons5/es/DocumentText'
 
 const pluginConfig: registerComponentOption = {
-    key: 'miaoMarkdown',
-    name: 'markdown浏览',
-    icon: DocumentText,
-    getComponent: async () =>
-        (await import('@/plugins/miaoMarkdown/miaoMarkdown.vue')).default,
-    filter: (vDirs, vFiles) => {
-        if (vDirs.length !== 0) {
-            return false
-        }
-        if (vFiles.length !== 1) {
-            return false
-        }
-        return vFiles[0].name.endsWith('md')
-    }
+   key: 'miaoMarkdown',
+   name: 'markdown浏览',
+   icon: DocumentText,
+   getComponent: async () =>
+      (await import('@/plugins/miaoMarkdown/miaoMarkdown.vue')).default,
+   filter: (vDirs, vFiles) => {
+      if (vDirs.length !== 0) {
+         return false
+      }
+      if (vFiles.length !== 1) {
+         return false
+      }
+      return vFiles[0].name.endsWith('md')
+   }
 }
 
 export default pluginConfig
 
-
 import { PluginExportType } from '@/types/type'
-export const type = PluginExportType.component
+export const type = PluginExportType.component

src/plugins/miaoMarkdown/miaoMarkdown.vue

@@ -1,24 +1,26 @@
 <template>
-  <n-scrollbar>
-    <div class="miao-markdown-container-miaomiaomiao" v-html="renderedMarkdown"></div>
-    <div style="height: 50px; width: 100%;"></div>
-  </n-scrollbar>
+   <n-scrollbar>
+      <div
+         class="miao-markdown-container-miaomiaomiao"
+         v-html="renderedMarkdown"
+      ></div>
+      <div style="height: 50px; width: 100%"></div>
+   </n-scrollbar>
 </template>
 
 <script setup lang="ts">
-import { NScrollbar } from 'naive-ui';
+import { NScrollbar } from 'naive-ui'
 import { VirtualFile } from '@/class/VirtualDirectory'
 import { onMounted, ref } from 'vue'
 import MarkdownIt from 'markdown-it'
-import useMiaoFetchApi from '@/hooks/useMiaoFetchApi';
+import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
 
-
-    const decoder = new TextDecoder('utf-8');
+const decoder = new TextDecoder('utf-8')
 
 const miaoFetchApi = useMiaoFetchApi()
 
 const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
-  required: true
+   required: true
 })
 
 const markdownSrc = ref<string>()
@@ -27,41 +29,43 @@ const renderedMarkdown = ref<string>('')
 const md = new MarkdownIt()
 
 onMounted(async () => {
-  markdownSrc.value = currentFiles.value[0].url
-  const text = decoder.decode(await(miaoFetchApi.getFile(currentFiles.value[0])).response)
-  renderedMarkdown.value = md.render(text)
+   markdownSrc.value = currentFiles.value[0].url
+   const text = decoder.decode(
+      await miaoFetchApi.getFile(currentFiles.value[0]).response
+   )
+   renderedMarkdown.value = md.render(text)
 })
 </script>
 
 <style lang="scss">
 .miao-markdown-container-miaomiaomiao {
-  width: 95%;
-  margin: 20px;
+   width: 95%;
+   margin: 20px;
 
-  table,
-  td,
-  th {
-    border: 1px solid #ddd;
-    text-align: left;
-  }
+   table,
+   td,
+   th {
+      border: 1px solid #ddd;
+      text-align: left;
+   }
 
-  table {
-    border-collapse: collapse;
-    margin-bottom: 20px;
-  }
+   table {
+      border-collapse: collapse;
+      margin-bottom: 20px;
+   }
 
-  th,
-  td {
-    padding: 15px;
-  }
+   th,
+   td {
+      padding: 15px;
+   }
 
-  tr:nth-child(even) {
-    background-color: #f2f2f2
-  }
+   tr:nth-child(even) {
+      background-color: #f2f2f2;
+   }
 
-  th {
-    background-color: #04AA6D;
-    color: white;
-  }
+   th {
+      background-color: #04aa6d;
+      color: white;
+   }
 }
-</style>
+</style>

src/plugins/miaoMusicPlayer/export.ts

@@ -1,36 +1,36 @@
-import { registerComponentOption } from "@/class/PluginCenter";
-import { PluginExportType } from "@/types/type";
-import Disc from "@vicons/ionicons5/es/Disc";
+import { registerComponentOption } from '@/class/PluginCenter'
+import { PluginExportType } from '@/types/type'
+import Disc from '@vicons/ionicons5/es/Disc'
 
 const pluginConfig: registerComponentOption = {
-	key: "miaoMusicPlayer",
-	name: "音乐",
-	icon: Disc,
-	getComponent: async () => (await import("./miaoMusicPlayer.vue")).default,
-	filter: (vDirs, vFiles) => {
-		if (vDirs.length === 0 && vFiles.length === 0) {
-			return true;
-		}
-		if (vDirs.length !== 0) {
-			return false;
-		}
-		if (vFiles.length === 0) {
-			return false;
-		}
-		for (let i of vFiles) {
-			for (let s of ["mp3", "flac", "ogg", "mp4"]) {
-				if (i.name.endsWith(s)) {
-					return true;
-				}
-			}
-		}
-		return false;
-	},
-	disable: false,
-	single: true,
-	priority: 5
-};
+   key: 'miaoMusicPlayer',
+   name: '音乐',
+   icon: Disc,
+   getComponent: async () => (await import('./miaoMusicPlayer.vue')).default,
+   filter: (vDirs, vFiles) => {
+      if (vDirs.length === 0 && vFiles.length === 0) {
+         return true
+      }
+      if (vDirs.length !== 0) {
+         return false
+      }
+      if (vFiles.length === 0) {
+         return false
+      }
+      for (let i of vFiles) {
+         for (let s of ['mp3', 'flac', 'ogg', 'mp4']) {
+            if (i.name.endsWith(s)) {
+               return true
+            }
+         }
+      }
+      return false
+   },
+   disable: false,
+   single: true,
+   priority: 5
+}
 
-export default pluginConfig;
+export default pluginConfig
 
-export const type = PluginExportType.component;
+export const type = PluginExportType.component

src/plugins/miaoMusicPlayer/export_mainMenu.ts

@@ -1,26 +1,26 @@
-import { Plugin, PluginGroup } from "@/class/PluginCenter";
-import { PluginExportType } from "@/types/type";
-import { shallowRef } from "vue";
-import Disc from "@vicons/ionicons5/es/Disc";
+import { Plugin, PluginGroup } from '@/class/PluginCenter'
+import { PluginExportType } from '@/types/type'
+import { shallowRef } from 'vue'
+import Disc from '@vicons/ionicons5/es/Disc'
 
 const pluginConfig: Plugin = {
-	name: "音乐",
-	icon: shallowRef(Disc),
-	filter: (_, __, views) => {
-		return views.find("miaoMusicPlayer").length === 0;
-	},
-	disable: false,
-	group: [PluginGroup.mainMenu],
-	func(_, __, hooks) {
-		const { getPluginCenter } = hooks;
-		const PluginCenter = getPluginCenter();
-		PluginCenter.usePlugin("miaoMusicPlayer", [], []);
-	},
-	priority: -1
-};
+   name: '音乐',
+   icon: shallowRef(Disc),
+   filter: (_, __, views) => {
+      return views.find('miaoMusicPlayer').length === 0
+   },
+   disable: false,
+   group: [PluginGroup.mainMenu],
+   func(_, __, hooks) {
+      const { getPluginCenter } = hooks
+      const PluginCenter = getPluginCenter()
+      PluginCenter.usePlugin('miaoMusicPlayer', [], [])
+   },
+   priority: -1
+}
 
-export default pluginConfig;
+export default pluginConfig
 
-export const type = PluginExportType.default;
+export const type = PluginExportType.default
 
-export const key = "musicPlayer-mainMenu";
+export const key = 'musicPlayer-mainMenu'

src/plugins/miaoMusicPlayer/hooks/aplayerMiao.ts

@@ -1,49 +1,51 @@
-import { createApp, Reactive } from "vue";
-import aplayerListNew from "../src/components/aplayerListNew.vue";
-import apType, { audioType } from "../types/ap";
+import { createApp, Reactive } from 'vue'
+import aplayerListNew from '../src/components/aplayerListNew.vue'
+import apType, { audioType } from '../types/ap'
 
 export type aplayerMiaoOption = {
-    onDragItemStart?: () => void
-    onDragItemEnd?: () => void
-    onPlayVideo?: (element: audioType) => void
-		onSaveCollection?: (audios: audioType[]) => void
+   onDragItemStart?: () => void
+   onDragItemEnd?: () => void
+   onPlayVideo?: (element: audioType) => void
+   onSaveCollection?: (audios: audioType[]) => void
 }
 
 /**
  * 对aplayer进行一些自定义的风格优化
  */
 const useAplayerMiao = (ap: Reactive<apType>, options?: aplayerMiaoOption) => {
-	const container = ap.container as HTMLDivElement;
+   const container = ap.container as HTMLDivElement
 
-	// 隐藏旧版歌单
-	const old_listDom = container.querySelector(".aplayer-list") as HTMLDivElement;
-	old_listDom.style.display = "none";
+   // 隐藏旧版歌单
+   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;
+   // 新版歌单
+   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");
-	});
+   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, ...(options ?? {}) });
-	app.mount(new_list_dom);
+   container.appendChild(new_list_dom)
+   const app = createApp(aplayerListNew, { ap, ...(options ?? {}) })
+   app.mount(new_list_dom)
 
-	ap.on("destroy", () => {
-		app.unmount();
-	});
-	return app;
-};
+   ap.on('destroy', () => {
+      app.unmount()
+   })
+   return app
+}
 
-export default useAplayerMiao;
+export default useAplayerMiao

src/plugins/miaoMusicPlayer/miaoMusicPlayer.vue

@@ -1,29 +1,44 @@
 <template>
-    <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"
-                    @new-collection="saveCurrPlayList"></miao-music-main>
-                <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>
-            </div>
-        </miao-alert-tip-provider>
-    </miao-drop-handler>
+   <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"
+               @new-collection="saveCurrPlayList"
+            ></miao-music-main>
+            <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>
+         </div>
+      </miao-alert-tip-provider>
+   </miao-drop-handler>
 </template>
 
 <script setup lang="ts">
 import useAplayerMiao from './hooks/aplayerMiao'
 import { VirtualFile } from '@/class/VirtualDirectory'
 import {
-    App,
-    onBeforeMount,
-    onMounted,
-    onUnmounted,
-    reactive,
-    ref,
-    toRaw,
-    watch
+   App,
+   onBeforeMount,
+   onMounted,
+   onUnmounted,
+   reactive,
+   ref,
+   toRaw,
+   watch
 } from 'vue'
 import './src/APlayer.fix.css'
 // @ts-ignore
@@ -53,167 +68,180 @@ const isAPlayerListShow = ref(true)
 const isSavingCollection = ref(false)
 
 const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
-    required: true
+   required: true
 })
 
 const props = defineProps<{
-    view: VirtualPage
+   view: VirtualPage
 }>()
 
 const data = ref<collectionType[]>()
 
 watch(
-    data,
-    (_v, oldV) => {
-        updateLocalData(oldV !== undefined)
-    },
-    {
-        deep: true
-    }
+   data,
+   (_v, oldV) => {
+      updateLocalData(oldV !== undefined)
+   },
+   {
+      deep: true
+   }
 )
 
 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?.value?.list.add(getMusicList(diff))
-        }
-    }
+   () => 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?.value?.list.add(getMusicList(diff))
+      }
+   }
 )
 
 const getMusicList = (mp3VFiles: VirtualFile[]) =>
-    mp3VFiles.map((v, index) => ({
-        url: `${config.baseUrl}${v.url}`,
-        name: v.name,
-        artist: ' ',
-        index
-    }))
+   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 saveCurrPlayList = () => {
-    if (ap.value) {
-        data.value?.unshift({
-            id: Math.random(),
-            name: `新建歌单-${new Date()}`,
-            intro: 'none',
-            createTime: new Date(),
-            coverUrl: '',
-            audios: cloneDeep(ap.value.list.audios).map((v, i) => ({ ...v, index: i }))
-        })
-        miaoMessageRef.value?.alertTip('已创建新的歌单', {
-            timeout: 1000,
-            type: 'success'
-        })
-    }
+   if (ap.value) {
+      data.value?.unshift({
+         id: Math.random(),
+         name: `新建歌单-${new Date()}`,
+         intro: 'none',
+         createTime: new Date(),
+         coverUrl: '',
+         audios: cloneDeep(ap.value.list.audios).map((v, i) => ({
+            ...v,
+            index: i
+         }))
+      })
+      miaoMessageRef.value?.alertTip('已创建新的歌单', {
+         timeout: 1000,
+         type: 'success'
+      })
+   }
 }
 
 const initAPlayerMiao = () => {
-    const aplayerOption = {
-        container: aplayer.value,
-        audio: getMusicList(currentFiles.value),
-        autoplay: true,
-        volume: 1,
-        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
-                ]
-            )
-        },
-        onSaveCollection: saveCurrPlayList
-    })
-    ap.value.on('listremove', (...args: any) => {
-        const { index } = args[0] as { index: number }
-        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
-    })
+   const aplayerOption = {
+      container: aplayer.value,
+      audio: getMusicList(currentFiles.value),
+      autoplay: true,
+      volume: 1,
+      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
+            ]
+         )
+      },
+      onSaveCollection: saveCurrPlayList
+   })
+   ap.value.on('listremove', (...args: any) => {
+      const { index } = args[0] as { index: number }
+      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
+   })
 }
 
-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 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 () => {
-    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))
+   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()
+   await getLocalData()
 })
 onMounted(async () => {
-    currentFiles.value = [...currentFiles.value.reverse()]
-    initAPlayerMiao()
+   currentFiles.value = [...currentFiles.value.reverse()]
+   initAPlayerMiao()
 })
 
 onUnmounted(() => {
-    vueApp.unmount()
-    ap?.value?.destroy()
+   vueApp.unmount()
+   ap?.value?.destroy()
 })
 </script>
 
 <style scoped lang="scss">
 .miaoMusic-container {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    background-color: #ffffff;
+   position: relative;
+   width: 100%;
+   height: 100%;
+   display: flex;
+   flex-direction: column;
+   background-color: #ffffff;
 }
 </style>
 <style lang="scss">
 .aplayer {
-    display: flex;
-    flex-direction: column-reverse;
-    position: absolute;
-    bottom: 10px;
-    width: -webkit-fill-available;
+   display: flex;
+   flex-direction: column-reverse;
+   position: absolute;
+   bottom: 10px;
+   width: -webkit-fill-available;
 
-    .aplayer-icon-order,
-    .aplayer-icon-loop {
-        display: none !important;
-    }
+   .aplayer-icon-order,
+   .aplayer-icon-loop {
+      display: none !important;
+   }
 }
 </style>

src/plugins/miaoMusicPlayer/src/collectionInfo.vue

@@ -1,101 +1,139 @@
 <template>
-    <div class="collection-info-container">
-        <div class="collection-info-container-top">
-            <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>
-            </div>
+   <div class="collection-info-container">
+      <div class="collection-info-container-top">
+         <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>
+         </div>
 
-            <div class="collection-info-container-top-delete" v-if="isEditing" @click="
-                clickDeleteCount !== 2
-                    ? clickDeleteCount++
-                    : emit('deleteSelf')
-                ">
-                <TrashOutline></TrashOutline>
-                <span>
-                    {{
-                        clickDeleteCount === 0
-                            ? `删除`
-                            : clickDeleteCount === 1
-                                ? '确认删除'
-                                : '再次确认'
-                    }}
-                </span>
+         <div
+            class="collection-info-container-top-delete"
+            v-if="isEditing"
+            @click="
+               clickDeleteCount !== 2 ? clickDeleteCount++ : emit('deleteSelf')
+            "
+         >
+            <TrashOutline></TrashOutline>
+            <span>
+               {{
+                  clickDeleteCount === 0
+                     ? `删除`
+                     : clickDeleteCount === 1
+                       ? '确认删除'
+                       : '再次确认'
+               }}
+            </span>
+         </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-icon">
+               <CaretForwardOutline></CaretForwardOutline>
             </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-icon">
-                    <CaretForwardOutline></CaretForwardOutline>
-                </div>
-                <div class="collection-info-container-controller-play-text">
-                    {{ `全部播放` }}
-                </div>
+            <div class="collection-info-container-controller-play-text">
+               {{ `全部播放` }}
             </div>
-            <div class="collection-info-container-controller-right">
-                <div class="collection-info-container-controller-edit" @click="isEditing = !isEditing">
-                    <component :is="isEditing ? CheckmarkOutline : CreateOutline
-                        "></component>
-                </div>
+         </div>
+         <div class="collection-info-container-controller-right">
+            <div
+               class="collection-info-container-controller-edit"
+               @click="isEditing = !isEditing"
+            >
+               <component
+                  :is="isEditing ? CheckmarkOutline : CreateOutline"
+               ></component>
             </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"
-                    @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">
-                                <NEllipsis :tooltip="false">
-                                    {{ audio.name }}
-                                </NEllipsis>
-                            </div>
-                            <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="
-                                    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>
-                        </div>
-                    </div>
-                </VueDraggable>
-            </div>
-        </NScrollbar>
-    </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"
+               @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"
+                     >
+                        <NEllipsis :tooltip="false">
+                           {{ audio.name }}
+                        </NEllipsis>
+                     </div>
+                     <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="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>
+                  </div>
+               </div>
+            </VueDraggable>
+         </div>
+      </NScrollbar>
+   </div>
 </template>
 
 <script setup lang="ts">
 import { NScrollbar, NEllipsis, NInput } from 'naive-ui'
 import { VueDraggable } from 'vue-draggable-plus'
 import {
-    ArrowBackOutline,
-    CaretForwardOutline,
-    ReorderFourOutline,
-    PlayOutline,
-    CreateOutline,
-    CheckmarkOutline,
-    TrashOutline
+   ArrowBackOutline,
+   CaretForwardOutline,
+   ReorderFourOutline,
+   PlayOutline,
+   CreateOutline,
+   CheckmarkOutline,
+   TrashOutline
 } from '@vicons/ionicons5'
 import collectionType from '../types/collection'
 import { ref, watch } from 'vue'
 
 const props = defineProps<{
-    collection: collectionType
+   collection: collectionType
 }>()
 
 const isEditing = ref(false)
@@ -104,17 +142,20 @@ const clickDeleteCount = ref(0)
 watch(isEditing, (v) => v && (clickDeleteCount.value = 0))
 
 const handleDelete = (index: number) => {
-    props.collection.audios.splice(index, 1)
+   props.collection.audios.splice(index, 1)
 }
 
 const updateAudiosIndex = () => {
-    props.collection.audios = props.collection.audios.map((v, i) => ({ ...v, index: i }))
+   props.collection.audios = props.collection.audios.map((v, i) => ({
+      ...v,
+      index: i
+   }))
 }
 
 const emit = defineEmits<{
-    exit: []
-    deleteSelf: []
-    playAll: [collection: collectionType, index?: number]
+   exit: []
+   deleteSelf: []
+   playAll: [collection: collectionType, index?: number]
 }>()
 </script>
 
@@ -122,182 +163,182 @@ const emit = defineEmits<{
 $ig: linear-gradient(90deg, #a1ee5e 0%, #00e3ae 100%);
 
 .collection-info-container {
-    width: 100%;
-    height: 100%;
-    background-color: #ffffff;
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    flex-direction: column;
+   width: 100%;
+   height: 100%;
+   background-color: #ffffff;
+   position: absolute;
+   top: 0;
+   left: 0;
+   display: flex;
+   flex-direction: column;
 
-    &-top {
-        height: 70px;
-        padding: 0 15px;
-        background: $ig;
-        display: flex;
-        align-items: center;
+   &-top {
+      height: 70px;
+      padding: 0 15px;
+      background: $ig;
+      display: flex;
+      align-items: center;
 
-        &-exit {
-            width: 30px;
+      &-exit {
+         width: 30px;
+         aspect-ratio: 1;
+         color: #063b2a;
+         display: flex;
+         justify-content: center;
+         align-items: center;
+         cursor: pointer;
+
+         svg {
+            width: 25px;
             aspect-ratio: 1;
-            color: #063b2a;
+            transition: width 0.25s ease;
+         }
+
+         &:hover {
+            svg {
+               width: 30px;
+            }
+         }
+      }
+
+      &-title {
+         display: flex;
+         margin-left: 10px;
+         margin-right: 100px;
+         flex: 1;
+
+         &-confirm {
+            margin-left: 10px;
+            width: 32px;
+            // color: #ffffff;
+         }
+
+         span {
+            user-select: none;
+            font-size: larger;
+         }
+      }
+
+      &-delete {
+         display: flex;
+         height: 25px;
+         position: absolute;
+         right: 28px;
+         color: red;
+         user-select: none;
+         cursor: pointer;
+
+         & > span {
+            position: relative;
+            top: 3px;
+            margin-left: 3px;
+         }
+      }
+   }
+
+   &-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;
+            background: $ig;
+            border-radius: 10px;
             display: flex;
             justify-content: center;
             align-items: center;
-            cursor: pointer;
 
             svg {
-                width: 25px;
-                aspect-ratio: 1;
-                transition: width 0.25s ease;
+               width: 30px;
+               height: 25px;
+               color: aliceblue;
             }
+         }
 
-            &:hover {
-                svg {
-                    width: 30px;
-                }
-            }
-        }
-
-        &-title {
-            display: flex;
-            margin-left: 10px;
-            margin-right: 100px;
-            flex: 1;
-
-            &-confirm {
-                margin-left: 10px;
-                width: 32px;
-                // color: #ffffff;
-            }
-
-            span {
-                user-select: none;
-                font-size: larger;
-            }
-        }
-
-        &-delete {
-            display: flex;
-            height: 25px;
-            position: absolute;
-            right: 28px;
-            color: red;
+         &-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;
+            height: 25px;
+            width: 25px;
+            color: #002911;
+         }
+      }
+   }
 
-            &>span {
-                position: relative;
-                top: 3px;
-                margin-left: 3px;
+   &-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;
             }
-        }
-    }
+         }
 
-    &-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;
-                background: $ig;
-                border-radius: 10px;
-                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 {
+         &-info {
             flex: 1;
             display: flex;
-            align-items: center;
-            justify-content: flex-end;
+            user-select: none;
+            overflow: hidden;
 
-            &>div {
-                margin: 0 10px;
-                cursor: pointer;
-                height: 25px;
-                width: 25px;
-                color: #002911;
+            &-name {
+               overflow: hidden;
             }
-        }
-    }
+         }
 
-    &-audioList {
-        flex: 1;
-        color: #002911;
-        padding-bottom: 88px;
-
-        &-item {
-            // padding: 0 20px;
-            padding-right: 7px;
+         &-controller {
             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;
-                }
+            &-item {
+               width: 30px;
+               cursor: pointer;
+               margin: 0 5px;
             }
-
-            &-info {
-                flex: 1;
-                display: flex;
-                user-select: none;
-                overflow: hidden;
-
-                &-name {
-                    overflow: hidden;
-                }
-            }
-
-            &-controller {
-                display: flex;
-                align-items: center;
-
-                &-item {
-                    width: 30px;
-                    cursor: pointer;
-                    margin: 0 5px;
-                }
-            }
-        }
-    }
+         }
+      }
+   }
 }
 
 .isDragging {
-    opacity: 0.5;
+   opacity: 0.5;
 }
 </style>

src/plugins/miaoMusicPlayer/src/components/aplayerListNew.vue

@@ -1,123 +1,138 @@
 <template>
-    <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 }}
+   <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">
+         <AddCircleOutline
+            v-if="onSaveCollection"
+            class="aplayer-list-top-buttons-icon"
+            @click="onSaveCollection(ap.list.audios)"
+         ></AddCircleOutline>
+      </div>
+      <span></span>
+   </div>
+   <ol
+      :style="{ maxHeight: `calc( ${ap.options.listMaxHeight} - 30px )` }"
+      :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-index">{{ index + 1 }}</span>
+            <span class="aplayer-list-title">{{ element.name }}</span>
+            <div class="aplayer-list-control">
+               <div
+                  v-if="isVideo(element)"
+                  class="aplayer-list-control-btn aplayer-list-control-btn-hover aplayer-list-control-btn-play"
+                  @click.stop="onPlayVideo && onPlayVideo(element)"
+               >
+                  <VideocamOutline class="aplayer-list-control-btn-svg" />
+               </div>
+               <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>
+               <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>
-        </div>
-        <div class="aplayer-list-top-buttons">
-            <AddCircleOutline
-                v-if="onSaveCollection"
-                class="aplayer-list-top-buttons-icon"
-                @click="onSaveCollection(ap.list.audios)"></AddCircleOutline>
-        </div>
-        <span></span>
-    </div>
-    <ol
-        :style="{ maxHeight: `calc( ${ap.options.listMaxHeight} - 30px )` }"
-        :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-index">{{ index + 1 }}</span>
-                <span class="aplayer-list-title">{{ element.name }}</span>
-                <div class="aplayer-list-control">
-                    <div
-                        v-if="isVideo(element)"
-                        class="aplayer-list-control-btn aplayer-list-control-btn-hover aplayer-list-control-btn-play"
-                        @click.stop="onPlayVideo && onPlayVideo(element)">
-                        <VideocamOutline class="aplayer-list-control-btn-svg" />
-                    </div>
-                    <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>
-                    <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>
-            <!-- </miaoLazyDiv> -->
-        </VueDraggable>
-    </ol>
+         </li>
+         <!-- </miaoLazyDiv> -->
+      </VueDraggable>
+   </ol>
 </template>
 
 <script setup lang="ts">
 import { computed, nextTick, onMounted, ref } from 'vue'
 import {
-    ChevronUpOutline,
-    ChevronDownOutline,
-    CloseOutline,
-    ReorderFourOutline,
-    PlayOutline,
-    HeartOutline,
-    VideocamOutline,
-    PauseOutline,
-    ListCircleOutline,
-    ListOutline,
-    HeadsetOutline,
-    LogoOctocat,
-    AddCircleOutline
+   ChevronUpOutline,
+   ChevronDownOutline,
+   CloseOutline,
+   ReorderFourOutline,
+   PlayOutline,
+   HeartOutline,
+   VideocamOutline,
+   PauseOutline,
+   ListCircleOutline,
+   ListOutline,
+   HeadsetOutline,
+   LogoOctocat,
+   AddCircleOutline
 } from '@vicons/ionicons5'
 
 import { VueDraggable } from 'vue-draggable-plus'
@@ -127,9 +142,9 @@ import apType, { audioType } from '../../types/ap'
 import { aplayerMiaoOption } from '../../hooks/aplayerMiao'
 
 const props = defineProps<
-    {
-        ap: apType
-    } & aplayerMiaoOption
+   {
+      ap: apType
+   } & aplayerMiaoOption
 >()
 
 const apRef = ref(props.ap)
@@ -141,309 +156,309 @@ const refreshKey = ref(Math.random())
 const isDragging = ref(false)
 
 const apTheme = computed(
-    () =>
-        props.ap.list.audios[activeAudioIndex.value].theme ??
-        props.ap.options.theme
+   () =>
+      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
-    })
+   nextTick(() => {
+      isPaused.value = false
+   })
 })
 
 props.ap.on('pause', () => {
-    isPaused.value = true
+   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 = () => {
-    const top = ol.value?.scrollTop
-    refreshKey.value = Math.random()
-    nextTick(() => {
-        ol.value?.scrollTo({
-            top
-        })
-    })
+   const top = ol.value?.scrollTop
+   refreshKey.value = Math.random()
+   nextTick(() => {
+      ol.value?.scrollTo({
+         top
+      })
+   })
 }
 
 props.ap.on('listremove', refresh)
 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)
+   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)
 }
 const listRefreshIndex = (curr: audioType) => {
-    for (let index in props.ap.list.audios) {
-        if (props.ap.list.audios[index] === curr) {
-            props.ap.list.index = parseInt(index)
-            return
-        }
-    }
+   for (let index in props.ap.list.audios) {
+      if (props.ap.list.audios[index] === curr) {
+         props.ap.list.index = parseInt(index)
+         return
+      }
+   }
 }
 
 const listAudioUp = (index: number) => {
-    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)
-    } else {
-        const pre: number = (len - 1 + index) % len
-        const _pre = arr[index]
-        arr[index] = arr[pre]
-        arr[pre] = _pre
-    }
-    listRefreshIndex(curr)
+   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)
+   } else {
+      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 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)
-    } else {
-        const pre: number = (len + 1 + index) % len
-        const _pre = arr[index]
-        arr[index] = arr[pre]
-        arr[pre] = _pre
-    }
-    listRefreshIndex(curr)
+   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)
+   } else {
+      const pre: number = (len + 1 + index) % len
+      const _pre = arr[index]
+      arr[index] = arr[pre]
+      arr[pre] = _pre
+   }
+   listRefreshIndex(curr)
 }
 const listAudioRemove = (index: number) => {
-    props.ap.list.remove(index)
+   props.ap.list.remove(index)
 }
 const { onDragStart, onDragEnd } = (() => {
-    let curr: audioType
-    return {
-        onDragStart: () => {
-            isDragging.value = true
-            curr = props.ap.list.audios[props.ap.list.index]
-        },
-        onDragEnd: () => {
-            listRefreshIndex(curr)
-            nextTick(() => {
-                isDragging.value = false
-            })
-        }
-    }
+   let curr: audioType
+   return {
+      onDragStart: () => {
+         isDragging.value = true
+         curr = props.ap.list.audios[props.ap.list.index]
+      },
+      onDragEnd: () => {
+         listRefreshIndex(curr)
+         nextTick(() => {
+            isDragging.value = false
+         })
+      }
+   }
 })()
 
 const isVideo = (element: audioType) => {
-    for (let end of ['mp4']) {
-        if (element.name.endsWith(end)) {
-            return true
-        }
-    }
-    return false
+   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 }
+   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
+   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
-            }
-        }
-    }
+   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>
 
 <style lang="scss" scoped>
 .aplayer-list-new {
-    height: fit-content !important;
-    cursor: default !important;
+   height: fit-content !important;
+   cursor: default !important;
 
-    .aplayer-list-cur {
-        height: calc(100% - 8px) !important;
-    }
+   .aplayer-list-cur {
+      height: calc(100% - 8px) !important;
+   }
 
-    .aplayer-list-index {
-        display: inline-block;
-        width: 20px;
-        margin-right: 4px !important;
-        cursor: default !important;
-    }
+   .aplayer-list-index {
+      display: inline-block;
+      width: 20px;
+      margin-right: 4px !important;
+      cursor: default !important;
+   }
 }
 
 .aplayer-list-control {
-    float: right;
-    height: 32px;
-    display: flex;
-    align-items: center;
+   float: right;
+   height: 32px;
+   display: flex;
+   align-items: center;
 
-    &-btn {
-        width: 25px;
-        height: 25px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
+   &-btn {
+      width: 25px;
+      height: 25px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
 
-        &-svg {
-            width: 20px;
-            aspect-ratio: 1;
-            transition: all 0.1s ease;
-        }
-    }
+      &-svg {
+         width: 20px;
+         aspect-ratio: 1;
+         transition: all 0.1s ease;
+      }
+   }
 
-    &-btn-hover {
-        .aplayer-list-control-btn-svg {
-            &:hover {
-                width: 24px;
-            }
-        }
-    }
+   &-btn-hover {
+      .aplayer-list-control-btn-svg {
+         &:hover {
+            width: 24px;
+         }
+      }
+   }
 }
 
 .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;
-            cursor: pointer;
-        }
-        &:hover {
-            scale: 1.1;
-        }
-    }
+   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;
+         cursor: pointer;
+      }
+      &:hover {
+         scale: 1.1;
+      }
+   }
 }
 </style>
 
 <style lang="scss">
 .aplayer svg circle,
 .aplayer .aplayer-list-new svg path {
-    fill: #ffffff00;
+   fill: #ffffff00;
 }
 
 .iSDragging {
-    opacity: 0.5;
-    // background: #60e8a2 !important;
+   opacity: 0.5;
+   // background: #60e8a2 !important;
 }
 
 .aplayer-list-light {
-    background: unset !important;
+   background: unset !important;
 
-    .aplayer-list-title {
-        color: #60e8a2;
-    }
+   .aplayer-list-title {
+      color: #60e8a2;
+   }
 }
 
 .aplayer .aplayer-list .miaoMusic-ol-isDragging li:hover {
-    background: #efefef !important;
+   background: #efefef !important;
 }
 
 .miaoMusicDrag-move,
 .miaoMusicDrag-enter-active,
 .miaoMusicDrag-leave-active {
-    transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
+   transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
 }
 
 .miaoMusicDrag-enter-from,
 .miaoMusicDrag-leave-to {
-    opacity: 0;
-    transform: scaleY(0.01) translate(30px, 0);
+   opacity: 0;
+   transform: scaleY(0.01) translate(30px, 0);
 }
 
 .miaoMusicDrag-leave-active {
-    position: absolute;
+   position: absolute;
 }
 </style>

src/plugins/miaoMusicPlayer/src/components/collection.vue

@@ -1,30 +1,37 @@
 <template>
-    <div class="collection" @click="emit('onenter')">
-        <div class="collection-cover" @click.stop="emit('onPlay')">
-            <img
-                v-if="item.coverUrl"
-                class="collection-cover-img"
-                :src="item.coverUrl" />
-            <div class="collection-cover-play">
-              <Play></Play>
-            </div>
-        </div>
-        <div class="collection-info">
-            <div class="collection-info-name">
-                <span class="collection-info-name-ellipsis">
-                    <span>
-                        {{ item.name }}
-                    </span>
-                </span>
-            </div>
-            <div class="collection-info-stats">
-                <span class="collection-info-stats-time">{{ dateStr }}</span>
-                <span class="collection-info-stats-count">
-                    {{ `共${item.audios.length}首` }}
-                </span>
-            </div>
-        </div>
-    </div>
+   <div
+      class="collection"
+      @click="emit('onenter')"
+   >
+      <div
+         class="collection-cover"
+         @click.stop="emit('onPlay')"
+      >
+         <img
+            v-if="item.coverUrl"
+            class="collection-cover-img"
+            :src="item.coverUrl"
+         />
+         <div class="collection-cover-play">
+            <Play></Play>
+         </div>
+      </div>
+      <div class="collection-info">
+         <div class="collection-info-name">
+            <span class="collection-info-name-ellipsis">
+               <span>
+                  {{ item.name }}
+               </span>
+            </span>
+         </div>
+         <div class="collection-info-stats">
+            <span class="collection-info-stats-time">{{ dateStr }}</span>
+            <span class="collection-info-stats-count">
+               {{ `共${item.audios.length}首` }}
+            </span>
+         </div>
+      </div>
+   </div>
 </template>
 
 <script setup lang="ts">
@@ -34,90 +41,92 @@ import dateFormatter from '@/hooks/dateFormatter'
 import { Play } from '@vicons/ionicons5'
 
 const props = defineProps<{
-    item: collectionType
+   item: collectionType
 }>()
 
 const emit = defineEmits<{
-  onPlay: []
-  onenter: []
+   onPlay: []
+   onenter: []
 }>()
 
 const dateStr = computed(() =>
-    dateFormatter(new Date(props.item.createTime), 'yyyy-MM-dd')
+   dateFormatter(new Date(props.item.createTime), 'yyyy-MM-dd')
 )
 </script>
 
 <style lang="scss" scoped>
 .collection {
-    height: 50px;
-    position: relative;
-    display: flex;
-    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
-        0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-    border-radius: 5px;
-    overflow: hidden;
-    transition: height 0.25s ease;
-    cursor: pointer;
-    user-select: none;
+   height: 50px;
+   position: relative;
+   display: flex;
+   box-shadow:
+      0 3px 6px -4px rgba(0, 0, 0, 0.12),
+      0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 9px 28px 8px rgba(0, 0, 0, 0.05);
+   border-radius: 5px;
+   overflow: hidden;
+   transition: height 0.25s ease;
+   cursor: pointer;
+   user-select: none;
 
-    &:not(&:last-child) {
-        margin-bottom: 15px;
-    }
-    .collection-cover {
-        width: 50px;
-        height: 50px;
-        aspect-ratio: 1;
-        background-color: #60e8a2;
-        margin-right: 5px;
-        .collection-cover-play {
-            width: 25px;
+   &:not(&:last-child) {
+      margin-bottom: 15px;
+   }
+   .collection-cover {
+      width: 50px;
+      height: 50px;
+      aspect-ratio: 1;
+      background-color: #60e8a2;
+      margin-right: 5px;
+      .collection-cover-play {
+         width: 25px;
+         height: 15px;
+         background-color: #d1d1d1b2;
+         position: absolute;
+         bottom: 5px;
+         left: 5px;
+         display: flex;
+         justify-content: center;
+         align-items: center;
+         border-radius: 3px;
+         svg {
             height: 15px;
-            background-color: #d1d1d1b2;
-            position: absolute;
-            bottom: 5px;
-            left: 5px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            border-radius: 3px;
-            svg {
-              height: 15px;
-              color: #fff;
-            }
-        }
-    }
-    .collection-info {
-        position: relative;
-        width: calc(100% - 60px);
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        .collection-info-name {
-            max-width: 100%;
+            color: #fff;
+         }
+      }
+   }
+   .collection-info {
+      position: relative;
+      width: calc(100% - 60px);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      .collection-info-name {
+         max-width: 100%;
+         overflow: hidden;
+         &-ellipsis {
             overflow: hidden;
-            &-ellipsis {
-                overflow: hidden;
-                white-space: nowrap;
-                display: inline-block;
-                vertical-align: bottom;
-                max-width: 100%;
-                text-overflow: ellipsis;
-                span {
-                    white-space: nowrap;
-                    text-wrap: nowrap;
-                    text-overflow: ellipsis;
-                }
-            }
-        }
-        .collection-info-stats {
-            text-wrap: nowrap;
+            white-space: nowrap;
+            display: inline-block;
+            vertical-align: bottom;
+            max-width: 100%;
+            text-overflow: ellipsis;
             span {
-                font-size: smaller;
+               white-space: nowrap;
+               text-wrap: nowrap;
+               text-overflow: ellipsis;
             }
-            .collection-info-stats-time {
-                margin-right: 10px;
-            }
-        }
-    }
+         }
+      }
+      .collection-info-stats {
+         text-wrap: nowrap;
+         span {
+            font-size: smaller;
+         }
+         .collection-info-stats-time {
+            margin-right: 10px;
+         }
+      }
+   }
 }
 </style>

src/plugins/miaoMusicPlayer/src/main.vue

@@ -1,51 +1,56 @@
 <template>
-    <div class="miaoMusic-main">
-        <NScrollbar>
-            <div class="miaoMusic-main-collectionsList">
-                <div class="miaoMusic-main-collectionsList-title">自建歌单</div>
-                <VueDraggable
-                    v-if="collections"
-                    v-model="collections"
-                    :animation="150"
-                    :delay="100"
-                    ghostClass="iSDragging">
-                    <collection
-                        v-for="item in collections"
-                        :item="item"
-                        @on-play="handleCollectionsPlay(item)"
-                        @onenter="handleCollectionEnter(item)"></collection>
-                </VueDraggable>
-                <n-empty
-                    description="空空如也~"
-                    size="huge"
-                    style="margin-top: 200px"
-                    v-if="!data || data?.length === 0">
-                    <template #icon>
-                        <n-icon>
-                            <HandLeftOutline />
-                        </n-icon>
-                    </template>
-                    <template #extra>
-                        <n-button
-                            size="small"
-                            type="primary"
-                            @click="emit('newCollection')">
-                            立刻创建
-                        </n-button>
-                    </template>
-                </n-empty>
-            </div>
-        </NScrollbar>
-        <Transition name="slide-fade">
-            <collectionInfo
-                class="miaoMusic-main-collection"
-                :collection="currCollection"
-                v-if="currCollection"
-                @exit="handleCollectionEnter(undefined)"
-                @delete-self="handleCollectionDelete()"
-                @play-all="handleCollectionsPlay"></collectionInfo>
-        </Transition>
-    </div>
+   <div class="miaoMusic-main">
+      <NScrollbar>
+         <div class="miaoMusic-main-collectionsList">
+            <div class="miaoMusic-main-collectionsList-title">自建歌单</div>
+            <VueDraggable
+               v-if="collections"
+               v-model="collections"
+               :animation="150"
+               :delay="100"
+               ghostClass="iSDragging"
+            >
+               <collection
+                  v-for="item in collections"
+                  :item="item"
+                  @on-play="handleCollectionsPlay(item)"
+                  @onenter="handleCollectionEnter(item)"
+               ></collection>
+            </VueDraggable>
+            <n-empty
+               description="空空如也~"
+               size="huge"
+               style="margin-top: 200px"
+               v-if="!data || data?.length === 0"
+            >
+               <template #icon>
+                  <n-icon>
+                     <HandLeftOutline />
+                  </n-icon>
+               </template>
+               <template #extra>
+                  <n-button
+                     size="small"
+                     type="primary"
+                     @click="emit('newCollection')"
+                  >
+                     立刻创建
+                  </n-button>
+               </template>
+            </n-empty>
+         </div>
+      </NScrollbar>
+      <Transition name="slide-fade">
+         <collectionInfo
+            class="miaoMusic-main-collection"
+            :collection="currCollection"
+            v-if="currCollection"
+            @exit="handleCollectionEnter(undefined)"
+            @delete-self="handleCollectionDelete()"
+            @play-all="handleCollectionsPlay"
+         ></collectionInfo>
+      </Transition>
+   </div>
 </template>
 
 <script setup lang="ts">
@@ -59,75 +64,75 @@ import { NScrollbar, NEmpty, NButton } from 'naive-ui'
 import { HandLeftOutline } from '@vicons/ionicons5'
 
 const props = defineProps<{
-    ap: apType
+   ap: apType
 }>()
 
 const emit = defineEmits<{
-    newCollection: []
+   newCollection: []
 }>()
 
 const collections = defineModel<collectionType[]>('data')
 const currCollection = ref<collectionType>()
 const playCollection = (collection: collectionType, index?: number) => {
-    const ap = props.ap
-    console.log({ collection, ap })
-    // clear有bug
-    while (ap.list.audios.length !== 0) {
-        ap.list.remove(0)
-    }
-    ap.list.add(collection.audios)
-    index && ap.list.switch(index)
-    ap.play()
+   const ap = props.ap
+   console.log({ collection, ap })
+   // clear有bug
+   while (ap.list.audios.length !== 0) {
+      ap.list.remove(0)
+   }
+   ap.list.add(collection.audios)
+   index && ap.list.switch(index)
+   ap.play()
 }
 
 const handleCollectionsPlay = (item: collectionType, index?: number) => {
-    playCollection(item, index)
+   playCollection(item, index)
 }
 
 const handleCollectionEnter = (item: collectionType | undefined) => {
-    currCollection.value = item
+   currCollection.value = item
 }
 
 const handleCollectionDelete = () => {
-    collections.value &&
-        collections.value.splice(
-            collections.value.findIndex((v) => v === currCollection.value),
-            1
-        )
-    currCollection.value = undefined
+   collections.value &&
+      collections.value.splice(
+         collections.value.findIndex((v) => v === currCollection.value),
+         1
+      )
+   currCollection.value = undefined
 }
 </script>
 
 <style lang="scss" scoped>
 .miaoMusic-main {
-    position: relative;
-    max-height: 100%;
-    height: 100%;
-    .miaoMusic-main-collectionsList {
-        padding: 15px 20px 88px;
-        &-title {
-            font-size: larger;
-            letter-spacing: 1px;
-            margin-bottom: 10px;
-            user-select: none;
-        }
-    }
+   position: relative;
+   max-height: 100%;
+   height: 100%;
+   .miaoMusic-main-collectionsList {
+      padding: 15px 20px 88px;
+      &-title {
+         font-size: larger;
+         letter-spacing: 1px;
+         margin-bottom: 10px;
+         user-select: none;
+      }
+   }
 }
 .slide-fade-enter-active {
-    transition: all 0.15s ease-out;
+   transition: all 0.15s ease-out;
 }
 
 .slide-fade-leave-active {
-    transition: all 0.15s cubic-bezier(1, 0.5, 0.8, 1);
+   transition: all 0.15s cubic-bezier(1, 0.5, 0.8, 1);
 }
 
 .slide-fade-enter-from,
 .slide-fade-leave-to {
-    transform: translateX(200px);
-    opacity: 0;
+   transform: translateX(200px);
+   opacity: 0;
 }
 
 .isDragging {
-    opacity: 0.5;
+   opacity: 0.5;
 }
 </style>

src/plugins/miaoMusicPlayer/types/ap.ts

@@ -1,45 +1,45 @@
 export type audioType = {
-    url: string
-    artist?: string
-    cover?: string
-    name: string
-    theme?: string
-    id?: number
-    index: number
+   url: string
+   artist?: string
+   cover?: string
+   name: string
+   theme?: string
+   id?: number
+   index: number
 }
 
 type apType = {
-    paused: boolean
-    list: {
-        audios: audioType[]
-        index: number
-        switch: (index: number) => void
-        remove: (index: number) => void
-        add: (audios: audioType[]) => void
-        refreshAudioIndex: () => void
-        hide: () => void
-        clear: () => 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' | 'one' | 'none'
-        order: 'list' | 'random'
-        listMaxHeight: string
-        storageName: 'aplayer-setting'
-    }
-    destroy: () => {}
-    pause: () => void
-    play: () => void
+   paused: boolean
+   list: {
+      audios: audioType[]
+      index: number
+      switch: (index: number) => void
+      remove: (index: number) => void
+      add: (audios: audioType[]) => void
+      refreshAudioIndex: () => void
+      hide: () => void
+      clear: () => 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' | 'one' | 'none'
+      order: 'list' | 'random'
+      listMaxHeight: string
+      storageName: 'aplayer-setting'
+   }
+   destroy: () => {}
+   pause: () => void
+   play: () => void
 }
 
-export default apType
+export default apType

src/plugins/miaoMusicPlayer/types/collection.ts

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

src/plugins/miaoPDF/export.ts

@@ -2,24 +2,23 @@ import { registerComponentOption } from '@/class/PluginCenter'
 import DocumentText from '@vicons/ionicons5/es/DocumentText'
 
 const pluginConfig: registerComponentOption = {
-    key: 'miaoPDF',
-    name: 'PDF浏览',
-    icon: DocumentText,
-    getComponent: async () =>
-        (await import('@/plugins/miaoPDF/miaoPDF.vue')).default,
-    filter: (vDirs, vFiles) => {
-        if (vDirs.length !== 0) {
-            return false
-        }
-        if (vFiles.length !== 1) {
-            return false
-        }
-        return vFiles[0].name.endsWith('pdf')
-    }
+   key: 'miaoPDF',
+   name: 'PDF浏览',
+   icon: DocumentText,
+   getComponent: async () =>
+      (await import('@/plugins/miaoPDF/miaoPDF.vue')).default,
+   filter: (vDirs, vFiles) => {
+      if (vDirs.length !== 0) {
+         return false
+      }
+      if (vFiles.length !== 1) {
+         return false
+      }
+      return vFiles[0].name.endsWith('pdf')
+   }
 }
 
 export default pluginConfig
 
-
 import { PluginExportType } from '@/types/type'
-export const type = PluginExportType.component
+export const type = PluginExportType.component

src/plugins/miaoPDF/miaoPDF.vue

@@ -1,54 +1,61 @@
 <template>
-    <miao-message-provider ref="miaoMessageRef">
-        <div class="miao-container">
-            <div class="miao-container-topBar">
-                <div
-                    class="miao-container-topBar-btn"
-                    @click="() => handleZoom(10)"
-                    title="快速缩小">
-                    --
-                </div>
-                <div
-                    class="miao-container-topBar-btn"
-                    @click="() => handleZoom()"
-                    title="缩小">
-                    -
-                </div>
-                <div
-                    class="miao-container-topBar-btn"
-                    @click="() => handleResetMargin()"
-                    title="还原">
-                    还原缩放
-                </div>
-                <div
-                    class="miao-container-topBar-btn"
-                    @click="() => handleShrink()"
-                    title="放大">
-                    +
-                </div>
-                <div
-                    class="miao-container-topBar-btn"
-                    @click="() => handleShrink(10)"
-                    title="快速放大">
-                    ++
-                </div>
+   <miao-message-provider ref="miaoMessageRef">
+      <div class="miao-container">
+         <div class="miao-container-topBar">
+            <div
+               class="miao-container-topBar-btn"
+               @click="() => handleZoom(10)"
+               title="快速缩小"
+            >
+               --
             </div>
-            <NScrollbar>
-                <div
-                    class="miao-container-pdf"
-                    :style="{
-                        alignItems: pdfMargin < 0 ? 'baseline' : 'center'
-                    }">
-                    <div
-                        ref="pdfEl"
-                        class="miao-container-pdf-content"
-                        :style="{
-                            width: `calc( 100% - ${pdfMargin}px)`
-                        }"></div>
-                </div>
-            </NScrollbar>
-        </div>
-    </miao-message-provider>
+            <div
+               class="miao-container-topBar-btn"
+               @click="() => handleZoom()"
+               title="缩小"
+            >
+               -
+            </div>
+            <div
+               class="miao-container-topBar-btn"
+               @click="() => handleResetMargin()"
+               title="还原"
+            >
+               还原缩放
+            </div>
+            <div
+               class="miao-container-topBar-btn"
+               @click="() => handleShrink()"
+               title="放大"
+            >
+               +
+            </div>
+            <div
+               class="miao-container-topBar-btn"
+               @click="() => handleShrink(10)"
+               title="快速放大"
+            >
+               ++
+            </div>
+         </div>
+         <NScrollbar>
+            <div
+               class="miao-container-pdf"
+               :style="{
+                  alignItems: pdfMargin < 0 ? 'baseline' : 'center'
+               }"
+            >
+               <div
+                  ref="pdfEl"
+                  class="miao-container-pdf-content"
+                  :style="{
+                     width: `calc( 100% - ${pdfMargin}px)`
+                  }"
+               ></div>
+            </div>
+         </NScrollbar>
+      </div>
+   </miao-message-provider>
 </template>
 
 <script setup lang="ts">
@@ -59,7 +66,7 @@ import { VirtualFile } from '@/class/VirtualDirectory'
 import { NScrollbar } from 'naive-ui'
 
 const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
-    required: true
+   required: true
 })
 
 const pdfEl = ref<HTMLDivElement>()
@@ -72,130 +79,130 @@ const pdfPageCount = ref<number>(-1)
 const canvasList = shallowReactive<HTMLCanvasElement[]>([])
 
 const handleZoom = (index?: number) => {
-    const _index = index ?? 1
-    pdfMargin.value += 10 * _index
+   const _index = index ?? 1
+   pdfMargin.value += 10 * _index
 }
 
 const handleShrink = (index?: number) => {
-    const _index = index ?? 1
-    // if (pdfMargin.value - 10 * _index <= 0) {
-    //     return pdfMargin.value = 0
-    // }
-    pdfMargin.value -= 10 * _index
+   const _index = index ?? 1
+   // if (pdfMargin.value - 10 * _index <= 0) {
+   //     return pdfMargin.value = 0
+   // }
+   pdfMargin.value -= 10 * _index
 }
 
 const handleResetMargin = () => {
-    pdfMargin.value = 0
+   pdfMargin.value = 0
 }
 
 onMounted(async () => {
-    const setLoadingMessage = miaoMessageRef.value?.alertTip('加载PDF插件中', {
-        type: 'info',
-        timeout: -1
-    })
-    const pdfSrc = currentFiles.value[0].url
-    // @ts-ignore
-    const PDFJS = await import('pdfjs-dist/build/pdf.mjs')
-    if (typeof window !== 'undefined' && 'Worker' in window) {
-        PDFJS.GlobalWorkerOptions.workerPort = new PdfjsWorker()
-    }
-    // 加载文档
-    let loadingTask = PDFJS.getDocument({ url: pdfSrc })
-    loadingTask.__PDFDocumentLoadingTask = true
-    const pdf = await loadingTask.promise // 使用await等待加载完毕
-    pdfPageCount.value = pdf.numPages
-    // 循环渲染每一页
-    for (let i = 1; i <= pdf.numPages; i++) {
-        setLoadingMessage && setLoadingMessage(`渲染进度：${i}/${pdf.numPages}`)
-        const page = await pdf.getPage(i)
-        let pixelRatio = 3
-        let viewport = page.getViewport({ scale: 1 })
-        // 使用canvas渲染
-        let canvas = window.document.createElement('canvas')
-        canvasList.push(canvas)
-        // @ts-ignore
-        pdfEl.value.appendChild(canvas)
-        canvas.width = viewport.width * pixelRatio // 计算宽度
-        canvas.height = viewport.height * pixelRatio
-        let renderContext = {
-            canvasContext: canvas.getContext('2d'),
-            viewport: viewport,
-            transform: [pixelRatio, 0, 0, pixelRatio, 0, 0]
-        }
-        await page.render(renderContext).promise // 一页一页的渲染
-    }
-    setLoadingMessage &&
-        setLoadingMessage(`渲染PDF完成`, {
-            type: 'success',
-            timeout: 3456
-        })
+   const setLoadingMessage = miaoMessageRef.value?.alertTip('加载PDF插件中', {
+      type: 'info',
+      timeout: -1
+   })
+   const pdfSrc = currentFiles.value[0].url
+   // @ts-ignore
+   const PDFJS = await import('pdfjs-dist/build/pdf.mjs')
+   if (typeof window !== 'undefined' && 'Worker' in window) {
+      PDFJS.GlobalWorkerOptions.workerPort = new PdfjsWorker()
+   }
+   // 加载文档
+   let loadingTask = PDFJS.getDocument({ url: pdfSrc })
+   loadingTask.__PDFDocumentLoadingTask = true
+   const pdf = await loadingTask.promise // 使用await等待加载完毕
+   pdfPageCount.value = pdf.numPages
+   // 循环渲染每一页
+   for (let i = 1; i <= pdf.numPages; i++) {
+      setLoadingMessage && setLoadingMessage(`渲染进度：${i}/${pdf.numPages}`)
+      const page = await pdf.getPage(i)
+      let pixelRatio = 3
+      let viewport = page.getViewport({ scale: 1 })
+      // 使用canvas渲染
+      let canvas = window.document.createElement('canvas')
+      canvasList.push(canvas)
+      // @ts-ignore
+      pdfEl.value.appendChild(canvas)
+      canvas.width = viewport.width * pixelRatio // 计算宽度
+      canvas.height = viewport.height * pixelRatio
+      let renderContext = {
+         canvasContext: canvas.getContext('2d'),
+         viewport: viewport,
+         transform: [pixelRatio, 0, 0, pixelRatio, 0, 0]
+      }
+      await page.render(renderContext).promise // 一页一页的渲染
+   }
+   setLoadingMessage &&
+      setLoadingMessage(`渲染PDF完成`, {
+         type: 'success',
+         timeout: 3456
+      })
 })
 </script>
 
 <style scoped lang="scss">
 .miao-container {
-    width: 100%;
-    height: 100%;
-    background-color: rgb(201, 201, 201);
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+   width: 100%;
+   height: 100%;
+   background-color: rgb(201, 201, 201);
+   overflow: hidden;
+   display: flex;
+   flex-direction: column;
+   align-items: center;
 
-    .miao-container-topBar {
-        box-sizing: border-box;
-        padding: 0 30px;
-        height: 30px;
-        width: 100%;
-        background-color: rgb(170, 176, 182);
-        display: flex;
-        justify-content: space-around;
-        align-items: center;
+   .miao-container-topBar {
+      box-sizing: border-box;
+      padding: 0 30px;
+      height: 30px;
+      width: 100%;
+      background-color: rgb(170, 176, 182);
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
 
-        &-btn {
-            cursor: pointer;
-            user-select: none;
-            height: 80%;
-            padding: 0 5px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: larger;
-            letter-spacing: 1px;
-            color: black;
-            border-radius: 5px;
+      &-btn {
+         cursor: pointer;
+         user-select: none;
+         height: 80%;
+         padding: 0 5px;
+         display: flex;
+         align-items: center;
+         justify-content: center;
+         font-size: larger;
+         letter-spacing: 1px;
+         color: black;
+         border-radius: 5px;
 
-            &:hover {
-                background-color: #eaeaea42;
-            }
-        }
-    }
+         &:hover {
+            background-color: #eaeaea42;
+         }
+      }
+   }
 
-    .miao-container-pdf {
-        min-width: 0;
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        .miao-container-pdf-content {
-            display: flex;
-            flex-direction: column;
-        }
-    }
+   .miao-container-pdf {
+      min-width: 0;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      .miao-container-pdf-content {
+         display: flex;
+         flex-direction: column;
+      }
+   }
 
-    .miao-container-loading {
-        position: absolute;
-        top: 40px;
-        background-color: aliceblue;
-        border: 1px solid black;
-        height: 40px;
-        width: 200px;
-        border-radius: 10px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-size: 15px;
-        letter-spacing: 5px;
-        user-select: none;
-    }
+   .miao-container-loading {
+      position: absolute;
+      top: 40px;
+      background-color: aliceblue;
+      border: 1px solid black;
+      height: 40px;
+      width: 200px;
+      border-radius: 10px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 15px;
+      letter-spacing: 5px;
+      user-select: none;
+   }
 }
 </style>

src/plugins/miaoPluginTemplate/_export.ts

@@ -2,25 +2,24 @@
 import { registerComponentOption } from '@/class/PluginCenter'
 
 const pluginConfig: registerComponentOption = {
-    key: 'yourPluginKey',
-    name: 'yourPluginName',
-    // icon: LogoChrome,
-    getComponent: async () => null,
-        // (await import('yourPluginPath')).default,
-    filter: (vDirs, vFiles) => {
-        if (vDirs.length !== 0) {
-            return false
-        }
-        if (vFiles.length !== 1) {
-            return false
-        }
-        return vFiles[0].name.endsWith('?')
-    },
-    disable: true
+   key: 'yourPluginKey',
+   name: 'yourPluginName',
+   // icon: LogoChrome,
+   getComponent: async () => null,
+   // (await import('yourPluginPath')).default,
+   filter: (vDirs, vFiles) => {
+      if (vDirs.length !== 0) {
+         return false
+      }
+      if (vFiles.length !== 1) {
+         return false
+      }
+      return vFiles[0].name.endsWith('?')
+   },
+   disable: true
 }
 
 export default pluginConfig
 
-
 import { PluginExportType } from '@/types/type'
-export const type = PluginExportType.component
+export const type = PluginExportType.component

src/plugins/miaoPluginTemplate/template.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="template-container"></div>
+   <div class="template-container"></div>
 </template>
 
 <script setup lang="ts">
@@ -8,12 +8,11 @@
 // const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
 //     required: true
 // })
-
 </script>
 
 <style scoped lang="scss">
 .template-container {
-    width: 100%;
-    height: 100%;
+   width: 100%;
+   height: 100%;
 }
 </style>

src/plugins/miaoVideoPlayer/export.ts

@@ -2,32 +2,31 @@ import { registerComponentOption } from '@/class/PluginCenter'
 import PlayCircle from '@vicons/ionicons5/es/PlayCircle'
 
 const pluginConfig: registerComponentOption = {
-    key: 'miaoVideoPlayer',
-    name: '视频',
-    icon: PlayCircle,
-    getComponent: async () =>
-        (await import('@/plugins/miaoVideoPlayer/miaoVideoPlayer.vue')).default,
-    filter: (vDirs, vFiles) => {
-        if (vDirs.length !== 0) {
-            return false
-        }
-        if (vFiles.length === 0) {
-            return false
-        }
-        for (let i of vFiles) {
-            for (let s of ['mp4', 'mkv']) {
-                if (i.name.endsWith(s)) {
-                    return true
-                }
+   key: 'miaoVideoPlayer',
+   name: '视频',
+   icon: PlayCircle,
+   getComponent: async () =>
+      (await import('@/plugins/miaoVideoPlayer/miaoVideoPlayer.vue')).default,
+   filter: (vDirs, vFiles) => {
+      if (vDirs.length !== 0) {
+         return false
+      }
+      if (vFiles.length === 0) {
+         return false
+      }
+      for (let i of vFiles) {
+         for (let s of ['mp4', 'mkv']) {
+            if (i.name.endsWith(s)) {
+               return true
             }
-        }
-        return false
-    },
-    priority: 6
+         }
+      }
+      return false
+   },
+   priority: 6
 }
 
 export default pluginConfig
 
-
 import { PluginExportType } from '@/types/type'
-export const type = PluginExportType.component
+export const type = PluginExportType.component

src/plugins/miaoVideoPlayer/miaoVideoPlayer.vue

@@ -1,9 +1,12 @@
 <template>
-    <miao-drop-handler @on-virtual-files="handleDropVFiles">
-        <div class="player-container">
-            <div ref="xgPlayer" id="xgplayer"></div>
-        </div>
-    </miao-drop-handler>
+   <miao-drop-handler @on-virtual-files="handleDropVFiles">
+      <div class="player-container">
+         <div
+            ref="xgPlayer"
+            id="xgplayer"
+         ></div>
+      </div>
+   </miao-drop-handler>
 </template>
 
 <script lang="ts" setup>
@@ -20,337 +23,334 @@ import lockScreen from './playerPlugin/lockScreen/lockScreen'
 import xgplayerVueApp from './src/XGPlayerVuePluginRoot.vue'
 import useXGPlayerVueFrame from './playerPlugin/xgplayer-vue-frame/xgplayer-vue-frame'
 
-
 const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
-    required: true
+   required: true
 })
 const xgPlayer = ref()
 
 let _player: XGPlayer
 const { setVideo } = (() => {
-    const initPlayer = (videos: VirtualFile[], texttrack: {
-        list: {
-            id: number; url: string
+   const initPlayer = (
+      videos: VirtualFile[],
+      texttrack: {
+         list: {
+            id: number
+            url: string
             text: string
-        }[]
-    }) => {
-        const videoVFile = videos.shift() as VirtualFile
-        _player && _player.destroy()
-        _player = new XGPlayer({
-            plugins: [
-                TextTrack,
-                lockScreen,
-                useXGPlayerVueFrame(xgplayerVueApp),
-            ],
-            el: xgPlayer.value,
-            url: videoVFile.url,
-            width: '100%',
-            height: '100%',
-            volume: 1,
-            // loop: true,
-            // pip: true,
-            videoFillMode: 'contain',
-            autoplay: true,
-            download: true,
-            ignores: [videos.length === 0 ? 'playNext' : undefined].filter(v => v) as string[],
-            lang: 'zh-cn',
-            playbackRate: [0.1, 0.3, 0.5, 0.75, 1, 1.5, 2, 3, 5, 10],
-            texttrack,
-            screenShot: {
-                saveImg: true,
-                quality: 1,
-                type: 'image/png',
-                format: '.png'
-            },
-            playNext: {
-                urlList: videos.map(v => v.url)
-            },
-            progress: {
-                isDragingSeek: true
-            },
-            // mobile: {
-            //     disableGesture: true
-            // }
-        })
-    }
-    return {
-        setVideo: async (
-            videoVFiles: VirtualFile[],
-            textTrackFiles?: VirtualFile[]
-        ) => {
-            // 天哪什么精神状态会写出这种代码
-            textTrackFiles &&
-                textTrackFiles.push(...findTextTrack(currentFiles.value))
-            textTrackFiles = uniq(textTrackFiles)
-            currentFiles.value = uniq([...currentFiles.value, ...videoVFiles, ...(textTrackFiles ?? [])])
-            const videos = findVideo(uniq([...currentFiles.value, ...videoVFiles]))
-            const _list = []
-            if (textTrackFiles) {
-                for (let i of textTrackFiles) {
-                    if (i.name.endsWith('srt')) {
-                        const response = await axios.get(i.url)
-                        // console.log(srtToVtt(response.data))
-                        const url = setUrl(new Blob([srtToVtt(response.data)]))
-                        _list.push({
-                            id: i.id,
-                            url,
-                            // 这个language会覆盖id的设置，导致无法切换字幕
-                            // language: 'zh-cn',
-                            text: i.name
-                        })
-                    } else if (i.name.endsWith('ass')) {
-                        const response = await axios.get(i.url)
-                        // console.log(assToVtt(response.data))
-                        const url = setUrl(new Blob([assToVtt(response.data)]))
-                        _list.push({
-                            id: i.id,
-                            url,
-                            text: i.name
-                        })
-                    } else if (i.name.endsWith('ssa')) {
-                        const response = await axios.get(i.url)
-                        // console.log(ssaToVtt(response.data))
-                        const url = setUrl(new Blob([ssaToVtt(response.data)]))
-                        _list.push({
-                            id: i.id,
-                            url,
-                            text: i.name
-                        })
-                    } else {
-                        _list.push({
-                            id: i.id,
-                            url: i.url,
-                            text: i.name
-                        })
-                    }
-                }
+         }[]
+      }
+   ) => {
+      const videoVFile = videos.shift() as VirtualFile
+      _player && _player.destroy()
+      _player = new XGPlayer({
+         plugins: [TextTrack, lockScreen, useXGPlayerVueFrame(xgplayerVueApp)],
+         el: xgPlayer.value,
+         url: videoVFile.url,
+         width: '100%',
+         height: '100%',
+         volume: 1,
+         // loop: true,
+         // pip: true,
+         videoFillMode: 'contain',
+         autoplay: true,
+         download: true,
+         ignores: [videos.length === 0 ? 'playNext' : undefined].filter(
+            (v) => v
+         ) as string[],
+         lang: 'zh-cn',
+         playbackRate: [0.1, 0.3, 0.5, 0.75, 1, 1.5, 2, 3, 5, 10],
+         texttrack,
+         screenShot: {
+            saveImg: true,
+            quality: 1,
+            type: 'image/png',
+            format: '.png'
+         },
+         playNext: {
+            urlList: videos.map((v) => v.url)
+         },
+         progress: {
+            isDragingSeek: true
+         }
+         // mobile: {
+         //     disableGesture: true
+         // }
+      })
+   }
+   return {
+      setVideo: async (
+         videoVFiles: VirtualFile[],
+         textTrackFiles?: VirtualFile[]
+      ) => {
+         // 天哪什么精神状态会写出这种代码
+         textTrackFiles &&
+            textTrackFiles.push(...findTextTrack(currentFiles.value))
+         textTrackFiles = uniq(textTrackFiles)
+         currentFiles.value = uniq([
+            ...currentFiles.value,
+            ...videoVFiles,
+            ...(textTrackFiles ?? [])
+         ])
+         const videos = findVideo(uniq([...currentFiles.value, ...videoVFiles]))
+         const _list = []
+         if (textTrackFiles) {
+            for (let i of textTrackFiles) {
+               if (i.name.endsWith('srt')) {
+                  const response = await axios.get(i.url)
+                  // console.log(srtToVtt(response.data))
+                  const url = setUrl(new Blob([srtToVtt(response.data)]))
+                  _list.push({
+                     id: i.id,
+                     url,
+                     // 这个language会覆盖id的设置，导致无法切换字幕
+                     // language: 'zh-cn',
+                     text: i.name
+                  })
+               } else if (i.name.endsWith('ass')) {
+                  const response = await axios.get(i.url)
+                  // console.log(assToVtt(response.data))
+                  const url = setUrl(new Blob([assToVtt(response.data)]))
+                  _list.push({
+                     id: i.id,
+                     url,
+                     text: i.name
+                  })
+               } else if (i.name.endsWith('ssa')) {
+                  const response = await axios.get(i.url)
+                  // console.log(ssaToVtt(response.data))
+                  const url = setUrl(new Blob([ssaToVtt(response.data)]))
+                  _list.push({
+                     id: i.id,
+                     url,
+                     text: i.name
+                  })
+               } else {
+                  _list.push({
+                     id: i.id,
+                     url: i.url,
+                     text: i.name
+                  })
+               }
             }
-            const texttrack = {
-                list: _list
-            }
-            initPlayer([...videos], texttrack)
-        }
-    }
+         }
+         const texttrack = {
+            list: _list
+         }
+         initPlayer([...videos], texttrack)
+      }
+   }
 })()
 
 const { setUrl, destroyUrl } = (() => {
-    const urlList: string[] = []
-    return {
-        setUrl(blob: Blob) {
-            const url = URL.createObjectURL(blob)
-            urlList.push(url)
-            return url
-        },
-        destroyUrl() {
-            for (const url of urlList) {
-                URL.revokeObjectURL(url)
-            }
-        }
-    }
+   const urlList: string[] = []
+   return {
+      setUrl(blob: Blob) {
+         const url = URL.createObjectURL(blob)
+         urlList.push(url)
+         return url
+      },
+      destroyUrl() {
+         for (const url of urlList) {
+            URL.revokeObjectURL(url)
+         }
+      }
+   }
 })()
 
 const handleDropVFiles = (files: VirtualFile[]) => {
-    setVideo(findVideo(files.reverse()), findTextTrack(files))
+   setVideo(findVideo(files.reverse()), findTextTrack(files))
 }
 
 function srtToVtt(srt: string) {
-    // 将 SRT 字幕按行分割
-    const lines = srt.split('\n')
-    let vtt = 'WEBVTT\n\n' // VTT 文件的开头
+   // 将 SRT 字幕按行分割
+   const lines = srt.split('\n')
+   let vtt = 'WEBVTT\n\n' // VTT 文件的开头
 
-    let index = 0
-    while (index < lines.length) {
-        // 跳过空行
-        if (lines[index].trim() === '') {
-            index++
-            continue
-        }
+   let index = 0
+   while (index < lines.length) {
+      // 跳过空行
+      if (lines[index].trim() === '') {
+         index++
+         continue
+      }
 
-        // SRT 中的序号
-        lines[index].trim()
-        index++
+      // SRT 中的序号
+      lines[index].trim()
+      index++
 
-        // 时间戳
-        const timeLine = lines[index].trim().replace(/,/g, '.') // 将逗号替换为点
-        index++
+      // 时间戳
+      const timeLine = lines[index].trim().replace(/,/g, '.') // 将逗号替换为点
+      index++
 
-        // 字幕文本
-        let text = ''
-        while (index < lines.length && lines[index].trim() !== '') {
-            text += lines[index].trim() + '\n'
-            index++
-        }
+      // 字幕文本
+      let text = ''
+      while (index < lines.length && lines[index].trim() !== '') {
+         text += lines[index].trim() + '\n'
+         index++
+      }
 
-        // 添加到 VTT 字幕中
-        vtt += `${timeLine}\n${text.trim()}\n\n`
-    }
+      // 添加到 VTT 字幕中
+      vtt += `${timeLine}\n${text.trim()}\n\n`
+   }
 
-    return vtt
+   return vtt
 }
 
 function assToVtt(assContent: string) {
-    // 分割 ASS 内容为行
-    const lines = assContent.split('\n')
-    let vttContent = 'WEBVTT\n\n' // VTT 文件头
+   // 分割 ASS 内容为行
+   const lines = assContent.split('\n')
+   let vttContent = 'WEBVTT\n\n' // VTT 文件头
 
-    // 遍历每一行，寻找字幕条目
-    for (let line of lines) {
-        // 只处理 [Events] 部分后的 Dialogue 行
-        if (line.startsWith('Dialogue:')) {
-            // 提取时间戳和文本
-            const parts = line.split(',')
-            if (parts.length >= 5) {
-                // 将时间戳格式化为 VTT 格式
-                const startTime = parts[1]
-                    .trim()
-                    .replace('.', ',')
-                    .replace(',', '.') // 替换 . 为 ,，然后再替换为 .
-                const endTime = parts[2]
-                    .trim()
-                    .replace('.', ',')
-                    .replace(',', '.') // 替换 . 为 ,，然后再替换为 .
+   // 遍历每一行，寻找字幕条目
+   for (let line of lines) {
+      // 只处理 [Events] 部分后的 Dialogue 行
+      if (line.startsWith('Dialogue:')) {
+         // 提取时间戳和文本
+         const parts = line.split(',')
+         if (parts.length >= 5) {
+            // 将时间戳格式化为 VTT 格式
+            const startTime = parts[1]
+               .trim()
+               .replace('.', ',')
+               .replace(',', '.') // 替换 . 为 ,，然后再替换为 .
+            const endTime = parts[2].trim().replace('.', ',').replace(',', '.') // 替换 . 为 ,，然后再替换为 .
 
-                // 确保时间戳是两位数格式
-                const formattedStartTime = startTime.replace(
-                    /(\d+):(\d+):(\d+)\.(\d+)/,
-                    (match: any, h: any, m: any, s: any, ms: any) => {
-                        match
-                        return `${String(h).padStart(2, '0')}:${String(
-                            m
-                        ).padStart(2, '0')}:${String(s).padStart(
-                            2,
-                            '0'
-                        )}.${String(ms).padStart(3, '0')}`
-                    }
-                )
+            // 确保时间戳是两位数格式
+            const formattedStartTime = startTime.replace(
+               /(\d+):(\d+):(\d+)\.(\d+)/,
+               (match: any, h: any, m: any, s: any, ms: any) => {
+                  match
+                  return `${String(h).padStart(2, '0')}:${String(m).padStart(
+                     2,
+                     '0'
+                  )}:${String(s).padStart(2, '0')}.${String(ms).padStart(3, '0')}`
+               }
+            )
 
-                const formattedEndTime = endTime.replace(
-                    /(\d+):(\d+):(\d+)\.(\d+)/,
-                    (match: any, h: any, m: any, s: any, ms: any) => {
-                        match
-                        return `${String(h).padStart(2, '0')}:${String(
-                            m
-                        ).padStart(2, '0')}:${String(s).padStart(
-                            2,
-                            '0'
-                        )}.${String(ms).padStart(3, '0')}`
-                    }
-                )
+            const formattedEndTime = endTime.replace(
+               /(\d+):(\d+):(\d+)\.(\d+)/,
+               (match: any, h: any, m: any, s: any, ms: any) => {
+                  match
+                  return `${String(h).padStart(2, '0')}:${String(m).padStart(
+                     2,
+                     '0'
+                  )}:${String(s).padStart(2, '0')}.${String(ms).padStart(3, '0')}`
+               }
+            )
 
-                const rawText = parts.slice(9).join(',').trim() // 提取文本
+            const rawText = parts.slice(9).join(',').trim() // 提取文本
 
-                // 清理文本中的样式信息
-                const cleanText = rawText
-                    .replace(/{[^}]*}/g, '')
-                    .replace(/\\N/g, '\n')
-                    .trim()
+            // 清理文本中的样式信息
+            const cleanText = rawText
+               .replace(/{[^}]*}/g, '')
+               .replace(/\\N/g, '\n')
+               .trim()
 
-                // 添加到 VTT 内容
-                vttContent += `${formattedStartTime} --> ${formattedEndTime}\n${cleanText}\n\n`
-            }
-        }
-    }
+            // 添加到 VTT 内容
+            vttContent += `${formattedStartTime} --> ${formattedEndTime}\n${cleanText}\n\n`
+         }
+      }
+   }
 
-    return vttContent.trim() // 返回 VTT 内容，去掉末尾空行
+   return vttContent.trim() // 返回 VTT 内容，去掉末尾空行
 }
 
 function ssaToVtt(ssaContent: string): string {
-    function convertSsaTimeToVtt(ssaTime: string): string {
-        const timeParts = ssaTime.split(':')
-        const hours = timeParts[0].padStart(2, '0')
-        const minutes = timeParts[1].padStart(2, '0')
-        const secondsAndMilliseconds = timeParts[2].split('.')
-        const seconds = secondsAndMilliseconds[0].padStart(2, '0')
-        const milliseconds = (secondsAndMilliseconds[1] || '0').padEnd(3, '0')
+   function convertSsaTimeToVtt(ssaTime: string): string {
+      const timeParts = ssaTime.split(':')
+      const hours = timeParts[0].padStart(2, '0')
+      const minutes = timeParts[1].padStart(2, '0')
+      const secondsAndMilliseconds = timeParts[2].split('.')
+      const seconds = secondsAndMilliseconds[0].padStart(2, '0')
+      const milliseconds = (secondsAndMilliseconds[1] || '0').padEnd(3, '0')
 
-        return `${hours}:${minutes}:${seconds}.${milliseconds}`
-    }
-    const lines = ssaContent.split('\n')
-    let vttContent = 'WEBVTT\n\n' // VTT文件头
-    let inEvents = false
+      return `${hours}:${minutes}:${seconds}.${milliseconds}`
+   }
+   const lines = ssaContent.split('\n')
+   let vttContent = 'WEBVTT\n\n' // VTT文件头
+   let inEvents = false
 
-    for (const line of lines) {
-        // 检查是否进入[Events]部分
-        if (line.startsWith('[Events]')) {
-            inEvents = true
-            continue
-        }
+   for (const line of lines) {
+      // 检查是否进入[Events]部分
+      if (line.startsWith('[Events]')) {
+         inEvents = true
+         continue
+      }
 
-        // 如果在[Events]部分，处理对话行
-        if (inEvents && line.startsWith('Dialogue:')) {
-            const parts = line.split(',')
-            if (parts.length >= 3) {
-                const startTime = convertSsaTimeToVtt(parts[1].trim())
-                const endTime = convertSsaTimeToVtt(parts[2].trim())
-                const text = parts.slice(9).join(',').trim() // 获取字幕文本
+      // 如果在[Events]部分，处理对话行
+      if (inEvents && line.startsWith('Dialogue:')) {
+         const parts = line.split(',')
+         if (parts.length >= 3) {
+            const startTime = convertSsaTimeToVtt(parts[1].trim())
+            const endTime = convertSsaTimeToVtt(parts[2].trim())
+            const text = parts.slice(9).join(',').trim() // 获取字幕文本
 
-                // 去除样式标签
-                const cleanText = text.replace(/{[^}]*}/g, '').trim()
+            // 去除样式标签
+            const cleanText = text.replace(/{[^}]*}/g, '').trim()
 
-                // 添加到VTT内容
-                vttContent += `${startTime} --> ${endTime}\n${cleanText}\n\n`
-            }
-        }
-    }
+            // 添加到VTT内容
+            vttContent += `${startTime} --> ${endTime}\n${cleanText}\n\n`
+         }
+      }
+   }
 
-    return vttContent
+   return vttContent
 }
 
 const findVideo = (vFiles: VirtualFile[]) =>
-    uniq(vFiles.filter((v) => {
-        for (let s of ['mp4', 'mp3', 'mkv']) {
+   uniq(
+      vFiles.filter((v) => {
+         for (let s of ['mp4', 'mp3', 'mkv']) {
             if (v.name.endsWith(s)) {
-                return true
+               return true
             }
-        }
-        return false
-    }))
+         }
+         return false
+      })
+   )
 
 const findTextTrack = (vFiles: VirtualFile[]) =>
-    vFiles.filter((v) => {
-        for (let s of ['vtt', 'srt', 'ass', 'ssa']) {
-            if (v.name.endsWith(s)) {
-                return true
-            }
-        }
-        return false
-    })
+   vFiles.filter((v) => {
+      for (let s of ['vtt', 'srt', 'ass', 'ssa']) {
+         if (v.name.endsWith(s)) {
+            return true
+         }
+      }
+      return false
+   })
 
 onMounted(() => {
-    if (currentFiles.value.length) {
-        currentFiles.value.reverse()
-        setVideo(
-            findVideo(currentFiles.value),
-            findTextTrack(currentFiles.value)
-        )
-    }
+   if (currentFiles.value.length) {
+      currentFiles.value.reverse()
+      setVideo(findVideo(currentFiles.value), findTextTrack(currentFiles.value))
+   }
 })
 
 onBeforeUnmount(() => {
-    _player.destroy()
-    destroyUrl()
+   _player.destroy()
+   destroyUrl()
 })
 </script>
 
 <style scoped lang="scss">
 .player-container {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    background-color: grey;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+   width: 100%;
+   height: 100%;
+   position: relative;
+   background-color: grey;
+   display: flex;
+   flex-direction: column;
+   justify-content: center;
 
-    #xgplayer {
-        width: 100%;
-        // height: 500px;
-        background-color: black;
-    }
+   #xgplayer {
+      width: 100%;
+      // height: 500px;
+      background-color: black;
+   }
 }
 
 .video-js {
-    width: 100%;
-    background-color: rgb(0, 0, 0);
+   width: 100%;
+   background-color: rgb(0, 0, 0);
 }
-</style>
+</style>

src/plugins/miaoVideoPlayer/playerPlugin/lockScreen/lockScreen.scss

@@ -1,51 +1,55 @@
 .lock-div {
-    position: absolute;
-    z-index: 20;
-    left: 15px;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 30px;
-    aspect-ratio: 1;
-    cursor: pointer;
-    color: #f2f2f2;
-    opacity: 1;
-    visibility: visible;
-    transition: opacity 0.5s ease, visibility 0.5s ease, width 0.25s ease, left 0.25s ease;
-    pointer-events: all !important;
-    svg {
-        width: inherit;
-        height: inherit;
-    }
-    &:hover {
-        width: 36px;
-        left: 12px;
-    }
+   position: absolute;
+   z-index: 20;
+   left: 15px;
+   top: 50%;
+   transform: translateY(-50%);
+   width: 30px;
+   aspect-ratio: 1;
+   cursor: pointer;
+   color: #f2f2f2;
+   opacity: 1;
+   visibility: visible;
+   transition:
+      opacity 0.5s ease,
+      visibility 0.5s ease,
+      width 0.25s ease,
+      left 0.25s ease;
+   pointer-events: all !important;
+   svg {
+      width: inherit;
+      height: inherit;
+   }
+   &:hover {
+      width: 36px;
+      left: 12px;
+   }
 }
 
 .xgplayer.xgplayer-inactive .lock-div {
-    pointer-events: none;
-    cursor: default;
-    visibility: hidden;
-    opacity: 0;
+   pointer-events: none;
+   cursor: default;
+   visibility: hidden;
+   opacity: 0;
 }
 
 .overlay-div {
-    position: absolute;
-    z-index: 10;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0);
-    display: none;
-    cursor: auto;
+   position: absolute;
+   z-index: 10;
+   top: 0;
+   left: 0;
+   width: 100%;
+   height: 100%;
+   background-color: rgba(0, 0, 0, 0);
+   display: none;
+   cursor: auto;
 }
 
 .xgplayer.xgplayer-inactive .overlay-div {
-    pointer-events: none;
-    cursor: none;
+   pointer-events: none;
+   cursor: none;
 }
 
 .xgplayer .xgplayer-locked {
-    pointer-events: none;
-}
+   pointer-events: none;
+}

src/plugins/miaoVideoPlayer/playerPlugin/lockScreen/lockScreen.ts

@@ -1,104 +1,125 @@
-import { BasePlugin } from "xgplayer";
-import "./lockScreen.scss";
-import MobilePlugin from "xgplayer/es/plugins/mobile";
+import { BasePlugin } from 'xgplayer'
+import './lockScreen.scss'
+import MobilePlugin from 'xgplayer/es/plugins/mobile'
 
 export default class LockPlugin extends BasePlugin {
-	static get pluginName() {
-		return "lockPlugin";
-	}
+   static get pluginName() {
+      return 'lockPlugin'
+   }
 
-	private locked: boolean;
-	private lockDiv: HTMLDivElement = document.createElement("div");
-	private overlayDiv: HTMLDivElement = document.createElement("div");
+   private locked: boolean
+   private lockDiv: HTMLDivElement = document.createElement('div')
+   private overlayDiv: HTMLDivElement = document.createElement('div')
 
-	private lockOpenSVG: string = `
+   private lockOpenSVG: string = `
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
             <path d="M336 208v-95a80 80 0 0 0-160 0v95" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path>
             <rect x="96" y="208" width="320" height="272" rx="48" ry="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></rect>
-        </svg>`;
+        </svg>`
 
-	private lockClosedSVG: string = `
+   private lockClosedSVG: string = `
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
             <path d="M336 112a80 80 0 0 0-160 0v96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path>
             <rect x="96" y="208" width="320" height="272" rx="48" ry="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></rect>
-        </svg>`;
+        </svg>`
 
-	constructor(args: any) {
-		super(args);
-		this.locked = false;
-	}
+   constructor(args: any) {
+      super(args)
+      this.locked = false
+   }
 
-	afterCreate() {
-		this.initLockDiv();
-		this.initOverlayDiv();
-		this.bindEvents();
-	}
+   afterCreate() {
+      this.initLockDiv()
+      this.initOverlayDiv()
+      this.bindEvents()
+   }
 
-	private initLockDiv() {
-		this.lockDiv.innerHTML = this.lockClosedSVG;
-		this.lockDiv.className = "lock-div";
-		this.player.root !== null && this.player.root.appendChild(this.lockDiv);
-	}
+   private initLockDiv() {
+      this.lockDiv.innerHTML = this.lockClosedSVG
+      this.lockDiv.className = 'lock-div'
+      this.player.root !== null && this.player.root.appendChild(this.lockDiv)
+   }
 
-	private initOverlayDiv() {
-		this.overlayDiv.className = "overlay-div";
-		this.player.root !== null && this.player.root.appendChild(this.overlayDiv);
-		this.overlayDiv.addEventListener('mousedown', (e) => {
-			e.preventDefault();
-		});
-		this.overlayDiv.addEventListener('mousemove', (e) => {
-			e.preventDefault();
-		});
-	}
+   private initOverlayDiv() {
+      this.overlayDiv.className = 'overlay-div'
+      this.player.root !== null && this.player.root.appendChild(this.overlayDiv)
+      this.overlayDiv.addEventListener('mousedown', (e) => {
+         e.preventDefault()
+      })
+      this.overlayDiv.addEventListener('mousemove', (e) => {
+         e.preventDefault()
+      })
+   }
 
-	private bindEvents() {
-		this.lockDiv!.addEventListener("click", this.toggleLock.bind(this));
-		this.player.root !== null && this.player.root.addEventListener("click", this.preventClick.bind(this), true);
-		this.player.usePluginHooks("progress", "dragstart", () => {
-			if (this.locked) {
-				return false;
-			}
-			return true;
-		});
-        // 阻止进度条默认行为
-        for(const event of ['dragstart', 'drag', 'dragend']) {
-            this.player.usePluginHooks("progress", event, () => {
-                if (this.locked) {
-                    return false;
-                }
-                return true;
-            });
-        }
-	}
+   private bindEvents() {
+      this.lockDiv!.addEventListener('click', this.toggleLock.bind(this))
+      this.player.root !== null &&
+         this.player.root.addEventListener(
+            'click',
+            this.preventClick.bind(this),
+            true
+         )
+      this.player.usePluginHooks('progress', 'dragstart', () => {
+         if (this.locked) {
+            return false
+         }
+         return true
+      })
+      // 阻止进度条默认行为
+      for (const event of ['dragstart', 'drag', 'dragend']) {
+         this.player.usePluginHooks('progress', event, () => {
+            if (this.locked) {
+               return false
+            }
+            return true
+         })
+      }
+   }
 
-	private toggleLock() {
-        const mobile = this.getPlugin('mobile') as MobilePlugin | undefined
-		// mobile?.disableGesture()
-		if (this.lockDiv && this.overlayDiv) {
-			this.locked = !this.locked;
-			this.lockDiv.innerHTML = this.locked ? this.lockOpenSVG : this.lockClosedSVG;
-			this.overlayDiv.style.display = this.locked ? "block" : "none";
-			this.player.controls && (this.locked ? this.player.controls.hide() : this.player.controls.show());
-			this.player.root !== null && this.player.root.classList.toggle("xgplayer-locked", this.locked);
-            this.locked ? mobile?.disableGesture() : mobile?.enableGesture()
-		}
-	}
+   private toggleLock() {
+      const mobile = this.getPlugin('mobile') as MobilePlugin | undefined
+      // mobile?.disableGesture()
+      if (this.lockDiv && this.overlayDiv) {
+         this.locked = !this.locked
+         this.lockDiv.innerHTML = this.locked
+            ? this.lockOpenSVG
+            : this.lockClosedSVG
+         this.overlayDiv.style.display = this.locked ? 'block' : 'none'
+         this.player.controls &&
+            (this.locked
+               ? this.player.controls.hide()
+               : this.player.controls.show())
+         this.player.root !== null &&
+            this.player.root.classList.toggle('xgplayer-locked', this.locked)
+         this.locked ? mobile?.disableGesture() : mobile?.enableGesture()
+      }
+   }
 
-	private preventClick(event: MouseEvent) {
-		if (this.locked && event.target instanceof HTMLElement && !event.target.classList.contains("lock-div")) {
-			event.stopPropagation();
-			event.preventDefault();
-		}
-	}
+   private preventClick(event: MouseEvent) {
+      if (
+         this.locked &&
+         event.target instanceof HTMLElement &&
+         !event.target.classList.contains('lock-div')
+      ) {
+         event.stopPropagation()
+         event.preventDefault()
+      }
+   }
 
-	destroy() {
-		if (this.lockDiv) {
-			this.lockDiv.removeEventListener("click", this.toggleLock.bind(this));
-			this.player.root !== null && this.player.root.removeEventListener("click", this.preventClick.bind(this), true);
-			this.player.root !== null && this.player.root.removeChild(this.lockDiv);
-		}
-		if (this.overlayDiv) {
-			this.player.root !== null && this.player.root.removeChild(this.overlayDiv);
-		}
-	}
+   destroy() {
+      if (this.lockDiv) {
+         this.lockDiv.removeEventListener('click', this.toggleLock.bind(this))
+         this.player.root !== null &&
+            this.player.root.removeEventListener(
+               'click',
+               this.preventClick.bind(this),
+               true
+            )
+         this.player.root !== null && this.player.root.removeChild(this.lockDiv)
+      }
+      if (this.overlayDiv) {
+         this.player.root !== null &&
+            this.player.root.removeChild(this.overlayDiv)
+      }
+   }
 }

src/plugins/miaoVideoPlayer/playerPlugin/xgplayer-vue-frame/fakeRoot.vue

@@ -1,36 +1,35 @@
 <template>
-    <Teleport :to="player.root">
-        <App v-bind="pick(toRaw(props), ['player', 'root'])"></App>
-    </Teleport>
+   <Teleport :to="player.root">
+      <App v-bind="pick(toRaw(props), ['player', 'root'])"></App>
+   </Teleport>
 </template>
 
 <script setup lang="ts">
-import { Component, toRaw } from "vue";
-import Player from "xgplayer/es/player";
-import pick  from "lodash/pick";
+import { Component, toRaw } from 'vue'
+import Player from 'xgplayer/es/player'
+import pick from 'lodash/pick'
 const props = defineProps({
-    player: {
-        type: Player,
-        required: true
-    },
-    root: {
-        type: Element,
-        required: true
-    },
-    App: {
-        type: Object as () => Component,
-        required: true
-    }
+   player: {
+      type: Player,
+      required: true
+   },
+   root: {
+      type: Element,
+      required: true
+   },
+   App: {
+      type: Object as () => Component,
+      required: true
+   }
 })
-
 </script>
 
 <style lang="scss" scoped>
 .test {
-    width: 50px;
-    height: 50px;
-    background-color: aliceblue;
-    position: absolute;
-    right: 0;
+   width: 50px;
+   height: 50px;
+   background-color: aliceblue;
+   position: absolute;
+   right: 0;
 }
-</style>
+</style>

src/plugins/miaoVideoPlayer/playerPlugin/xgplayer-vue-frame/xgplayer-vue-frame.ts

@@ -1,35 +1,39 @@
-import { App, Component, createApp } from "vue";
-import { BasePlugin } from "xgplayer";
-import fakeApp from "./fakeRoot.vue";
+import { App, Component, createApp } from 'vue'
+import { BasePlugin } from 'xgplayer'
+import fakeApp from './fakeRoot.vue'
 
 const useXGPlayerVueFrame = (App: Component) => {
-	return class XGPlayerVueFrame extends BasePlugin {
-		static get pluginName() {
-			return "xgplayerVueFrame";
-		}
+   return class XGPlayerVueFrame extends BasePlugin {
+      static get pluginName() {
+         return 'xgplayerVueFrame'
+      }
 
-		private root: HTMLDivElement | null = null;
-		private app: App<Element> | null = null;
+      private root: HTMLDivElement | null = null
+      private app: App<Element> | null = null
 
-		constructor(args: any) {
-			super(args);
-		}
+      constructor(args: any) {
+         super(args)
+      }
 
-		afterCreate() {
-			this.createVueFrame();
-		}
+      afterCreate() {
+         this.createVueFrame()
+      }
 
-		private createVueFrame() {
-			this.root = document.createElement("div");
-			this.app = createApp(fakeApp, { player: this.player, root: this.root, App })
-			this.app.mount(this.root);
-			// this.app.mount(this.player.root);
-		}
+      private createVueFrame() {
+         this.root = document.createElement('div')
+         this.app = createApp(fakeApp, {
+            player: this.player,
+            root: this.root,
+            App
+         })
+         this.app.mount(this.root)
+         // this.app.mount(this.player.root);
+      }
 
-		destroy() {
-			this.app?.unmount()
-		}
-	};
-};
+      destroy() {
+         this.app?.unmount()
+      }
+   }
+}
 
-export default useXGPlayerVueFrame;
+export default useXGPlayerVueFrame

src/plugins/miaoVideoPlayer/src/XGPlayerVuePluginRoot.vue

@@ -1,33 +1,32 @@
 <template>
-    <!-- <div class="test"></div> -->
+   <!-- <div class="test"></div> -->
 </template>
 
 <script setup lang="ts">
-import { onMounted } from "vue";
-import Player from "xgplayer/es/player";
+import { onMounted } from 'vue'
+import Player from 'xgplayer/es/player'
 const props = defineProps({
-    player: {
-        type: Player,
-        required: true
-    },
-    root: {
-        type: Element,
-        required: true
-    }
+   player: {
+      type: Player,
+      required: true
+   },
+   root: {
+      type: Element,
+      required: true
+   }
 })
 
 onMounted(() => {
-    props
+   props
 })
-
 </script>
 
 <style lang="scss" scoped>
 .test {
-    width: 50px;
-    height: 50px;
-    background-color: aliceblue;
-    position: absolute;
-    right: 0;
+   width: 50px;
+   height: 50px;
+   background-color: aliceblue;
+   position: absolute;
+   right: 0;
 }
-</style>
+</style>

src/plugins/registerExternalPlugin/checkPluginAvailable.ts

@@ -1,36 +1,35 @@
-import type { Plugin, registerComponentOption } from "@/class/PluginCenter";
+import type { Plugin, registerComponentOption } from '@/class/PluginCenter'
 
 export function checkNormalPlugin(obj: any): obj is Plugin {
-    return (
-        typeof obj === "object" &&
-        obj!== null &&
-        typeof obj.name === "string" &&
-        (obj.icon === undefined || typeof obj.icon === "object") &&
-        typeof obj.disable === "boolean" &&
-        Array.isArray(obj.group) &&
-        obj.group.every((group: any) => typeof group === "string") &&
-        typeof obj.priority === "number" &&
-        typeof obj.filter === "function" &&
-        typeof obj.func === "function"
-    );
+   return (
+      typeof obj === 'object' &&
+      obj !== null &&
+      typeof obj.name === 'string' &&
+      (obj.icon === undefined || typeof obj.icon === 'object') &&
+      typeof obj.disable === 'boolean' &&
+      Array.isArray(obj.group) &&
+      obj.group.every((group: any) => typeof group === 'string') &&
+      typeof obj.priority === 'number' &&
+      typeof obj.filter === 'function' &&
+      typeof obj.func === 'function'
+   )
 }
 
-
-export function checkComponentPlugin(
-    obj: any
-): obj is registerComponentOption {
-    return (
-        typeof obj === "object" &&
-        obj!== null &&
-        typeof obj.key === "string" &&
-        typeof obj.name === "string" &&
-        (obj.icon === undefined || typeof obj.icon === "object") &&
-        typeof obj.getComponent === "function" &&
-        ((obj.group === undefined) || (Array.isArray(obj.group) && obj.group.every((item: any) => typeof item === "string"))) &&
-        typeof obj.filter === "function" &&
-        (obj.disable === undefined || typeof obj.disable === "boolean") &&
-        (obj.exitConfirm === undefined || typeof obj.exitConfirm === "boolean") &&
-        (obj.single === undefined || typeof obj.single === "boolean") &&
-        (obj.priority === undefined || typeof obj.priority === "number")
-    );
-}
+export function checkComponentPlugin(obj: any): obj is registerComponentOption {
+   return (
+      typeof obj === 'object' &&
+      obj !== null &&
+      typeof obj.key === 'string' &&
+      typeof obj.name === 'string' &&
+      (obj.icon === undefined || typeof obj.icon === 'object') &&
+      typeof obj.getComponent === 'function' &&
+      (obj.group === undefined ||
+         (Array.isArray(obj.group) &&
+            obj.group.every((item: any) => typeof item === 'string'))) &&
+      typeof obj.filter === 'function' &&
+      (obj.disable === undefined || typeof obj.disable === 'boolean') &&
+      (obj.exitConfirm === undefined || typeof obj.exitConfirm === 'boolean') &&
+      (obj.single === undefined || typeof obj.single === 'boolean') &&
+      (obj.priority === undefined || typeof obj.priority === 'number')
+   )
+}

src/plugins/registerExternalPlugin/export.ts

@@ -1,29 +1,29 @@
-import { Plugin, PluginGroup } from "@/class/PluginCenter";
-import { LogoGithub } from "@vicons/ionicons5";
-import { PluginExportType } from "@/types/type";
-import { shallowRef } from "vue";
-import registerExternalPlugin from "./registerExternalPlugin";
+import { Plugin, PluginGroup } from '@/class/PluginCenter'
+import { LogoGithub } from '@vicons/ionicons5'
+import { PluginExportType } from '@/types/type'
+import { shallowRef } from 'vue'
+import registerExternalPlugin from './registerExternalPlugin'
 
 const pluginConfig: Plugin = {
-	name: "导入插件",
-	icon: shallowRef(LogoGithub),
-	filter: (vDirs, vFiles) => {
-		if (vDirs.length !== 0) {
-			return false;
-		}
-		if (vFiles.length !== 1) {
-			return false;
-		}
-        return vFiles[0].name.endsWith('js')
-	},
-	disable: false,
-	group: [PluginGroup.default],
-	func: registerExternalPlugin,
-	priority: -1
-};
+   name: '导入插件',
+   icon: shallowRef(LogoGithub),
+   filter: (vDirs, vFiles) => {
+      if (vDirs.length !== 0) {
+         return false
+      }
+      if (vFiles.length !== 1) {
+         return false
+      }
+      return vFiles[0].name.endsWith('js')
+   },
+   disable: false,
+   group: [PluginGroup.default],
+   func: registerExternalPlugin,
+   priority: -1
+}
 
-export default pluginConfig;
+export default pluginConfig
 
-export const type = PluginExportType.default;
+export const type = PluginExportType.default
 
-export const key = 'registerExternalPlugin';
+export const key = 'registerExternalPlugin'

src/plugins/registerExternalPlugin/registerExternalPlugin.ts

@@ -1,36 +1,42 @@
-import VirtualDirectory, { VirtualFile } from "@/class/VirtualDirectory";
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
 // import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
-import { PluginExportType, usePluginHooksType } from "@/types/type";
-import type { Plugin, registerComponentOption } from "@/class/PluginCenter";
-import { checkComponentPlugin, checkNormalPlugin } from "./checkPluginAvailable";
+import { PluginExportType, usePluginHooksType } from '@/types/type'
+import type { Plugin, registerComponentOption } from '@/class/PluginCenter'
+import { checkComponentPlugin, checkNormalPlugin } from './checkPluginAvailable'
 
 // const miaoFetchApi = useMiaoFetchApi()
 
-export default async function registerExternalPlugin(_VDirectories: VirtualDirectory[], VFiles: VirtualFile[], hooks: usePluginHooksType) {
-    try {
-        const targetPluginVFile = VFiles[0] as VirtualFile
-        const plugin = await import(/* @vite-ignore */ targetPluginVFile.url) as {
-            default: registerComponentOption | Plugin;
-            type: PluginExportType;
-            key?: string;
-        }
-        const pc = hooks.getPluginCenter()
-        if (plugin.type === PluginExportType.default) {
-            if (checkNormalPlugin(plugin.default) === false) {
-                throw('插件不合法')
-            }
-            pc.register(plugin.key ?? `${Math.random()}`, plugin.default as Plugin)
-        } else {
-            if (checkComponentPlugin(plugin.default) === false) {
-                throw('插件不合法')
-            }
-            pc.registerComponent(plugin.default as registerComponentOption)
-        }
-    } catch (e) {
-        console.error(e);
-        hooks.globalAlertTip('导入外部插件失败', {
-            type: 'error',
-            timeout: 3000
-        })
-    }
-}
+export default async function registerExternalPlugin(
+   _VDirectories: VirtualDirectory[],
+   VFiles: VirtualFile[],
+   hooks: usePluginHooksType
+) {
+   try {
+      const targetPluginVFile = VFiles[0] as VirtualFile
+      const plugin = (await import(
+         /* @vite-ignore */ targetPluginVFile.url
+      )) as {
+         default: registerComponentOption | Plugin
+         type: PluginExportType
+         key?: string
+      }
+      const pc = hooks.getPluginCenter()
+      if (plugin.type === PluginExportType.default) {
+         if (checkNormalPlugin(plugin.default) === false) {
+            throw '插件不合法'
+         }
+         pc.register(plugin.key ?? `${Math.random()}`, plugin.default as Plugin)
+      } else {
+         if (checkComponentPlugin(plugin.default) === false) {
+            throw '插件不合法'
+         }
+         pc.registerComponent(plugin.default as registerComponentOption)
+      }
+   } catch (e) {
+      console.error(e)
+      hooks.globalAlertTip('导入外部插件失败', {
+         type: 'error',
+         timeout: 3000
+      })
+   }
+}