feat: 添加prettier格式化代码

.prettierrc.js

@@ -0,0 +1,104 @@
+export default {
+    /**
+     * 换行宽度，当代码宽度达到多少时换行
+     * @default 80
+     * @type {number}
+     */
+    printWidth: 80,
+    /**
+     * 缩进的空格数量
+     * @default 2
+     * @type {number}
+     */
+    tabWidth: 3,
+    /**
+     * 是否使用制表符代替空格
+     * @default false
+     * @type {boolean}
+     */
+    useTabs: false,
+    /**
+     * 是否在代码块结尾加上分号
+     * @default true
+     * @type {boolean}
+     */
+    semi: false,
+    /**
+     * 是否使用单引号替代双引号
+     * @default false
+     * @type {boolean}
+     */
+    singleQuote: true,
+    /**
+     * 对象属性的引号处理
+     * @default "as-needed"
+     * @type {"as-needed"|"consistent"|"preserve"}
+     */
+    quoteProps: 'as-needed',
+    /**
+     * jsx中是否使用单引号替代双引号
+     * @default false
+     * @type {boolean}
+     */
+    jsxSingleQuote: true,
+    /**
+     * 在jsx中使用是否单引号代替双引号
+     * @default false
+     * @type {boolean}
+     */
+    /**
+     * 末尾是否加上逗号
+     * @default "es5"
+     * @type {"es5"|"none"|"all"}
+     */
+    trailingComma: 'none',
+    /**
+     * 在对象，数组括号与文字之间加空格 "{ foo: bar }"
+     * @default true
+     * @type {boolean}
+     */
+    bracketSpacing: true,
+    /**
+     * 把多行HTML (HTML, JSX, Vue, Angular)元素的>放在最后一行的末尾，而不是单独放在下一行(不适用于自关闭元素)。
+     * @default false
+     * @type {boolean}
+     */
+    bracketSameLine: false,
+    /**
+     * 当箭头函数只有一个参数是否加括号
+     * @default "always"
+     * @type {"always"|"avoid"}
+     */
+    arrowParens: 'always',
+    /**
+     * 为HTML、Vue、Angular和Handlebars指定全局空格敏感性
+     * @default "css"
+     * @type {"css"|"strict"|"ignore"}
+     */
+    htmlWhitespaceSensitivity: 'ignore',
+    /**
+     * 是否缩进Vue文件中的<script>和<style>标记内的代码。有些人(比如Vue的创建者)不使用缩进来保存缩进级别，但这可能会破坏编辑器中的代码折叠。
+     * @default "always"
+     * @type {"always"|"avoid"}
+     */
+    vueIndentScriptAndStyle: false,
+    /**
+     * 文件结束符
+     * @default "lf"
+     * @type {"lf"|"crlf"|"cr"|"auto"}
+     */
+    endOfLine: 'crlf',
+    /**
+     * 因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
+     */
+    proseWrap: 'never',
+    // 是否使用根目录下的EditorConfig配置文件
+    useEditorConfig: false,
+    /**
+     * HTML\VUE\JSX每行只有单个属性
+     * @default true
+     * @type {boolean}
+     */
+    singleAttributePerLine: true,
+    disableLanguages: ['html']
+}

package.json

@@ -9,7 +9,8 @@
         "build": "vue-tsc -b && vite build",
         "build:auto": "pnpm run build && go env -w GOOS=windows GOARCH=amd64 && rm -rf ./src-server/web/* && cp -r ./dist/* ./src-server/web/ && cd ./src-server && go env -w GOOS=windows && go build -o ../miao-directory.exe",
         "build:auto:release": "pnpm run build && rm -rf ./src-server/web/* && cp -r ./dist/* ./src-server/web/ && cd ./src-server && go env -w GOOS=windows GOARCH=amd64 && go build -o ../miao-directory-amd64-win.exe && go env -w GOOS=linux GOARCH=amd64 && go build -o ../miao-directory-amd64-linux",
-        "preview": "vite preview"
+        "preview": "vite preview",
+        "format": "prettier --write src/"
     },
     "dependencies": {
         "@codemirror/lang-go": "^6.0.1",
@@ -51,6 +52,8 @@
         "@types/node": "^22.1.0",
         "@types/pdfjs-dist": "^2.10.378",
         "@vitejs/plugin-vue": "^5.1.2",
+        "prettier": "^3.4.2",
+        "prettier-plugin-vue": "^1.1.6",
         "rollup-plugin-visualizer": "^5.12.0",
         "typescript": "^5.5.3",
         "vite": "^5.4.0",

pnpm-lock.yaml

@@ -120,6 +120,12 @@ importers:
       '@vitejs/plugin-vue':
         specifier: ^5.1.2
         version: 5.1.2(vite@5.4.0(@types/node@22.1.0)(sass@1.77.8))(vue@3.5.0(typescript@5.5.4))
+      prettier:
+        specifier: ^3.4.2
+        version: 3.4.2
+      prettier-plugin-vue:
+        specifier: ^1.1.6
+        version: 1.1.6
       rollup-plugin-visualizer:
         specifier: ^5.12.0
         version: 5.12.0(rollup@4.20.0)
@@ -1101,6 +1107,19 @@ packages:
     resolution: {integrity: sha512-Aweb9unOEpQ3ezu4Q00DPvvM2ZTUitJdNKeP/+uQgr1IBIqu574IaZoURId7BKtWMREwzKa9OgzPzezWGPWFQw==}
     engines: {node: ^10 || ^12 || >=14}
 
+  prettier-plugin-vue@1.1.6:
+    resolution: {integrity: sha512-trQ/oY+6hSsGe2zPIFThXMIM0TbxMEbk2VOrKjwHWuSz7OEo0rnumbz9a47OxVPCaAnGY9vZG8qDTiTmk9bq0A==}
+
+  prettier@2.8.8:
+    resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+
+  prettier@3.4.2:
+    resolution: {integrity: sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==}
+    engines: {node: '>=14'}
+    hasBin: true
+
   promise-polyfill@7.1.0:
     resolution: {integrity: sha512-P6NJ2wU/8fac44ENORsuqT8TiolKGB2u0fEClPtXezn7w5cmLIjM/7mhPlTebke2EPr6tmqZbXvnX0TxwykGrg==}
 
@@ -2458,6 +2477,14 @@ snapshots:
       picocolors: 1.0.1
       source-map-js: 1.2.0
 
+  prettier-plugin-vue@1.1.6:
+    dependencies:
+      prettier: 2.8.8
+
+  prettier@2.8.8: {}
+
+  prettier@3.4.2: {}
+
   promise-polyfill@7.1.0: {}
 
   proxy-from-env@1.1.0: {}

src/App.vue

@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { computed, onMounted, provide, ref, shallowRef, useTemplateRef } from 'vue'
+import {
+   computed,
+   onMounted,
+   provide,
+   ref,
+   shallowRef,
+   useTemplateRef
+} from 'vue'
 import { NIcon, NScrollbar, NDropdown } from 'naive-ui'
 import {
    EyeOffOutline,
@@ -72,12 +79,16 @@ const handleClickTitle = (index: number) => {
    }
 }
 
-const openMenuOption = computed(() => [
+const openMenuOption = computed(
+   () =>
+      [
          {
             label: '分享',
             key: 'share',
             icon: renderIcon(QrCodeOutline)
-    }, pluginCenter.value ? {
+         },
+         pluginCenter.value
+            ? {
                  label: '插件',
                  key: 'plugin',
                  children: [
@@ -92,8 +103,10 @@ const openMenuOption = computed(() => [
                        }))
                  ],
                  icon: renderIcon(ExtensionPuzzleOutline)
-    } : undefined
+              }
-].filter(v => v) as DropdownMixedOption[])
+            : undefined
+      ].filter((v) => v) as DropdownMixedOption[]
+)
 
 const handleMenuSelect = async (key: string) => {
    if (key === 'share') {
@@ -124,14 +137,25 @@ provide('rootDirectory', rootDirectory)
 </script>
 
 <template>
-    <div class="view" ref="viewRef">
+   <div
+      class="view"
+      ref="viewRef"
+   >
       <miao-message-provider ref="messageProviderRef">
          <div class="view-controller">
             <n-scrollbar x-scrollable>
                <div class="tabs-container">
                   <transition-group name="tab">
-                            <div class="tab" v-for="(view, index) of views._views" :key="view.id">
+                     <div
-                                <span class="tab-title" :title="view.title" @click="handleClickTitle(index)">
+                        class="tab"
+                        v-for="(view, index) of views._views"
+                        :key="view.id"
+                     >
+                        <span
+                           class="tab-title"
+                           :title="view.title"
+                           @click="handleClickTitle(index)"
+                        >
                            {{
                               view.title.length > 5 && 0
                                  ? `${view.title.substring(0, 5)}...`
@@ -139,12 +163,26 @@ provide('rootDirectory', rootDirectory)
                            }}
                         </span>
                         <div class="tab-control">
-                                    <div class="tab-point" :style="{ backgroundColor: view.color }"></div>
+                           <div
-                                    <n-icon class="tag-control-icon icon" @click="view.switchShow()">
+                              class="tab-point"
-                                        <EyeOutline v-show="view.visible" class="icon-inner" />
+                              :style="{ backgroundColor: view.color }"
-                                        <EyeOffOutline v-show="!view.visible" class="icon-inner" />
+                           ></div>
+                           <n-icon
+                              class="tag-control-icon icon"
+                              @click="view.switchShow()"
+                           >
+                              <EyeOutline
+                                 v-show="view.visible"
+                                 class="icon-inner"
+                              />
+                              <EyeOffOutline
+                                 v-show="!view.visible"
+                                 class="icon-inner"
+                              />
                            </n-icon>
-                                    <n-icon class="tag-control-icon icon" @click="
+                           <n-icon
+                              class="tag-control-icon icon"
+                              @click="
                                  createView(
                                     view.component,
                                     view.name,
@@ -152,10 +190,15 @@ provide('rootDirectory', rootDirectory)
                                     view.currentFiles,
                                     index + 1
                                  )
-                                        " v-if="view.allowCopy">
+                              "
+                              v-if="view.allowCopy"
+                           >
                               <CopyOutline />
                            </n-icon>
-                                    <n-icon class="tag-control-icon icon" @click="deleteView(index)">
+                           <n-icon
+                              class="tag-control-icon icon"
+                              @click="deleteView(index)"
+                           >
                               <CloseOutline class="icon-inner" />
                            </n-icon>
                         </div>
@@ -165,7 +208,11 @@ provide('rootDirectory', rootDirectory)
             </n-scrollbar>
             <div class="view-controller-menu">
                <div class="view-controller-menu-item">
-                        <n-dropdown trigger="click" :options="openMenuOption" @select="handleMenuSelect">
+                  <n-dropdown
+                     trigger="click"
+                     :options="openMenuOption"
+                     @select="handleMenuSelect"
+                  >
                      <n-icon class="icon">
                         <EllipsisVertical class="icon-inner" />
                      </n-icon>
@@ -175,20 +222,37 @@ provide('rootDirectory', rootDirectory)
          </div>
          <div class="view-container">
             <!-- <transition-group name="page"> -->
-                <div class="view-container-item" v-for="(view, index) of views._views"
+            <div
-                    :class="!view.visible ? 'view-container-item-hidden' : ''" :key="view.id">
+               class="view-container-item"
-                    <component :is="view.component" v-model:current-directories="view.currentDirectories"
+               v-for="(view, index) of views._views"
-                        v-model:current-files="view.currentFiles" :id="view.id" :color="view.color" :view="view"
+               :class="!view.visible ? 'view-container-item-hidden' : ''"
-                        :views="views" @exit="deleteView(index)"></component>
+               :key="view.id"
+            >
+               <component
+                  :is="view.component"
+                  v-model:current-directories="view.currentDirectories"
+                  v-model:current-files="view.currentFiles"
+                  :id="view.id"
+                  :color="view.color"
+                  :view="view"
+                  :views="views"
+                  @exit="deleteView(index)"
+               ></component>
             </div>
             <!-- </transition-group> -->
          </div>
       </miao-message-provider>
    </div>
    <!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
-    <MiaoMask v-model:show="showModal" @click="showModal = false">
+   <MiaoMask
-        <component @click="(e: any) => e.stopPropagation()" :is="modalData?.component" v-bind="modalData?.props">
+      v-model:show="showModal"
-        </component>
+      @click="showModal = false"
+   >
+      <component
+         @click="(e: any) => e.stopPropagation()"
+         :is="modalData?.component"
+         v-bind="modalData?.props"
+      ></component>
    </MiaoMask>
 </template>
 
@@ -197,7 +261,6 @@ $controller-height: 25px;
 $tag-width: 170px;
 
 .view {
-
    background-color: #ffffff;
    position: relative;
    height: 100%;
@@ -326,7 +389,9 @@ $tag-width: 170px;
          height: 100%;
          min-width: 180px;
          opacity: 1;
-            transition: flex .25s ease, opacity .25s ease;
+         transition:
+            flex 0.25s ease,
+            opacity 0.25s ease;
       }
 
       .view-container-item-hidden {
@@ -364,7 +429,6 @@ $tag-width: 170px;
 .view {
    .view-controller {
       .tabs-container {
-
          .tab-move,
          .tab-enter-active {
             transition: all 0.2s ease;

src/class/PluginCenter.ts

@@ -1,61 +1,70 @@
-import useVirtualPages from "@/hooks/useVirtualPages";
+import useVirtualPages from '@/hooks/useVirtualPages'
-import VirtualDirectory, { VirtualFile } from "./VirtualDirectory";
+import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
-import { ShallowRef, shallowRef } from "vue";
+import { ShallowRef, shallowRef } from 'vue'
-import { alertTipType, usePluginHooksType } from "@/types/type";
+import { alertTipType, usePluginHooksType } from '@/types/type'
-import VirtualPage, { VirtualPages } from "./VirtualPage";
+import VirtualPage, { VirtualPages } from './VirtualPage'
-import useRootVDirectory from "@/hooks/useRootVDirectory";
+import useRootVDirectory from '@/hooks/useRootVDirectory'
 
 export enum PluginGroup {
-	default = "default",
+   default = 'default',
-	mainMenu = "mainMenu",
+   mainMenu = 'mainMenu',
    // 导入的时候会立即执行函数一次
-	immediately = "immediately"
+   immediately = 'immediately'
 }
 
 export interface registerComponentOption {
-	key: string;
+   key: string
-	name: string;
+   name: string
-	icon?: any;
+   icon?: any
-	getComponent: () => Promise<any>;
+   getComponent: () => Promise<any>
-	group?: PluginGroup[];
+   group?: PluginGroup[]
-	filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean;
+   filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
-	disable?: boolean;
+   disable?: boolean
-	exitConfirm?: boolean;
+   exitConfirm?: boolean
    // 若为true，则只会创建一个页面，当存在已创建页面则会直接将VFile和VDir加到curr里面
-	single?: boolean;
+   single?: boolean
-	priority?: number;
+   priority?: number
 }
 
 export type Plugin = {
    // 用于显示的名字
-	name: string;
+   name: string
    // 代表插件的icon
-	icon?: ShallowRef<any>;
+   icon?: ShallowRef<any>
    // 是否禁用插件
-	disable: boolean;
+   disable: boolean
    // 插件所属的group，用于区分插件使用的场合
-	group: PluginGroup[];
+   group: PluginGroup[]
    // 插件优先级
-	priority: number;
+   priority: number
    // 判断在未禁用时是否可以使用这个组件
    // 使用组件即调用下面的func
-	filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[], VPages: VirtualPages) => boolean;
+   filter: (
-	func: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[], hooks: usePluginHooksType, ...args: any[]) => void;
+      VDirectories: VirtualDirectory[],
-};
+      VFiles: VirtualFile[],
+      VPages: VirtualPages
+   ) => boolean
+   func: (
+      VDirectories: VirtualDirectory[],
+      VFiles: VirtualFile[],
+      hooks: usePluginHooksType,
+      ...args: any[]
+   ) => void
+}
 
 export default class PluginCenter {
    constructor(globalAlertTip: alertTipType) {
-		this.pluginsMap = {};
+      this.pluginsMap = {}
-		this.globalAlertTip = globalAlertTip;
+      this.globalAlertTip = globalAlertTip
    }
    pluginsMap: {
-		[key: string]: Plugin;
+      [key: string]: Plugin
-	};
+   }
 
-	globalAlertTip: alertTipType;
+   globalAlertTip: alertTipType
 
    register(key: string, plugin: Plugin) {
-		this.pluginsMap[key] = plugin;
+      this.pluginsMap[key] = plugin
       if (plugin.group.includes(PluginGroup.immediately)) {
          this.usePlugin(key, [], [], this.usePluginHook)
       }
@@ -69,9 +78,20 @@ export default class PluginCenter {
     * 便捷地注册一个组件为插件，触发时直接用新页面打开，页面名为key
     */
    registerComponent(option: registerComponentOption): void {
-		const { key, name, getComponent, icon, filter, group = [PluginGroup.default], disable = false, exitConfirm = false, single = false, priority = 0 } = option;
+      const {
-		let _component: any;
+         key,
-		const views = useVirtualPages();
+         name,
+         getComponent,
+         icon,
+         filter,
+         group = [PluginGroup.default],
+         disable = false,
+         exitConfirm = false,
+         single = false,
+         priority = 0
+      } = option
+      let _component: any
+      const views = useVirtualPages()
       this.register(key, {
          name,
          filter,
@@ -79,59 +99,69 @@ export default class PluginCenter {
          group,
          disable,
          priority,
-			func: async (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => {
+         func: async (
+            VDirectories: VirtualDirectory[],
+            VFiles: VirtualFile[]
+         ) => {
             if (filter(VDirectories, VFiles) === false) {
-					return;
+               return
             }
 
             if (_component === undefined) {
-					const setAlertTip = this.globalAlertTip(`加载 ${name} 插件中`);
+               const setAlertTip = this.globalAlertTip(`加载 ${name} 插件中`)
-					_component = await getComponent();
+               _component = await getComponent()
                setAlertTip &&
                   setAlertTip(`加载 ${name} 插件完成`, {
-							type: "success",
+                     type: 'success',
                      timeout: 2000
-						});
+                  })
             }
-				const _findRes = views.find(_component) as VirtualPage[];
+            const _findRes = views.find(_component) as VirtualPage[]
             if (single && _findRes.length !== 0) {
-					const view = _findRes[0];
+               const view = _findRes[0]
-					view.currentFiles = [...view.currentFiles, ...VFiles];
+               view.currentFiles = [...view.currentFiles, ...VFiles]
-					view.currentDirectories = [...view.currentDirectories, ...VDirectories];
+               view.currentDirectories = [
+                  ...view.currentDirectories,
+                  ...VDirectories
+               ]
             } else {
                views.push(_component, key, VDirectories, VFiles, {
                   VirtualPageOption: {
                      exitConfirm,
                      allowCopy: single === false
                   }
-					});
+               })
             }
          }
-		});
+      })
    }
 
    getUsablePlugin(
       VDirectories: VirtualDirectory[],
       VFiles: VirtualFile[],
       option?: {
-			group?: PluginGroup[];
+         group?: PluginGroup[]
       }
    ) {
-		const { group = [PluginGroup.default] } = option ?? {};
+      const { group = [PluginGroup.default] } = option ?? {}
-		const usableList = [];
+      const usableList = []
-		const views = useVirtualPages();
+      const views = useVirtualPages()
       for (let key of Object.keys(this.pluginsMap)) {
-			const _plugin = this.pluginsMap[key];
+         const _plugin = this.pluginsMap[key]
-			if (!_plugin.disable && _plugin.group.filter(v => group.includes(v)).length > 0 && _plugin.filter(VDirectories, VFiles, views)) {
+         if (
-				usableList.push(key);
+            !_plugin.disable &&
+            _plugin.group.filter((v) => group.includes(v)).length > 0 &&
+            _plugin.filter(VDirectories, VFiles, views)
+         ) {
+            usableList.push(key)
          }
       }
-		const res = usableList.map(key => ({
+      const res = usableList.map((key) => ({
          key,
          ...this.pluginsMap[key]
-		}));
+      }))
-		res.sort((a, b) => b.priority - a.priority);
+      res.sort((a, b) => b.priority - a.priority)
-		return res;
+      return res
    }
 
    get usePluginHook(): usePluginHooksType {
@@ -143,13 +173,23 @@ export default class PluginCenter {
       }
    }
 
-	usePlugin(key: string, VDirectories?: VirtualDirectory[], VFiles?: VirtualFile[], ...args: any[]): void;
+   usePlugin(
-	usePlugin(key: string, VDirectories?: VirtualDirectory[], VFiles?: VirtualFile[], ...args: any[]) {
+      key: string,
+      VDirectories?: VirtualDirectory[],
+      VFiles?: VirtualFile[],
+      ...args: any[]
+   ): void
+   usePlugin(
+      key: string,
+      VDirectories?: VirtualDirectory[],
+      VFiles?: VirtualFile[],
+      ...args: any[]
+   ) {
       this.pluginsMap[key].func(
          VDirectories ?? [],
          VFiles ?? [],
          this.usePluginHook,
          ...args
-		);
+      )
    }
 }

src/class/UploadQueue.ts

@@ -1,98 +1,102 @@
-import generateId from "@/hooks/generateId";
+import generateId from '@/hooks/generateId'
-import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
+import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
-import VirtualDirectory from "./VirtualDirectory";
+import VirtualDirectory from './VirtualDirectory'
 
-const miaoFetchApi = useMiaoFetchApi();
+const miaoFetchApi = useMiaoFetchApi()
 
 export class UploadQueueItem {
    constructor(
       file: File,
       targetDirectory: VirtualDirectory,
       config?: {
-			onSuccess?: () => void;
+         onSuccess?: () => void
-			onFailed?: () => void;
+         onFailed?: () => void
       }
    ) {
-		this.file = file;
+      this.file = file
-		this.targetDirectory = targetDirectory;
+      this.targetDirectory = targetDirectory
-		this.uid = generateId();
+      this.uid = generateId()
-		this.status = "waiting";
+      this.status = 'waiting'
-		this.process = 0;
+      this.process = 0
-		this.onSuccess = config && config.onSuccess;
+      this.onSuccess = config && config.onSuccess
-		this.onFailed = config && config.onFailed;
+      this.onFailed = config && config.onFailed
    }
-	uid: number;
+   uid: number
-	file: File;
+   file: File
-	targetDirectory: VirtualDirectory;
+   targetDirectory: VirtualDirectory
-	status: "waiting" | "uploading" | "success" | "failed";
+   status: 'waiting' | 'uploading' | 'success' | 'failed'
-	process: number;
+   process: number
-	failedReason: unknown | undefined;
+   failedReason: unknown | undefined
 
-	onSuccess?: () => void;
+   onSuccess?: () => void
-	onFailed?: () => void;
+   onFailed?: () => void
 
-	_abort: (() => void | undefined) | undefined;
+   _abort: (() => void | undefined) | undefined
-	_status: Promise<any> | undefined;
+   _status: Promise<any> | undefined
 
    /**
     * 开始上传文件
     */
    startUpload() {
-		if (this.status === "uploading") {
+      if (this.status === 'uploading') {
-			return;
+         return
       }
-		const { abort, response } = miaoFetchApi.upload(this.file, this.targetDirectory, {
+      const { abort, response } = miaoFetchApi.upload(
-			onProcess: percent => {
+         this.file,
-				this.process = percent;
+         this.targetDirectory,
+         {
+            onProcess: (percent) => {
+               this.process = percent
             }
-		});
+         }
-		this._abort = abort;
+      )
-		this._status = response;
+      this._abort = abort
-		this.status = "uploading";
+      this._status = response
+      this.status = 'uploading'
       response
          .then(() => {
-				this.status = "success";
+            this.status = 'success'
-				this.onSuccess && this.onSuccess();
+            this.onSuccess && this.onSuccess()
-				this._abort = undefined;
+            this._abort = undefined
-				this._status = undefined;
+            this._status = undefined
+         })
+         .catch((e) => {
+            this.status = 'failed'
+            this.failedReason = e
+            this.onFailed && this.onFailed()
          })
-			.catch(e => {
-				this.status = "failed";
-				this.failedReason = e;
-				this.onFailed && this.onFailed();
-			});
    }
 
    /**
     * 终止上传文件
     */
    abortUpload() {
-		this._abort && this._abort();
+      this._abort && this._abort()
-		this.status = "failed";
+      this.status = 'failed'
-		this.failedReason = "abort";
+      this.failedReason = 'abort'
    }
 }
 
 export default class UploadQueue {
    constructor() {
-		this.uid = generateId();
+      this.uid = generateId()
-		this.queue = [];
+      this.queue = []
-		this.mode = "serial";
+      this.mode = 'serial'
    }
-	uid: number;
+   uid: number
-	queue: UploadQueueItem[];
+   queue: UploadQueueItem[]
-	current: UploadQueueItem | undefined;
+   current: UploadQueueItem | undefined
 
    // 未来再去实现，目前就是串行的
    // 好像也不用去实现
-	mode: "serial" | "parallel";
+   mode: 'serial' | 'parallel'
    get status() {
       for (let item of this.queue) {
-			if (item.status === "uploading") {
+         if (item.status === 'uploading') {
-				return "busy";
+            return 'busy'
          }
       }
-		return "free";
+      return 'free'
    }
 
    /**
@@ -100,8 +104,8 @@ export default class UploadQueue {
     */
    get nextUplpadItem() {
       for (let item of this.queue) {
-			if (item.status === "waiting") {
+         if (item.status === 'waiting') {
-				return item;
+            return item
          }
       }
    }
@@ -110,11 +114,11 @@ export default class UploadQueue {
     * 开始串行的上传循环
     */
    loop() {
-		if (this.status === "busy") {
+      if (this.status === 'busy') {
-			return;
+         return
       }
       if (this.nextUplpadItem) {
-			this.nextUplpadItem.startUpload();
+         this.nextUplpadItem.startUpload()
       }
    }
 
@@ -132,34 +136,34 @@ export default class UploadQueue {
          /**
           * 每个文件上传完成以后都会触发一遍的回调函数
           */
-			onFinish?: () => void;
+         onFinish?: () => void
          /**
           * 是否立即开始上传，若否则按队列顺序一个一个上传
           */
-			immediately?: boolean;
+         immediately?: boolean
       }
    ) {
-		const onFinish = option?.onFinish;
+      const onFinish = option?.onFinish
-		const immediately = option?.immediately ?? false;
+      const immediately = option?.immediately ?? false
-		const uploadQueue = files.map(file => {
+      const uploadQueue = files.map((file) => {
          return new UploadQueueItem(file, targetDirectory, {
             onSuccess: () => {
-					this.loop();
+               this.loop()
-					onFinish && onFinish();
+               onFinish && onFinish()
             },
             onFailed: () => {
-					this.loop();
+               this.loop()
             }
-			});
+         })
-		});
+      })
-		this.queue.push(...uploadQueue);
+      this.queue.push(...uploadQueue)
       if (!immediately) {
-			this.loop();
+         this.loop()
       } else {
-			uploadQueue.forEach(item => {
+         uploadQueue.forEach((item) => {
-				item.startUpload();
+            item.startUpload()
-			});
+         })
       }
-		return uploadQueue;
+      return uploadQueue
    }
 }

src/class/VirtualPage.ts

@@ -13,13 +13,7 @@ export interface ViewsPushOption {
 }
 
 const getRandomWebSafeColor = (() => {
-    const webSafeColors = [
+   const webSafeColors = ['#009900', '#999900', '#009999', '#990099', '#0000ee']
-        '#009900',
-        '#999900',
-        '#009999',
-        '#990099',
-        '#0000ee'
-    ]
    let counter = 0
    return () => {
       const color = webSafeColors[counter % webSafeColors.length]
@@ -169,18 +163,18 @@ export class VirtualPages {
    /**
     * 返回第一个使用此组件的页面
     */
-    find(component: Component) : VirtualPage[]
+   find(component: Component): VirtualPage[]
    /**
     * 通过页面名查找
     */
-    find(name: string) : VirtualPage[]
+   find(name: string): VirtualPage[]
 
    find(input: unknown) {
       // console.log(this)
       if (typeof input === 'string') {
-            return this._views.filter(v => v.component.name === input);
+         return this._views.filter((v) => v.component.name === input)
       } else {
-            return this._views.filter(v => v.component === input);
+         return this._views.filter((v) => v.component === input)
       }
    }
 }

src/components/miaoAlertTipProvider.vue

@@ -1,36 +1,57 @@
 <template>
-    <div class="miao-message-provider" ref="rootRef">
+   <div
+      class="miao-message-provider"
+      ref="rootRef"
+   >
       <slot></slot>
-        <transition-group name="message-fade" tag="div" class="miao-message-provider-container">
+      <transition-group
-            <div class="miao-message" v-for="msg in messageList" :key="msg.id"
+         name="message-fade"
-                :style="{ maxWidth: maxMessageWidth + 'px' }">
+         tag="div"
-                <n-icon class="miao-message-item" size="18" :color="msg.iconColor">
+         class="miao-message-provider-container"
+      >
+         <div
+            class="miao-message"
+            v-for="msg in messageList"
+            :key="msg.id"
+            :style="{ maxWidth: maxMessageWidth + 'px' }"
+         >
+            <n-icon
+               class="miao-message-item"
+               size="18"
+               :color="msg.iconColor"
+            >
                <component :is="msg.icon"></component>
             </n-icon>
-                <div class="miao-message-item miao-message-item-content">{{ msg.content }}</div>
+            <div class="miao-message-item miao-message-item-content">
+               {{ msg.content }}
+            </div>
          </div>
       </transition-group>
    </div>
 </template>
 
 <script setup lang="ts">
-import generateId from '@/hooks/generateId';
+import generateId from '@/hooks/generateId'
-import { NIcon } from 'naive-ui';
+import { NIcon } from 'naive-ui'
-import { computed, onMounted, ref, shallowReactive } from 'vue';
+import { computed, onMounted, ref, shallowReactive } from 'vue'
-import { InformationCircle, CheckmarkCircle, CloseCircle } from '@vicons/ionicons5'
+import {
-import { AlertTipMessageOptions } from '@/types/type';
+   InformationCircle,
+   CheckmarkCircle,
+   CloseCircle
+} from '@vicons/ionicons5'
+import { AlertTipMessageOptions } from '@/types/type'
 
 interface Message {
-    icon: any,
+   icon: any
-    timer: any,
+   timer: any
-    iconColor: string,
+   iconColor: string
-    content: string,
+   content: string
 }
 
 const iconMap = {
-    'info': { icon: InformationCircle, color: 'blue' },
+   info: { icon: InformationCircle, color: 'blue' },
-    'success': { icon: CheckmarkCircle, color: 'green' },
+   success: { icon: CheckmarkCircle, color: 'green' },
-    'error': { icon: CloseCircle, color: 'red' },
+   error: { icon: CloseCircle, color: 'red' }
 }
 
 const messageMap = shallowReactive<Record<string, Message | undefined>>({})
@@ -38,9 +59,9 @@ const rootRef = ref<HTMLDivElement>()
 const maxMessageWidth = ref<number>(-1)
 
 const messageList = computed(() => {
-    return Object.keys(messageMap).map(v => ({
+   return Object.keys(messageMap).map((v) => ({
       id: v,
-        ...messageMap[v],
+      ...messageMap[v]
    }))
 })
 const alertTip = (content: string, options?: AlertTipMessageOptions) => {
@@ -70,18 +91,17 @@ onMounted(async () => {
    // setTimeout(() => {
    //     set('miao', { type: 'success' })
    // }, 1000);
-    const observer = new ResizeObserver(entries => {
+   const observer = new ResizeObserver((entries) => {
       for (let entry of entries) {
-            maxMessageWidth.value = entry.contentRect.width * 0.8;
+         maxMessageWidth.value = entry.contentRect.width * 0.8
       }
-    });
+   })
    if (rootRef.value) {
-        observer.observe(rootRef.value);
+      observer.observe(rootRef.value)
    }
 })
 
-
+defineExpose({ alertTip })
-defineExpose({ alertTip });
 </script>
 
 <style scoped lang="scss">
@@ -110,7 +130,10 @@ defineExpose({ alertTip });
          background-color: rgb(249, 249, 249);
          padding: 5px 10px;
          background-color: rgb(255 255 255);
-            box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
+         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;
          user-select: none;
          margin-top: 10px;

src/components/miaoContextMenu.vue

@@ -1,18 +1,31 @@
 <!-- 基于naiveui的下拉菜单实现的自定义下拉菜单 -->
 <!-- 支持长按和右键呼出下拉菜单 -->
 <template>
-    <div class="main" @contextmenu="handleContextMenu" @mouseleave="handleMainMouseLeave">
+   <div
+      class="main"
+      @contextmenu="handleContextMenu"
+      @mouseleave="handleMainMouseLeave"
+   >
       <slot></slot>
    </div>
-    <n-dropdown placement="bottom-start" trigger="manual" :x="x" :y="y" :options="props.options"
+   <n-dropdown
-        :show="showContextMenu > 0" :on-clickoutside="onClickoutside" @select="handleSelect" @mouseleave="
+      placement="bottom-start"
-            showContextMenu -= 1" @mouseenter="showContextMenu += 1" />
+      trigger="manual"
+      :x="x"
+      :y="y"
+      :options="props.options"
+      :show="showContextMenu > 0"
+      :on-clickoutside="onClickoutside"
+      @select="handleSelect"
+      @mouseleave="showContextMenu -= 1"
+      @mouseenter="showContextMenu += 1"
+   />
 </template>
 
 <script setup lang="ts">
-import { NDropdown } from 'naive-ui/es/dropdown';
+import { NDropdown } from 'naive-ui/es/dropdown'
-import { DropdownOption } from 'naive-ui/es/dropdown';
+import { DropdownOption } from 'naive-ui/es/dropdown'
-import { nextTick, ref } from 'vue';
+import { nextTick, ref } from 'vue'
 
 const props = defineProps<{
    options: DropdownOption[]
@@ -76,7 +89,6 @@ const handleContextMenu = (e: MouseEvent) => {
 //     }
 
 // }
-
 </script>
 
 <style>

src/components/miaoDraggableDiv.vue

@@ -1,11 +1,15 @@
 <template>
-    <div ref="divRef" @dragstart="onDs" :draggable="isDraggable">
+   <div
+      ref="divRef"
+      @dragstart="onDs"
+      :draggable="isDraggable"
+   >
       <slot></slot>
    </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue'
 // import Sortable from 'sortablejs'
 
 const props = defineProps<{
@@ -24,9 +28,10 @@ const onDs = (e: DragEvent) => {
 
 onMounted(() => {
    divRef?.value?.addEventListener('dragstart', function (ev) {
-        var img = new Image();
+      var img = new Image()
-        img.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath /%3E%3C/svg%3E";
+      img.src =
-        ev?.dataTransfer?.setDragImage(img, 0, 0);
+         "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath /%3E%3C/svg%3E"
+      ev?.dataTransfer?.setDragImage(img, 0, 0)
    })
 })
 </script>

src/components/miaoDropHandler.vue

@@ -3,7 +3,8 @@
       class="container"
       @dragover="handleDragOver"
       @dragleave="handleDragLeave"
-        @drop="handleDrop">
+      @drop="handleDrop"
+   >
       <slot></slot>
       <miao-mask v-model:show="showMask"></miao-mask>
    </div>
@@ -71,7 +72,7 @@ const removeDirectory = async (files: File[]) => {
 const check = (event: DragEvent) => {
    return (
       [
-            ...(event.dataTransfer?.types?.filter(v=>v === 'Files') ?? []),
+         ...(event.dataTransfer?.types?.filter((v) => v === 'Files') ?? []),
          ...(dataBus.get('dragData_vFiles') ?? []),
          ...(dataBus.get('dragData_vDirectory') ?? [])
       ].length !== 0

src/components/miaoLazyDiv.vue

@@ -1,14 +1,26 @@
 <!-- 只适合用于渲染过程较为复杂的组件，不然可能得不偿失
      这么泛用的组件，性能差点也能理解 -->
 <template>
-    <div class="miao-lazy" ref="miaoLazyRoot"
+   <div
-        :style="!show ? { minHeight: _autoHeight !== undefined ? _autoHeight : props.minHeight, minWidth, margin } : {}">
+      class="miao-lazy"
+      ref="miaoLazyRoot"
+      :style="
+         !show
+            ? {
+                 minHeight:
+                    _autoHeight !== undefined ? _autoHeight : props.minHeight,
+                 minWidth,
+                 margin
+              }
+            : {}
+      "
+   >
       <slot v-if="show" />
    </div>
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref } from 'vue';
+import { onBeforeUnmount, onMounted, ref } from 'vue'
 
 const props = defineProps({
    // disable: {
@@ -17,20 +29,20 @@ const props = defineProps({
    // },
    disableLazy: {
       type: Boolean,
-        default: false,
+      default: false
    },
    // 仅在内容未加载时生效，用于占位
    minHeight: {
       type: String,
-        default: 'none',
+      default: 'none'
    },
    minWidth: {
       type: String,
-        default: 'none',
+      default: 'none'
    },
    margin: {
       type: String,
-        default: 'none',
+      default: 'none'
    },
    autoHeight: {
       type: Boolean,
@@ -97,9 +109,10 @@ onMounted(() => {
    if (show.value === false) {
       let options = {
          threshold: 0
-        };
+      }
 
-        let observer: IntersectionObserver | undefined = new IntersectionObserver((entries) => {
+      let observer: IntersectionObserver | undefined = new IntersectionObserver(
+         (entries) => {
             if (entries[0].isIntersecting) {
                showSlot()
                // miaoLazyRoot.value && observer?.unobserve(miaoLazyRoot.value)
@@ -107,8 +120,10 @@ onMounted(() => {
             } else {
                hideSlot()
             }
-        }, options);
+         },
-        miaoLazyRoot.value && observer.observe(miaoLazyRoot.value);
+         options
+      )
+      miaoLazyRoot.value && observer.observe(miaoLazyRoot.value)
    }
 })
 

src/components/miaoMask.vue

@@ -1,17 +1,23 @@
 <template>
    <transition name="transition">
-    <div class="mask-body" ref="maskBodyRef" v-show="showMask">
+      <div
+         class="mask-body"
+         ref="maskBodyRef"
+         v-show="showMask"
+      >
          <slot></slot>
       </div>
    </transition>
 </template>
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref } from 'vue'
 
 const maskBodyRef = ref<HTMLDivElement>()
 
-const showMask = defineModel<boolean | number>('show', { default: false, required: true })
+const showMask = defineModel<boolean | number>('show', {
-
+   default: false,
+   required: true
+})
 </script>
 <style lang="scss" scoped>
 .mask-body {

src/components/miaoPopupInput.vue

@@ -1,6 +1,10 @@
 <template>
    <miao-mask v-model:show="showMask">
-        <n-card class="popup-card" :title="popupConfig?.title" size="medium">
+      <n-card
+         class="popup-card"
+         :title="popupConfig?.title"
+         size="medium"
+      >
          {{ popupConfig?.content }}
          <n-input
             class="popup-input"
@@ -9,14 +13,16 @@
             v-bind="popupConfig?.inputProps"
             passively-activated
             autofocus
-                v-if="popupConfig?.inputProps" />
+            v-if="popupConfig?.inputProps"
+         />
          <div class="popup-button-container">
             <n-button
                class="popup-button-container-button"
                v-for="option in popupConfig?.options"
                :key="option.label"
                :type="option.type"
-                    @click="_resolve && _resolve(option.key)">
+               @click="_resolve && _resolve(option.key)"
+            >
                {{ option.label }}
             </n-button>
          </div>

src/config.ts

@@ -1,4 +1,8 @@
-const baseUrl = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
+const baseUrl =
+   window.location.protocol +
+   '//' +
+   window.location.hostname +
+   (window.location.port ? ':' + window.location.port : '')
 
 export default {
    baseUrl,

src/hooks/buildFromTree.ts

@@ -1,4 +1,4 @@
-import VirtualDirectory, { Tree, VirtualFile } from "@/class/VirtualDirectory";
+import VirtualDirectory, { Tree, VirtualFile } from '@/class/VirtualDirectory'
 
 /**
  * 通过VirtualDirectory的.tree重建文件夹树
@@ -7,9 +7,9 @@ import VirtualDirectory, { Tree, VirtualFile } from "@/class/VirtualDirectory";
  */
 const buildFromTree = (data: Tree) => {
    const root = new VirtualDirectory(data)
-    root.files = data.files?.map(v=>new VirtualFile(v, root))
+   root.files = data.files?.map((v) => new VirtualFile(v, root))
-    root.directories = data.directories?.map(v=>buildFromTree(v))
+   root.directories = data.directories?.map((v) => buildFromTree(v))
    return root
 }
 
-export default buildFromTree;
+export default buildFromTree

src/hooks/dateFormatter.ts

@@ -1,20 +1,28 @@
 export default function dateFormatter(date: Date, fmt: string) {
-	var o:any = {
+   var o: any = {
-		"M+": date.getMonth() + 1, //月份
+      'M+': date.getMonth() + 1, //月份
-		"d+": date.getDate(), //日
+      'd+': date.getDate(), //日
-		"h+": date.getHours(), //小时
+      'h+': date.getHours(), //小时
-		"m+": date.getMinutes(), //分
+      'm+': date.getMinutes(), //分
-		"s+": date.getSeconds(), //秒
+      's+': date.getSeconds(), //秒
-		"q+": Math.floor((date.getMonth() + 3) / 3), //季度
+      'q+': Math.floor((date.getMonth() + 3) / 3), //季度
-		"S": date.getMilliseconds() //毫秒
+      S: date.getMilliseconds() //毫秒
-	};
+   }
    if (/(y+)/.test(fmt)) {
-		fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
+      fmt = fmt.replace(
+         RegExp.$1,
+         (date.getFullYear() + '').substr(4 - RegExp.$1.length)
+      )
    }
    for (var k in o) {
-		if (new RegExp("(" + k + ")").test(fmt)) {
+      if (new RegExp('(' + k + ')').test(fmt)) {
-			fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ?  o[k] : ("00" + o[k]).substr(("" + o[k]).length));
+         fmt = fmt.replace(
+            RegExp.$1,
+            RegExp.$1.length == 1
+               ? o[k]
+               : ('00' + o[k]).substr(('' + o[k]).length)
+         )
       }
    }
-	return fmt;
+   return fmt
 }

src/hooks/dropHandler.ts

@@ -1,109 +1,114 @@
-import config from "@/config";
+import config from '@/config'
 
-const { uploadSizeLimit } = config;
+const { uploadSizeLimit } = config
 
 export type dropHandlerHooks = {
    /**
     * 仅返回小于config.ts中大小限制的文件，不会返回文件夹
     */
-	onDropFiles?: (files: File[]) => void;
+   onDropFiles?: (files: File[]) => void
    /**
     * 当拖动时
     */
-	onOver?: () => void;
+   onOver?: () => void
    /**
     * 当进入时
     */
-	onEnter?: () => void;
+   onEnter?: () => void
 
    /**
     * 当离开时
     */
-	onLeave?: () => void;
+   onLeave?: () => void
 
    /**
     * 离开或是放下时都会触发
     * @returns {any}
     */
-	onEnd?: () => void;
+   onEnd?: () => void
-};
+}
 
 const isFile = (file: File) =>
-	new Promise(resolve => {
+   new Promise((resolve) => {
-		const reader = new FileReader();
+      const reader = new FileReader()
       reader.onload = () => {
-			resolve(true);
+         resolve(true)
-			reader.abort();
+         reader.abort()
-		};
+      }
       reader.onerror = () => {
-			resolve(false);
+         resolve(false)
-			reader.abort();
+         reader.abort()
-		};
+      }
-		reader.readAsText(file);
+      reader.readAsText(file)
-	});
+   })
 
 /**
  * 只保留文件，移去文件夹
  * @param {File[]} files
  */
 const filesFilter = async (files: File[]) => {
-	let index = 0;
+   let index = 0
    while (index < files.length) {
-		const currentFile = files[index];
+      const currentFile = files[index]
-		const _isFile = await isFile(currentFile);
+      const _isFile = await isFile(currentFile)
       if (_isFile) {
-			index += 1;
+         index += 1
-			continue;
+         continue
       } else {
-			files.splice(index, 1);
+         files.splice(index, 1)
-			continue;
+         continue
       }
    }
-};
+}
 
-export default function dropHandler(dom: HTMLDivElement, hooks?: dropHandlerHooks) {
+export default function dropHandler(
+   dom: HTMLDivElement,
+   hooks?: dropHandlerHooks
+) {
    dom.addEventListener(
-		"dragenter",
+      'dragenter',
       function (e) {
-			e.preventDefault();
+         e.preventDefault()
-			e.stopPropagation();
+         e.stopPropagation()
-			hooks?.onEnter && hooks?.onEnter();
+         hooks?.onEnter && hooks?.onEnter()
       },
       false
-	);
+   )
 
    dom.addEventListener(
-		"dragover",
+      'dragover',
       function (e) {
-			e.preventDefault();
+         e.preventDefault()
-			e.stopPropagation();
+         e.stopPropagation()
-			hooks?.onOver && hooks?.onOver();
+         hooks?.onOver && hooks?.onOver()
       },
       false
-	);
+   )
 
    dom.addEventListener(
-		"dragleave",
+      'dragleave',
       function (e) {
-			e.preventDefault();
+         e.preventDefault()
-			e.stopPropagation();
+         e.stopPropagation()
-			hooks?.onLeave && hooks?.onLeave();
+         hooks?.onLeave && hooks?.onLeave()
-			hooks?.onEnd && hooks.onEnd();
+         hooks?.onEnd && hooks.onEnd()
       },
       false
-	);
+   )
 
    dom.addEventListener(
-		"drop",
+      'drop',
       async function (e) {
          // console.log(e, e.dataTransfer?.types);
-			e.preventDefault();
+         e.preventDefault()
-			e.stopPropagation();
+         e.stopPropagation()
-			const files = [...(e.dataTransfer?.files ?? [])].filter(file => file.size < uploadSizeLimit);
+         const files = [...(e.dataTransfer?.files ?? [])].filter(
-			await filesFilter(files);
+            (file) => file.size < uploadSizeLimit
-			hooks?.onDropFiles && hooks.onDropFiles(files);
+         )
-			hooks?.onEnd && hooks.onEnd();
+         await filesFilter(files)
+         hooks?.onDropFiles && hooks.onDropFiles(files)
+         hooks?.onEnd && hooks.onEnd()
       },
       false
-	);
+   )
 }

src/hooks/init.ts

@@ -1,5 +1,5 @@
-import { alertTipType } from "@/types/type";
+import { alertTipType } from '@/types/type'
-import initPlugin from "./init/initPlugin";
+import initPlugin from './init/initPlugin'
 
 export default async function init(globalAlertTip: alertTipType) {
    await initPlugin(globalAlertTip)

src/hooks/init/initPlugin.ts

@@ -1,24 +1,28 @@
-import usePluginCenter, { initPluginCenter } from "@/hooks/usePluginCenter";
+import usePluginCenter, { initPluginCenter } from '@/hooks/usePluginCenter'
-import { Plugin, registerComponentOption } from "@/class/PluginCenter";
+import { Plugin, registerComponentOption } from '@/class/PluginCenter'
-import { alertTipType, PluginExportType } from "@/types/type";
+import { alertTipType, PluginExportType } from '@/types/type'
 
 const initPlugin = async (globalAlertTip: alertTipType) => {
-	initPluginCenter(globalAlertTip);
+   initPluginCenter(globalAlertTip)
-	const modulesFiles = import.meta.glob("@/plugins/**/export*.ts", { eager: true });
+   const modulesFiles = import.meta.glob('@/plugins/**/export*.ts', {
-	const pluginCenter = usePluginCenter();
+      eager: true
+   })
+   const pluginCenter = usePluginCenter()
    for (let pluginConfig of Object.values(modulesFiles)) {
       const _config = pluginConfig as {
-			default: registerComponentOption | Plugin;
+         default: registerComponentOption | Plugin
-			type: PluginExportType;
+         type: PluginExportType
-			key?: string;
+         key?: string
-		};
+      }
-		const { type, key } = _config;
+      const { type, key } = _config
       if (type === PluginExportType.component) {
-			pluginCenter.registerComponent(_config.default as registerComponentOption);
+         pluginCenter.registerComponent(
+            _config.default as registerComponentOption
+         )
       } else if (type === PluginExportType.default) {
-			pluginCenter.register(key as string, _config.default as Plugin);
+         pluginCenter.register(key as string, _config.default as Plugin)
       }
    }
-};
+}
 
-export default initPlugin;
+export default initPlugin

src/hooks/miaoTools.ts

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

src/hooks/useDataBus.ts

@@ -1,26 +1,26 @@
-import { reactive } from "vue";
+import { reactive } from 'vue'
 
 let dataStorage: {
-	[key: string | number] : any
+   [key: string | number]: any
-};
+}
 
 export default function useDataBus() {
-	if(dataStorage === undefined) {
+   if (dataStorage === undefined) {
       dataStorage = reactive({})
    }
    return {
       set(key: string | number, value: any) {
-			dataStorage[key] = value;
+         dataStorage[key] = value
-			return value;
+         return value
       },
       pop(key: string | number) {
-			const value = dataStorage[key];
+         const value = dataStorage[key]
-			dataStorage[key] = undefined;
+         dataStorage[key] = undefined
-			return value;
+         return value
       },
       get(key: string | number) {
-			const value = dataStorage[key];
+         const value = dataStorage[key]
-			return value;
+         return value
+      }
    }
-	};
 }

src/hooks/useMiaoFetchApi.ts

@@ -1,4 +1,4 @@
-import VirtualDirectory, { VirtualFile } from "@/class/VirtualDirectory";
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
 import {
    getOption,
    getResponse,
@@ -10,59 +10,64 @@ import {
    cutOption,
    mkdirOption,
    getFileOption
-} from "@/types/fetch";
+} from '@/types/fetch'
-import Config from "@/config";
+import Config from '@/config'
-import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
+import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'
 
 export const useMiaoFetch = (option?: miaoFetchConfig) => {
-	const retry = option?.retry ?? 0;
+   const retry = option?.retry ?? 0
-	const controller = new AbortController();
+   const controller = new AbortController()
-	let flag = true;
+   let flag = true
    return {
-		miaoFetch: async (config: AxiosRequestConfig<any>): Promise<AxiosResponse<any, any>> => {
+      miaoFetch: async (
-			let counter = 0;
+         config: AxiosRequestConfig<any>
-			let response: any;
+      ): Promise<AxiosResponse<any, any>> => {
-			let errList = [];
+         let counter = 0
+         let response: any
+         let errList = []
          while (flag && counter <= retry) {
             try {
                response = await axios({
                   ...config,
                   signal: controller.signal
-					});
+               })
-					return response;
+               return response
             } catch (_e) {
-					errList.push(_e);
+               errList.push(_e)
-					counter += 1;
+               counter += 1
             }
          }
-			throw errList;
+         throw errList
       },
       /**
        * 强制终止miaoFetch
        */
       abortMiaoFetch: () => {
-			flag = false;
+         flag = false
-			controller.abort();
+         controller.abort()
       }
-	};
+   }
-};
+}
 
 const miaoFetchApi = {
    /**
     * 获取对应文件夹下的数据
     */
-	async get(vDirectory: VirtualDirectory, option?: getOption): Promise<getResponse> {
+   async get(
-		const { baseUrl, api } = Config;
+      vDirectory: VirtualDirectory,
-		const url = `${baseUrl}${api.get}${vDirectory.path}`;
+      option?: getOption
-		const retry = option?.retry ?? 0;
+   ): Promise<getResponse> {
+      const { baseUrl, api } = Config
+      const url = `${baseUrl}${api.get}${vDirectory.path}`
+      const retry = option?.retry ?? 0
 
       const { miaoFetch } = useMiaoFetch({
          retry
-		});
+      })
       const response = await miaoFetch({
          url
-		});
+      })
-		return response.data;
+      return response.data
    },
 
    /**
@@ -70,27 +75,33 @@ const miaoFetchApi = {
     */
    getFile(vFile: VirtualFile, option?: getFileOption) {
       // const { baseUrl, api } = Config
-		const url = vFile.url;
+      const url = vFile.url
-		const retry = option?.retry ?? 0;
+      const retry = option?.retry ?? 0
-		const axiosOption = option?.axiosOption ?? {};
+      const axiosOption = option?.axiosOption ?? {}
 
       const { miaoFetch, abortMiaoFetch: abort } = useMiaoFetch({
          retry
-		});
+      })
       const response = miaoFetch({
          url,
-			responseType: "arraybuffer",
+         responseType: 'arraybuffer',
          onDownloadProgress(progressEvent) {
-				option && option.onProcess && option.onProcess(progressEvent.total ? progressEvent.loaded / progressEvent.total : -1);
+            option &&
+               option.onProcess &&
+               option.onProcess(
+                  progressEvent.total
+                     ? progressEvent.loaded / progressEvent.total
+                     : -1
+               )
          },
          ...axiosOption
-		});
+      })
       return {
-			response: new Promise<Uint8Array>(async resolve => {
+         response: new Promise<Uint8Array>(async (resolve) => {
-				resolve(new Uint8Array((await response).data));
+            resolve(new Uint8Array((await response).data))
          }),
          abort
-		};
+      }
    },
 
    /**
@@ -98,177 +109,195 @@ const miaoFetchApi = {
     * 正常上传文件请使用uploadQueue
     */
    upload(data: File, targetVDir: VirtualDirectory, option?: uploadOption) {
-		const { baseUrl, api } = Config;
+      const { baseUrl, api } = Config
-		const url = `${baseUrl}${api.upload}${targetVDir.path}`;
+      const url = `${baseUrl}${api.upload}${targetVDir.path}`
-		const retry = option?.retry ?? 0;
+      const retry = option?.retry ?? 0
       const { miaoFetch, abortMiaoFetch } = useMiaoFetch({
          retry
-		});
+      })
-		const sizeTotal = data.size;
+      const sizeTotal = data.size
 
-		const opType = option?.type ?? "write";
+      const opType = option?.type ?? 'write'
 
-		const formData = new FormData();
+      const formData = new FormData()
 
-		formData.append("file", data);
+      formData.append('file', data)
       // 必须这样传，不然中文乱码
-		formData.append("fileName", data.name);
+      formData.append('fileName', data.name)
-		formData.append("operateType", opType);
+      formData.append('operateType', opType)
 
       return {
          abort: () => abortMiaoFetch(),
          response: new Promise<{
-				message: "success" | "failed";
+            message: 'success' | 'failed'
-				error?: string;
+            error?: string
-			}>(async resolve => {
+         }>(async (resolve) => {
             const response = await miaoFetch({
                url,
-					method: "post",
+               method: 'post',
                data: formData,
                onUploadProgress(progressEvent) {
-						option && option.onProcess && option.onProcess(progressEvent.loaded / sizeTotal);
+                  option &&
+                     option.onProcess &&
+                     option.onProcess(progressEvent.loaded / sizeTotal)
                }
-				});
-				resolve(response.data);
             })
-		};
+            resolve(response.data)
+         })
+      }
    },
 
    /**
     * 在目标文件夹下创建新的文件夹
     */
-	mkdir(targetVDir: VirtualDirectory, newFolderName: string, option?: mkdirOption) {
+   mkdir(
-		const { baseUrl, api } = Config;
+      targetVDir: VirtualDirectory,
-		const url = `${baseUrl}${api.mkdir}${targetVDir.path}`;
+      newFolderName: string,
+      option?: mkdirOption
+   ) {
+      const { baseUrl, api } = Config
+      const url = `${baseUrl}${api.mkdir}${targetVDir.path}`
       const { miaoFetch } = useMiaoFetch({
          retry: option?.retry ?? 0
-		});
+      })
 
       return new Promise<{
-			message: "success" | "failed";
+         message: 'success' | 'failed'
-			error?: string;
+         error?: string
-		}>(async resolve => {
+      }>(async (resolve) => {
          const response = await miaoFetch({
             url,
-				method: "post",
+            method: 'post',
             data: {
                folderName: newFolderName
             }
-			});
+         })
-			resolve(response.data);
+         resolve(response.data)
-		});
+      })
    },
    /**
     * 在目标文件夹下创建新的空文件，实际上是通过upload空文件实现
     */
-	mkFile(targetVDir: VirtualDirectory, newFileName: string, option?: uploadOption) {
+   mkFile(
-		const emptyBlob = new Blob([]);
+      targetVDir: VirtualDirectory,
+      newFileName: string,
+      option?: uploadOption
+   ) {
+      const emptyBlob = new Blob([])
       const emptyFile = new File([emptyBlob], newFileName, {
-			type: "text/plain"
+         type: 'text/plain'
-		});
+      })
-		return this.upload(emptyFile, targetVDir, option);
+      return this.upload(emptyFile, targetVDir, option)
    },
 
    /**
     * 删除对应的文件或文件夹，若为文件夹会递归删除
     */
    delete(target: VirtualFile | VirtualDirectory, option?: deleteOption) {
-		const { baseUrl, api } = Config;
+      const { baseUrl, api } = Config
-		const url = `${baseUrl}${api.delete}${target.path}`;
+      const url = `${baseUrl}${api.delete}${target.path}`
-		const retry = option?.retry ?? 0;
+      const retry = option?.retry ?? 0
       const { miaoFetch } = useMiaoFetch({
          retry
-		});
+      })
 
       return {
          response: new Promise<{
-				eventId: number;
+            eventId: number
-			}>(async resolve => {
+         }>(async (resolve) => {
             const response = await miaoFetch({
                url,
-					method: "post"
+               method: 'post'
-				});
-				resolve(response.data);
             })
-		};
+            resolve(response.data)
+         })
+      }
    },
    /**
     * 重命名对应的文件或文件夹
     */
-	rename(target: VirtualFile | VirtualDirectory, newName: string, option?: renameOption) {
+   rename(
-		const { baseUrl, api } = Config;
+      target: VirtualFile | VirtualDirectory,
-		const url = `${baseUrl}${api.rename}${target.path}`;
+      newName: string,
-		const retry = option?.retry ?? 0;
+      option?: renameOption
+   ) {
+      const { baseUrl, api } = Config
+      const url = `${baseUrl}${api.rename}${target.path}`
+      const retry = option?.retry ?? 0
       const { miaoFetch } = useMiaoFetch({
          retry
-		});
+      })
 
       return {
          response: new Promise<{
-				eventId: number;
+            eventId: number
-			}>(async resolve => {
+         }>(async (resolve) => {
             const response = await miaoFetch({
                url,
-					method: "post",
+               method: 'post',
                data: { newName }
-				});
-				resolve(response.data);
             })
-		};
+            resolve(response.data)
+         })
+      }
    },
    /**
     * 剪切文件或文件夹
     */
-	cut(target: VirtualFile | VirtualDirectory, to: VirtualDirectory, option?: cutOption) {
+   cut(
-		const newPath = to.path;
+      target: VirtualFile | VirtualDirectory,
-		const { baseUrl, api } = Config;
+      to: VirtualDirectory,
-		const url = `${baseUrl}${api.cut}${target.path}`;
+      option?: cutOption
-		const retry = option?.retry ?? 0;
+   ) {
+      const newPath = to.path
+      const { baseUrl, api } = Config
+      const url = `${baseUrl}${api.cut}${target.path}`
+      const retry = option?.retry ?? 0
       const { miaoFetch } = useMiaoFetch({
          retry
-		});
+      })
       return {
          response: new Promise<{
-				eventId: number;
+            eventId: number
-			}>(async resolve => {
+         }>(async (resolve) => {
             const response = await miaoFetch({
                url,
-					method: "post",
+               method: 'post',
                data: { newPath }
-				});
-				resolve(response.data);
             })
-		};
+            resolve(response.data)
+         })
+      }
    },
 
    /**
     * 查询服务端操作事件的进展
     */
    query(eventId: number, option?: queryOption) {
-		const { baseUrl, api } = Config;
+      const { baseUrl, api } = Config
-		const url = `${baseUrl}${api.query}`;
+      const url = `${baseUrl}${api.query}`
-		const retry = option?.retry ?? 0;
+      const retry = option?.retry ?? 0
       const { miaoFetch } = useMiaoFetch({
          retry
-		});
+      })
       return {
          response: new Promise<{
-				status: "process" | "success" | "failed";
+            status: 'process' | 'success' | 'failed'
-				error?: unknown;
+            error?: unknown
-			}>(async resolve => {
+         }>(async (resolve) => {
             const response = await miaoFetch({
                url,
-					method: "get",
+               method: 'get',
                params: {
                   id: eventId
                }
-				});
-				resolve(response.data);
             })
-		};
+            resolve(response.data)
+         })
       }
-};
+   }
+}
 
 export default function useMiaoFetchApi() {
-	return miaoFetchApi;
+   return miaoFetchApi
 }

src/hooks/usePluginCenter.ts

@@ -1,15 +1,15 @@
-import PluginCenter from "@/class/PluginCenter";
+import PluginCenter from '@/class/PluginCenter'
-import { alertTipType } from "@/types/type";
+import { alertTipType } from '@/types/type'
-import { reactive } from "vue";
+import { reactive } from 'vue'
 
 let pluginCenter: PluginCenter
 
 export const initPluginCenter = (globalAlertTip: alertTipType) => {
-    if(!pluginCenter) {
+   if (!pluginCenter) {
       pluginCenter = reactive(new PluginCenter(globalAlertTip))
    }
 }
 
-export default function usePluginCenter(){
+export default function usePluginCenter() {
    return pluginCenter
 }

src/hooks/useRootVDirectory.ts

@@ -1,5 +1,5 @@
-import VirtualDirectory from "@/class/VirtualDirectory";
+import VirtualDirectory from '@/class/VirtualDirectory'
-import { reactive } from "vue";
+import { reactive } from 'vue'
 
 const root = reactive(
    new VirtualDirectory({
@@ -13,5 +13,5 @@ const root = reactive(
    })
 )
 export default function useRootVDirectory() {
-    return root;
+   return root
 }

src/hooks/useUploadQueue.ts

@@ -1,10 +1,10 @@
-import UploadQueue from "@/class/UploadQueue";
+import UploadQueue from '@/class/UploadQueue'
-import { reactive } from "vue";
+import { reactive } from 'vue'
 
 let uploadQueue: UploadQueue
 
 export default () => {
-    if(uploadQueue === undefined){
+   if (uploadQueue === undefined) {
       uploadQueue = reactive(new UploadQueue())
    }
    return uploadQueue

src/hooks/useVirtualPages.ts

@@ -1,10 +1,10 @@
-import { VirtualPages } from "@/class/VirtualPage"
+import { VirtualPages } from '@/class/VirtualPage'
-import { Reactive, reactive } from "vue"
+import { Reactive, reactive } from 'vue'
 
 let views: Reactive<VirtualPages>
 
-export default function useVirtualPages(){
+export default function useVirtualPages() {
-    if(views === undefined) {
+   if (views === undefined) {
       // views = reactive<VirtualPage[]>([])
       views = reactive(new VirtualPages())
    }

src/plugins/copyFileUrl2Clipboard/copy.ts

@@ -1,6 +1,6 @@
-import { VirtualFile } from "@/class/VirtualDirectory"
+import { VirtualFile } from '@/class/VirtualDirectory'
-import config from "@/config"
+import config from '@/config'
-import { usePluginHooksType } from "@/types/type"
+import { usePluginHooksType } from '@/types/type'
 import copy2Clipboard from 'copy-to-clipboard'
 
 const copy = (__: any, vFiles: VirtualFile[], hooks: usePluginHooksType) => {

src/plugins/copyFileUrl2Clipboard/export.ts

@@ -1,29 +1,29 @@
-import { Plugin, PluginGroup } from "@/class/PluginCenter";
+import { Plugin, PluginGroup } from '@/class/PluginCenter'
-import Copy from "./copy";
+import Copy from './copy'
-import { CopyOutline } from "@vicons/ionicons5";
+import { CopyOutline } from '@vicons/ionicons5'
-import { PluginExportType } from "@/types/type";
+import { PluginExportType } from '@/types/type'
-import { shallowRef } from "vue";
+import { shallowRef } from 'vue'
 
 const pluginConfig: Plugin = {
-	name: "复制链接",
+   name: '复制链接',
    icon: shallowRef(CopyOutline),
    filter: (vDirs, vFiles) => {
       if (vDirs.length !== 0) {
-			return false;
+         return false
       }
       if (vFiles.length !== 1) {
-			return false;
+         return false
       }
-		return true;
+      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 { Plugin, PluginGroup } from '@/class/PluginCenter'
-import fullScreen from "./fullScreen";
+import fullScreen from './fullScreen'
-import { ExpandOutline } from "@vicons/ionicons5";
+import { ExpandOutline } from '@vicons/ionicons5'
-import { PluginExportType } from "@/types/type";
+import { PluginExportType } from '@/types/type'
-import { shallowRef } from "vue";
+import { shallowRef } from 'vue'
 
 const pluginConfig: Plugin = {
-	name: "全屏",
+   name: '全屏',
    icon: shallowRef(ExpandOutline),
    filter: () => {
-		return true;
+      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/miaoCodeMirror/miaoCodeMirror.vue

@@ -1,17 +1,30 @@
 <template>
    <miao-message-provider ref="miaoMessage">
-        <div class="codemirror-container" ref="rootRef" :class="`codemirror-container-${theme}`">
+      <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
+               class="codemirror-container-btn codemirror-container-btn-save"
+               @click="handleSave"
+            >
                保存
             </div>
-                <div class="codemirror-container-btn codemirror-container-btn-save" @click="handleReset">
+            <div
+               class="codemirror-container-btn codemirror-container-btn-save"
+               @click="handleReset"
+            >
                恢复到上次保存
             </div>
          </div>
          <div class="codemirror-container-main">
             <NScrollbar style="max-height: calc(100%)">
-                    <codemirror v-model="codeData" :extensions="extensions" />
+               <codemirror
+                  v-model="codeData"
+                  :extensions="extensions"
+               />
             </NScrollbar>
          </div>
       </div>
@@ -145,13 +158,13 @@ onMounted(async () => {
    vFile.value = currentFiles.value[0]
    const fileName = currentFiles.value[0].name
    codeData.value = decoder.decode(
-        await (miaoFetchApi.getFile(currentFiles.value[0], {
+      await miaoFetchApi.getFile(currentFiles.value[0], {
          axiosOption: {
             headers: {
                'Cache-Control': 'no-cache'
             }
          }
-        }).response)
+      }).response
    )
    bakData.value = codeData.value
    extensions.value = [...(await getLangExtensions(fileName))]

src/plugins/miaoCrypto/export.ts

@@ -5,8 +5,7 @@ import { PluginExportType } from '@/types/type'
 const pluginConfig: registerComponentOption = {
    key: 'miaoCrypto',
    name: '文件加密',
-    getComponent: async () =>
+   getComponent: async () => (await import('./miaoCrypto.vue')).default,
-        (await import('./miaoCrypto.vue')).default,
    filter: (vDirs, vFiles) => {
       return true
       if (vDirs.length !== 0) {
@@ -17,7 +16,7 @@ const pluginConfig: registerComponentOption = {
       }
       return vFiles[0].name.endsWith('txt')
    },
-    disable: true,
+   disable: true
 }
 
 export default pluginConfig

src/plugins/miaoCrypto/miaoCrypto.vue

@@ -2,20 +2,34 @@
    <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
-                        <div class="miaoCrypto-container-item-percentBar" :style="{
+                  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%`,
+                        width:
+                           item.getBufferProgress !== -1
+                              ? `${item.getBufferProgress * 100}%`
+                              : `0%`,
                         backgroundColor: 'blue'
-                        }"></div>
+                     }"
-                        <div class="miaoCrypto-container-item-percentBar" :style="{
+                  ></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>
+                  <span class="miaoCrypto-container-item-content">
+                     {{ item.name }}{{ item.status }}
+                  </span>
                </div>
             </n-scrollbar>
          </div>
@@ -88,7 +102,7 @@ class Work {
       item.isGettingBuffer = true
       try {
          item.buffer = await item.getBuffer()
-        } catch(e) {
+      } catch (e) {
          item.status = 'error'
       }
       item.isGettingBuffer = false
@@ -148,7 +162,7 @@ onMounted(() => {
 
 onUnmounted(() => {
    encryptWork.abortLoop = true
-    encryptWork.queue.forEach(item => {
+   encryptWork.queue.forEach((item) => {
       item.getBufferAbort && item.getBufferAbort()
    })
 })
@@ -173,7 +187,8 @@ onUnmounted(() => {
          width: 95%;
          height: 40px;
          background-color: #fff;
-            box-shadow: 0 0 15px -7px rgba(0, 0, 0, 0.1725490196),
+         box-shadow:
+            0 0 15px -7px rgba(0, 0, 0, 0.1725490196),
             0 0 3px 1px #43434359;
          border-radius: 5px;
          position: relative;
@@ -188,7 +203,7 @@ onUnmounted(() => {
 
          .miaoCrypto-container-item-content {
             position: relative;
-                z-index: 3
+            z-index: 3;
          }
       }
    }

src/plugins/miaoDirectory/components/miaoDirectoryBottom.vue

@@ -1,45 +1,47 @@
 <template>
-    <div class="miao-directory-container-bottom" :style="{
+   <div
-      backgroundColor:
+      class="miao-directory-container-bottom"
-        index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)'
+      :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="{
+            <add-outline
-            color:
+               :style="{
-              index % 2 === 0
+                  color: index % 2 === 0 ? 'rgb(0 0 0)' : 'rgb(255 255 255)'
-                ? 'rgb(0 0 0)'
+               }"
-                : 'rgb(255 255 255)'
+               @click="emit('add-new-item')"
-          }" @click="emit('add-new-item')" />
+            />
          </div>
       </div>
       <div class="container-bottom-item">
          <div class="container-bottom-item-icon">
-          <cloud-upload-outline :style="{
+            <cloud-upload-outline
-            color:
+               :style="{
-              index % 2 === 0
+                  color: index % 2 === 0 ? 'rgb(0 0 0)' : 'rgb(255 255 255)'
-                ? 'rgb(0 0 0)'
+               }"
-                : 'rgb(255 255 255)'
+               @click="emit('pick-files-upload')"
-          }" @click="emit('pick-files-upload')" />
+            />
          </div>
       </div>
    </div>
-  </template>
+</template>
 
-  <script setup lang="ts">
+<script setup lang="ts">
-  import { AddOutline, CloudUploadOutline } from '@vicons/ionicons5'
+import { AddOutline, CloudUploadOutline } from '@vicons/ionicons5'
-  defineProps<{
+defineProps<{
    index: number
-  }>()
+}>()
 
-  const emit = defineEmits<{
+const emit = defineEmits<{
    'add-new-item': []
    'pick-files-upload': []
-  }>()
+}>()
-  </script>
+</script>
 
-  <style scoped lang="scss">
+<style scoped lang="scss">
-  .miao-directory-container-bottom {
+.miao-directory-container-bottom {
    height: 60px;
    background-color: bisque;
    display: flex;
@@ -73,5 +75,5 @@
          }
       }
    }
-  }
+}
-  </style>
+</style>

src/plugins/miaoDirectory/components/miaoDirectoryItem.vue

@@ -1,19 +1,51 @@
 <template>
-    <miao-draggable-div class="miao-item" :isDraggable="!draggable" ref="itemRef" @on-drag-start="handleDragStart">
+   <miao-draggable-div
-        <miaoContextMenu :options="dropDownOptions ?? []" :touch-time-out="500" @select="handleDropdownSelect">
+      class="miao-item"
-            <div class="item-main" :class="selected ? 'item-main-selected' : ''" ref="mainRef">
+      :isDraggable="!draggable"
-                <div class="item-main-front" :style="{ backgroundColor: props.color }"></div>
+      ref="itemRef"
-                <Icon class="item-main-icon" v-show="clientWidth > 250"></Icon>
+      @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>
+                  <Icon
-                        <n-ellipsis :style="{ maxWidth: clientWidth > 250 ? '80%' : '75%' }">{{ name }}</n-ellipsis>
+                     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">
+               <div
+                  class="item-main-info-date"
+                  v-if="time"
+               >
                   {{ time }}
                </div>
             </div>
-                <miao-draggable-div class="item-main-dragBtn" :isDraggable="draggable">
+            <miao-draggable-div
+               class="item-main-dragBtn"
+               :isDraggable="draggable"
+            >
                <ReorderFourOutline></ReorderFourOutline>
             </miao-draggable-div>
          </div>
@@ -34,12 +66,12 @@ import {
    LogoVue,
    PlayCircle,
    Disc,
-    ReorderFourOutline,
+   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'
 
@@ -47,7 +79,7 @@ import miaoDraggableDiv from '@/components/miaoDraggableDiv.vue'
 
 const props = defineProps<{
    item: {
-        name: string,
+      name: string
       type: 'directory' | 'file'
       stats: {
          mtimeMs: number
@@ -78,11 +110,11 @@ const clientWidth = ref<number>(666)
 
 const name = props.name ?? props.item.name
 
-const observer = new ResizeObserver(entries => {
+const observer = new ResizeObserver((entries) => {
    for (let entry of entries) {
-        clientWidth.value = entry.contentRect.width;
+      clientWidth.value = entry.contentRect.width
    }
-});
+})
 
 const time = computed(() => {
    return dateFormatter(
@@ -119,9 +151,7 @@ const Icon = computed(() => {
             ['txt', 'doc', 'docs', 'docx', 'xls', 'xlsx'].includes(aft)
          ) {
             return DocumentText
-            } else if (
+         } else if (['mp3', 'wav', 'ape', 'acc', 'ogg', 'flac'].includes(aft)) {
-                ['mp3', 'wav', 'ape', 'acc', 'ogg', 'flac'].includes(aft)
-            ) {
             return Disc
          } else if (
             [
@@ -170,13 +200,13 @@ const handleDragStart = (e: DragEvent) => {
 
 onMounted(() => {
    if (mainRef.value) {
-        observer.observe(mainRef.value);
+      observer.observe(mainRef.value)
    }
 })
 
 onBeforeUnmount(() => {
    if (mainRef.value) {
-        observer.unobserve(mainRef.value);
+      observer.unobserve(mainRef.value)
    }
 })
 </script>
@@ -290,7 +320,6 @@ onBeforeUnmount(() => {
 
       &:hover {
          background-color: rgba(0, 128, 207, 0.64);
-            ;
       }
    }
 }

src/plugins/miaoDirectory/components/miaoDirectoryItemsContainer.vue

@@ -3,13 +3,18 @@
       class="miao-directory-container-items"
       :style="{
          backgroundColor: index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
-        }">
+      }"
-        <n-scrollbar ref="scrollbarRef" style="max-height: 100%">
+   >
+      <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">
+            margin="10px"
+         >
             <miaoDirectoryItem
                :item="dir"
                :color="props.color"
@@ -20,12 +25,14 @@
                @click="handleItemClick(dir)"
                @drag-start="(e) => handleItemDragStart(dir)(e)"
                @rename="handleItemRename(dir)"
-                    @on-selected="handleItemSelect(dir)" />
+               @on-selected="handleItemSelect(dir)"
+            />
          </miao-lazy-div>
          <miao-lazy-div
             v-for="file in showData_files"
             :key="file.id"
-                min-height="50px">
+            min-height="50px"
+         >
             <miaoDirectoryItem
                :item="file"
                :color="props.color"
@@ -37,7 +44,8 @@
                @drag-start="(e) => handleItemDragStart(file)(e)"
                @rename="handleItemRename(file)"
                @plugin="(p) => handleItemUsePlugin(file)(p)"
-                    @on-selected="handleItemSelect(file)" />
+               @on-selected="handleItemSelect(file)"
+            />
          </miao-lazy-div>
       </n-scrollbar>
    </div>

src/plugins/miaoDirectory/components/miaoDirectoryTop.vue

@@ -1,33 +1,59 @@
 <template>
-    <div class="miao-directory-container-top" :style="{
+   <div
-        backgroundColor:
+      class="miao-directory-container-top"
-            index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
+      :style="{
-    }">
+         backgroundColor: index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
-        <div class="container-top-colorfulBar" :style="{ backgroundColor: props.color }"></div>
+      }"
+   >
+      <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
+               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"
+               <n-breadcrumb-item
-                        @click="handleClickBreadcrumbItem(dir)" :clickable="true">
+                  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')">
+         <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')">
+         <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-dropdown
-                <n-icon class="container-top-tools-item" size="14">
+            trigger="click"
+            :options="openMenuOption"
+            @select="(key: string) => emit('menuSelect', key)"
+         >
+            <n-icon
+               class="container-top-tools-item"
+               size="14"
+            >
                <EllipsisVertical />
             </n-icon>
          </n-dropdown>
@@ -41,24 +67,24 @@ import {
    CloudOutline,
    ChevronBackOutline,
    ReloadOutline,
-    EllipsisVertical,
+   EllipsisVertical
 } from '@vicons/ionicons5'
 import VirtualDirectory from '@/class/VirtualDirectory'
 
 const props = defineProps<{
-    color: string;
+   color: string
    index: number
-    currentDirectory: VirtualDirectory | undefined;
+   currentDirectory: VirtualDirectory | undefined
    openMenuOption: {
-        key: string,
+      key: string
-        label: string,
+      label: string
-        [key: string]: any,
+      [key: string]: any
    }[]
 }>()
 
 const emit = defineEmits<{
-    back: [],
+   back: []
-    reload: [],
+   reload: []
    menuSelect: [key: string]
    'set-current-directory': [virtualDirectory: VirtualDirectory]
 }>()
@@ -66,7 +92,6 @@ const emit = defineEmits<{
 const handleClickBreadcrumbItem = (virtualDirectory: VirtualDirectory) => {
    emit('set-current-directory', virtualDirectory)
 }
-
 </script>
 
 <style scoped lang="scss">
@@ -146,7 +171,6 @@ const handleClickBreadcrumbItem = (virtualDirectory: VirtualDirectory) => {
             transform: rotate(360deg);
          }
       }
-
    }
 }
 </style>

src/plugins/miaoDirectory/export.ts

@@ -18,6 +18,5 @@ const pluginConfig: registerComponentOption = {
 
 export default pluginConfig
 
-
 import { PluginExportType } from '@/types/type'
 export const type = PluginExportType.component

src/plugins/miaoDirectory/export_onInit.ts

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

src/plugins/miaoDirectory/miaoDirectory.vue

@@ -2,9 +2,13 @@
    <miao-drop-handler
       @on-virtual-directory="handleDropVDirectory"
       @on-files="handleDropFiles"
-        @on-virtual-files="handleDropVirtualFiles">
+      @on-virtual-files="handleDropVirtualFiles"
+   >
       <miaoAlertTipProvider ref="miaoAlertTip">
-            <div class="miao-directory-item-container" ref="rootDomRef">
+         <div
+            class="miao-directory-item-container"
+            ref="rootDomRef"
+         >
             <!-- 顶部面包屑导航和工具栏 -->
             <miao-directory-top
                :color="props.color"
@@ -16,7 +20,8 @@
                :index="index"
                @set-current-directory="setCurrentDirectory"
                @search="handleSearch"
-                    @menu-select="handleTopBarMenuSelect" />
+               @menu-select="handleTopBarMenuSelect"
+            />
 
             <!-- 文件和文件夹列表 -->
             <miao-directory-items
@@ -31,14 +36,16 @@
                @item-delete="handleItemDelete"
                @item-drag-start="handleItemDragStart"
                @item-rename="handleItemRename"
-                    @item-select="handleItemSelect" />
+               @item-select="handleItemSelect"
+            />
 
             <!-- 底部工具栏 -->
             <miao-directory-bottom
                :index="index"
                @add-new-item="handleAddNewItem"
                v-if="false"
-                    @pick-files-upload="handlePickFilesUpload" />
+               @pick-files-upload="handlePickFilesUpload"
+            />
 
             <miao-mask v-model:show="showModel"></miao-mask>
             <miao-popup-input ref="popupInput"></miao-popup-input>
@@ -300,7 +307,7 @@ const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
          })
       }
       currentDirectories.value[0] = virtualDirectory
-    } catch(e) {
+   } catch (e) {
       miaoAlertTip.value?.alertTip(`获取文件夹内容出错`, {
          type: 'error',
          timeout: 3000
@@ -346,8 +353,7 @@ const handleTopBarMenuSelect = (key: string) => {
          selectedItem.clear((v) => v.type !== 'directory')
    } else if (key === 'showFiles') {
       showFiles.value = !showFiles.value
-        showFiles.value === false &&
+      showFiles.value === false && selectedItem.clear((v) => v.type !== 'file')
-            selectedItem.clear((v) => v.type !== 'file')
    } else if (key.startsWith('plugin:')) {
       const pluginName = key.split(':')[1]
       pluginCenter.usePlugin(pluginName, [currentDirectory.value], [])
@@ -374,10 +380,7 @@ const handleTopBarMenuSelect = (key: string) => {
             break
          case 'range':
             const _sArr = selectedItem.value
-                const _arr = [
+            const _arr = [...showData_directory.value, ...showData_files.value]
-                    ...showData_directory.value,
-                    ...showData_files.value
-                ]
             const _nArr = []
             let _counter = 0
             for (const i of _arr) {

src/plugins/miaoIframe/export.ts

@@ -21,6 +21,5 @@ const pluginConfig: registerComponentOption = {
 
 export default pluginConfig
 
-
 import { PluginExportType } from '@/types/type'
 export const type = PluginExportType.component

src/plugins/miaoIframe/miaoIframe.vue

@@ -4,15 +4,16 @@
          ref="iframeRef"
          :src="iframeSrc"
          frameborder="0"
-            class="iframe-container-iframe"></iframe>
+         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', {
@@ -20,10 +21,11 @@ const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
 })
 
 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>) => {
@@ -33,8 +35,8 @@ const handleIframeMessage = (e: MessageEvent<any>) => {
 }
 onMounted(() => {
    iframeSrc.value = currentFiles.value[0].url
-    if (typeof window.addEventListener != "undefined") {
+   if (typeof window.addEventListener != 'undefined') {
-      window.addEventListener("message", handleIframeMessage, false);
+      window.addEventListener('message', handleIframeMessage, false)
    }
    console.log(buildFromTree(cloneDeep(root.tree)))
 })

src/plugins/miaoImages/export.ts

@@ -44,6 +44,5 @@ const pluginConfig: registerComponentOption = {
 
 export default pluginConfig
 
-
 import { PluginExportType } from '@/types/type'
 export const type = PluginExportType.component

src/plugins/miaoImages/miaoImages.vue

@@ -1,13 +1,21 @@
 <template>
    <miao-drop-handler
       @on-virtual-directory="handleDrop"
-        @on-virtual-files="handleDrop">
+      @on-virtual-files="handleDrop"
+   >
       <miao-message-provider ref="miaoMessageRef">
-            <div class="miaoImage" ref="rootRef">
+         <div
-                <n-scrollbar ref="NScrollbarRef" style="max-height: 100%;">
+            class="miaoImage"
+            ref="rootRef"
+         >
+            <n-scrollbar
+               ref="NScrollbarRef"
+               style="max-height: 100%"
+            >
                <div
                   class="miaoImage-container"
-                        v-for="imageGroup in imageGroupList">
+                  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>
@@ -22,7 +30,8 @@
                   <div
                      class="miaoImage-container-row"
                      v-for="vFile in imageGroup.items"
-                            :key="vFile.id">
+                     :key="vFile.id"
+                  >
                      <img
                         :src="vFile.url"
                         class="miaoImage-container-row-image"
@@ -32,7 +41,8 @@
                               ? 'miaoImage-container-row-image-active'
                               : ''
                         "
-                                @click="activeImage = vFile" />
+                        @click="activeImage = vFile"
+                     />
                   </div>
                </div>
             </n-scrollbar>
@@ -40,19 +50,23 @@
                :show="activeImage !== undefined"
                @click="activeImage = undefined"
                class="miaoImage-mask"
-                    @wheel="handleWheel">
+               @wheel="handleWheel"
+            >
                <ChevronBack
                   class="miaoImage-mask-btn miaoImage-mask-btn-back"
-                        @click="handleActiveImageBack" />
+                  @click="handleActiveImageBack"
+               />
                <img
                   :src="activeImage?.url"
                   class="miaoImage-mask-active"
                   @click="(e) => e.stopPropagation()"
                   draggable="false"
-                        :style="{transform: `scale(${imgViewScale})`}" />
+                  :style="{ transform: `scale(${imgViewScale})` }"
+               />
                <ChevronForward
                   class="miaoImage-mask-btn miaoImage-mask-btn-forward"
-                        @click="handleActiveImageForward" />
+                  @click="handleActiveImageForward"
+               />
             </miao-mask>
          </div>
       </miao-message-provider>
@@ -152,7 +166,8 @@ const scrollToActiveImage = () => {
    const dom = rootRef.value?.querySelector(
       '.miaoImage-container-row-image-active'
    )
-    dom && NScrollbarRef.value.scrollTo({
+   dom &&
+      NScrollbarRef.value.scrollTo({
          top: dom.offsetTop - 30,
          behavior: 'smooth'
       })
@@ -166,8 +181,7 @@ const handleActiveImageBack = (e: any) => {
    const index = imageFileList.value.indexOf(activeImage.value)
    activeImage.value =
       imageFileList.value[
-            (index - 1 + imageFileList.value.length) %
+         (index - 1 + imageFileList.value.length) % imageFileList.value.length
-                imageFileList.value.length
       ]
 }
 
@@ -179,8 +193,7 @@ const handleActiveImageForward = (e: any) => {
    const index = imageFileList.value.indexOf(activeImage.value)
    activeImage.value =
       imageFileList.value[
-            (index + 1 + imageFileList.value.length) %
+         (index + 1 + imageFileList.value.length) % imageFileList.value.length
-                imageFileList.value.length
       ]
 }
 
@@ -205,9 +218,7 @@ const handleDrop = async (vItems: (VirtualFile | VirtualDirectory)[]) => {
          : `导入${imageFileList.value.length - length_before}张图片`,
       {
          type:
-                length_before === imageFileList.value.length
+            length_before === imageFileList.value.length ? 'info' : 'success',
-                    ? 'info'
-                    : 'success',
          timeout: 5000
       }
    )
@@ -253,9 +264,7 @@ onMounted(async () => {
          : `导入${imageFileList.value.length - length_before}张图片`,
       {
          type:
-                length_before === imageFileList.value.length
+            length_before === imageFileList.value.length ? 'info' : 'success',
-                    ? 'info'
-                    : 'success',
          timeout: 5000
       }
    )

src/plugins/miaoMarkdown/export.ts

@@ -20,6 +20,5 @@ const pluginConfig: registerComponentOption = {
 
 export default pluginConfig
 
-
 import { PluginExportType } from '@/types/type'
 export const type = PluginExportType.component

src/plugins/miaoMarkdown/miaoMarkdown.vue

@@ -1,19 +1,21 @@
 <template>
    <n-scrollbar>
-    <div class="miao-markdown-container-miaomiaomiao" v-html="renderedMarkdown"></div>
+      <div
-    <div style="height: 50px; width: 100%;"></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()
 
@@ -28,7 +30,9 @@ const md = new MarkdownIt()
 
 onMounted(async () => {
    markdownSrc.value = currentFiles.value[0].url
-  const text = decoder.decode(await(miaoFetchApi.getFile(currentFiles.value[0])).response)
+   const text = decoder.decode(
+      await miaoFetchApi.getFile(currentFiles.value[0]).response
+   )
    renderedMarkdown.value = md.render(text)
 })
 </script>
@@ -56,11 +60,11 @@ onMounted(async () => {
    }
 
    tr:nth-child(even) {
-    background-color: #f2f2f2
+      background-color: #f2f2f2;
    }
 
    th {
-    background-color: #04AA6D;
+      background-color: #04aa6d;
       color: white;
    }
 }

src/plugins/miaoMusicPlayer/export.ts

@@ -1,36 +1,36 @@
-import { registerComponentOption } from "@/class/PluginCenter";
+import { registerComponentOption } from '@/class/PluginCenter'
-import { PluginExportType } from "@/types/type";
+import { PluginExportType } from '@/types/type'
-import Disc from "@vicons/ionicons5/es/Disc";
+import Disc from '@vicons/ionicons5/es/Disc'
 
 const pluginConfig: registerComponentOption = {
-	key: "miaoMusicPlayer",
+   key: 'miaoMusicPlayer',
-	name: "音乐",
+   name: '音乐',
    icon: Disc,
-	getComponent: async () => (await import("./miaoMusicPlayer.vue")).default,
+   getComponent: async () => (await import('./miaoMusicPlayer.vue')).default,
    filter: (vDirs, vFiles) => {
       if (vDirs.length === 0 && vFiles.length === 0) {
-			return true;
+         return true
       }
       if (vDirs.length !== 0) {
-			return false;
+         return false
       }
       if (vFiles.length === 0) {
-			return false;
+         return false
       }
       for (let i of vFiles) {
-			for (let s of ["mp3", "flac", "ogg", "mp4"]) {
+         for (let s of ['mp3', 'flac', 'ogg', 'mp4']) {
             if (i.name.endsWith(s)) {
-					return true;
+               return true
             }
          }
       }
-		return false;
+      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 { Plugin, PluginGroup } from '@/class/PluginCenter'
-import { PluginExportType } from "@/types/type";
+import { PluginExportType } from '@/types/type'
-import { shallowRef } from "vue";
+import { shallowRef } from 'vue'
-import Disc from "@vicons/ionicons5/es/Disc";
+import Disc from '@vicons/ionicons5/es/Disc'
 
 const pluginConfig: Plugin = {
-	name: "音乐",
+   name: '音乐',
    icon: shallowRef(Disc),
    filter: (_, __, views) => {
-		return views.find("miaoMusicPlayer").length === 0;
+      return views.find('miaoMusicPlayer').length === 0
    },
    disable: false,
    group: [PluginGroup.mainMenu],
    func(_, __, hooks) {
-		const { getPluginCenter } = hooks;
+      const { getPluginCenter } = hooks
-		const PluginCenter = getPluginCenter();
+      const PluginCenter = getPluginCenter()
-		PluginCenter.usePlugin("miaoMusicPlayer", [], []);
+      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,6 +1,6 @@
-import { createApp, Reactive } from "vue";
+import { createApp, Reactive } from 'vue'
-import aplayerListNew from "../src/components/aplayerListNew.vue";
+import aplayerListNew from '../src/components/aplayerListNew.vue'
-import apType, { audioType } from "../types/ap";
+import apType, { audioType } from '../types/ap'
 
 export type aplayerMiaoOption = {
    onDragItemStart?: () => void
@@ -13,37 +13,39 @@ export type aplayerMiaoOption = {
  * 对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;
+   const old_listDom = container.querySelector(
-	old_listDom.style.display = "none";
+      '.aplayer-list'
+   ) as HTMLDivElement
+   old_listDom.style.display = 'none'
 
    // 新版歌单
-	const new_list_dom = document.createElement("div");
+   const new_list_dom = document.createElement('div')
-	new_list_dom.classList.add("aplayer-list");
+   new_list_dom.classList.add('aplayer-list')
-	new_list_dom.style.maxHeight = ap.options.listMaxHeight;
+   new_list_dom.style.maxHeight = ap.options.listMaxHeight
 
-	ap.on("listadd", () => {
+   ap.on('listadd', () => {
-		ap.list.audios.forEach(v => {
+      ap.list.audios.forEach((v) => {
-			!v.id && (v.id = Math.random());
+         !v.id && (v.id = Math.random())
-		});
+      })
-	});
+   })
-	ap.on("listshow", () => {
+   ap.on('listshow', () => {
-		new_list_dom.classList.remove("aplayer-list-hide");
+      new_list_dom.classList.remove('aplayer-list-hide')
-	});
+   })
-	ap.on("listhide", () => {
+   ap.on('listhide', () => {
-		new_list_dom.classList.add("aplayer-list-hide");
+      new_list_dom.classList.add('aplayer-list-hide')
-	});
+   })
 
-	container.appendChild(new_list_dom);
+   container.appendChild(new_list_dom)
-	const app = createApp(aplayerListNew, { ap, ...(options ?? {}) });
+   const app = createApp(aplayerListNew, { ap, ...(options ?? {}) })
-	app.mount(new_list_dom);
+   app.mount(new_list_dom)
 
-	ap.on("destroy", () => {
+   ap.on('destroy', () => {
-		app.unmount();
+      app.unmount()
-	});
+   })
-	return app;
+   return app
-};
+}
 
-export default useAplayerMiao;
+export default useAplayerMiao

src/plugins/miaoMusicPlayer/miaoMusicPlayer.vue

@@ -2,11 +2,26 @@
    <miao-drop-handler @on-virtual-files="handleDropVFiles">
       <miao-alert-tip-provider ref="miaoMessageRef">
          <div class="miaoMusic-container">
-                <miao-music-main v-if="ap" :ap="ap" v-model:data="data" :updateLocalData="updateLocalData"
+            <miao-music-main
-                    @new-collection="saveCurrPlayList"></miao-music-main>
+               v-if="ap"
-                <miao-mask :show="isAPlayerListShow" style="z-index: 5" @click="() => ap?.list.hide()"></miao-mask>
+               :ap="ap"
-                <div ref="aplayer" style="z-index: 10" />
+               v-model:data="data"
-                <miao-mask :show="isSavingCollection" @click="isSavingCollection = false"></miao-mask>
+               :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>
@@ -110,7 +125,10 @@ const saveCurrPlayList = () => {
          intro: 'none',
          createTime: new Date(),
          coverUrl: '',
-            audios: cloneDeep(ap.value.list.audios).map((v, i) => ({ ...v, index: i }))
+         audios: cloneDeep(ap.value.list.audios).map((v, i) => ({
+            ...v,
+            index: i
+         }))
       })
       miaoMessageRef.value?.alertTip('已创建新的歌单', {
          timeout: 1000,
@@ -130,8 +148,8 @@ const initAPlayerMiao = () => {
    }
    ap.value = reactive<apType>(new APlayer(aplayerOption))
    vueApp = useAplayerMiao(ap.value, {
-        onDragItemStart: () => { },
+      onDragItemStart: () => {},
-        onDragItemEnd: () => { },
+      onDragItemEnd: () => {},
       onPlayVideo: (element) => {
          pluginCenter.usePlugin(
             'miaoVideoPlayer',
@@ -162,20 +180,30 @@ const initAPlayerMiao = () => {
    })
 }
 
-const updateLocalData = debounce((log?: boolean) => {
+const updateLocalData = debounce(
-    log && miaoMessageRef.value?.alertTip(`保存设置成功`, {
+   (log?: boolean) => {
+      log &&
+         miaoMessageRef.value?.alertTip(`保存设置成功`, {
             type: 'success',
-        timeout: 999,
+            timeout: 999
          })
-    localForage.setItem('miaoMusic-storage-musicCollections', toRaw(data.value))
+      localForage.setItem(
-}, 1000, {
+         'miaoMusic-storage-musicCollections',
-    'leading': false,
+         toRaw(data.value)
-    'trailing': true
+      )
-})
+   },
+   1000,
+   {
+      leading: false,
+      trailing: true
+   }
+)
 const getLocalData = async () => {
    const _data =
-        (await localForage.getItem('miaoMusic-storage-musicCollections') as collectionType[]) ?? []
+      ((await localForage.getItem(
-    _data.forEach(v => v.audios.sort((a, b) => a.index - b.index))
+         '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))
 }

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

@@ -2,7 +2,9 @@
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
    margin: 5px;
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .07), 0 1px 5px 0 rgba(0, 0, 0, .1);
+   box-shadow:
+      0 2px 2px 0 rgba(0, 0, 0, 0.07),
+      0 1px 5px 0 rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    overflow: hidden;
    -webkit-user-select: none;
@@ -10,16 +12,16 @@
    -ms-user-select: none;
    user-select: none;
    line-height: normal;
-    position: relative
+   position: relative;
 }
 
 .aplayer * {
-    box-sizing: content-box
+   box-sizing: content-box;
 }
 
 .aplayer svg {
    width: 100%;
-    height: 100%
+   height: 100%;
 }
 
 /* .aplayer svg circle,
@@ -28,46 +30,50 @@
 } */
 
 .aplayer.aplayer-withlist .aplayer-info {
-    border-bottom: 1px solid #e9e9e9
+   border-bottom: 1px solid #e9e9e9;
 }
 
 .aplayer.aplayer-withlist .aplayer-list {
-    display: block
+   display: block;
 }
 
 .aplayer.aplayer-withlist .aplayer-icon-order,
-.aplayer.aplayer-withlist .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-menu {
+.aplayer.aplayer-withlist
-    display: inline
+   .aplayer-info
+   .aplayer-controller
+   .aplayer-time
+   .aplayer-icon.aplayer-icon-menu {
+   display: inline;
 }
 
 .aplayer.aplayer-withlrc .aplayer-pic {
    height: 90px;
-    width: 90px
+   width: 90px;
 }
 
 .aplayer.aplayer-withlrc .aplayer-info {
    margin-left: 90px;
    height: 90px;
-    padding: 10px 7px 0
+   padding: 10px 7px 0;
 }
 
 .aplayer.aplayer-withlrc .aplayer-lrc {
-    display: block
+   display: block;
 }
 
 .aplayer.aplayer-narrow {
-    width: 66px
+   width: 66px;
 }
 
 .aplayer.aplayer-narrow .aplayer-info,
 .aplayer.aplayer-narrow .aplayer-list {
-    display: none
+   display: none;
 }
 
 .aplayer.aplayer-narrow .aplayer-body,
 .aplayer.aplayer-narrow .aplayer-pic {
    height: 66px;
-    width: 66px
+   width: 66px;
 }
 
 .aplayer.aplayer-fixed {
@@ -79,13 +85,13 @@
    z-index: 99;
    overflow: visible;
    max-width: 400px;
-    box-shadow: none
+   box-shadow: none;
 }
 
 .aplayer.aplayer-fixed .aplayer-list {
    margin-bottom: 65px;
    border: 1px solid #eee;
-    border-bottom: none
+   border-bottom: none;
 }
 
 .aplayer.aplayer-fixed .aplayer-body {
@@ -97,8 +103,8 @@
    z-index: 99;
    background: #fff;
    padding-right: 18px;
-    transition: all .3s ease;
+   transition: all 0.3s ease;
-    max-width: 400px
+   max-width: 400px;
 }
 
 .aplayer.aplayer-fixed .aplayer-lrc {
@@ -110,12 +116,12 @@
    margin: 0;
    z-index: 98;
    pointer-events: none;
-    text-shadow: -1px -1px 0 #fff
+   text-shadow: -1px -1px 0 #fff;
 }
 
 .aplayer.aplayer-fixed .aplayer-lrc:after,
 .aplayer.aplayer-fixed .aplayer-lrc:before {
-    display: none
+   display: none;
 }
 
 .aplayer.aplayer-fixed .aplayer-info {
@@ -123,39 +129,39 @@
    transform: scaleX(1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
-    transition: all .3s ease;
+   transition: all 0.3s ease;
    border-bottom: none;
-    border-top: 1px solid #e9e9e9
+   border-top: 1px solid #e9e9e9;
 }
 
 .aplayer.aplayer-fixed .aplayer-info .aplayer-music {
-    width: calc(100% - 105px)
+   width: calc(100% - 105px);
 }
 
 .aplayer.aplayer-fixed .aplayer-miniswitcher {
-    display: block
+   display: block;
 }
 
 .aplayer.aplayer-fixed.aplayer-narrow .aplayer-info {
    display: block;
    -webkit-transform: scaleX(0);
-    transform: scaleX(0)
+   transform: scaleX(0);
 }
 
 .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
-    width: 66px !important
+   width: 66px !important;
 }
 
 .aplayer.aplayer-fixed.aplayer-narrow .aplayer-miniswitcher .aplayer-icon {
    -webkit-transform: rotateY(0);
-    transform: rotateY(0)
+   transform: rotateY(0);
 }
 
 .aplayer.aplayer-fixed .aplayer-icon-back,
 .aplayer.aplayer-fixed .aplayer-icon-forward,
 .aplayer.aplayer-fixed .aplayer-icon-lrc,
 .aplayer.aplayer-fixed .aplayer-icon-play {
-    display: inline-block
+   display: inline-block;
 }
 
 .aplayer.aplayer-fixed .aplayer-icon-back,
@@ -165,42 +171,51 @@
    position: absolute;
    bottom: 27px;
    width: 20px;
-    height: 20px
+   height: 20px;
 }
 
 .aplayer.aplayer-fixed .aplayer-icon-back {
-    right: 75px
+   right: 75px;
 }
 
 .aplayer.aplayer-fixed .aplayer-icon-play {
-    right: 50px
+   right: 50px;
 }
 
 .aplayer.aplayer-fixed .aplayer-icon-forward {
-    right: 25px
+   right: 25px;
 }
 
 .aplayer.aplayer-fixed .aplayer-icon-menu {
-    right: 0
+   right: 0;
 }
 
 .aplayer.aplayer-arrow .aplayer-icon-loop,
 .aplayer.aplayer-arrow .aplayer-icon-order,
 .aplayer.aplayer-mobile .aplayer-icon-volume-down {
-    display: none
+   display: none;
 }
 
-.aplayer.aplayer-loading .aplayer-info .aplayer-controller .aplayer-loading-icon {
+.aplayer.aplayer-loading
-    display: block
+   .aplayer-info
+   .aplayer-controller
+   .aplayer-loading-icon {
+   display: block;
 }
 
-.aplayer.aplayer-loading .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
+.aplayer.aplayer-loading
+   .aplayer-info
+   .aplayer-controller
+   .aplayer-bar-wrap
+   .aplayer-bar
+   .aplayer-played
+   .aplayer-thumb {
    -webkit-transform: scale(1);
-    transform: scale(1)
+   transform: scale(1);
 }
 
 .aplayer .aplayer-body {
-    position: relative
+   position: relative;
 }
 
 .aplayer .aplayer-icon {
@@ -210,16 +225,16 @@
    background-color: transparent;
    outline: none;
    cursor: pointer;
-    opacity: .8;
+   opacity: 0.8;
    vertical-align: middle;
    padding: 0;
    font-size: 12px;
    margin: 0;
-    display: inline-block
+   display: inline-block;
 }
 
 .aplayer .aplayer-icon path {
-    transition: all .2s ease-in-out
+   transition: all 0.2s ease-in-out;
 }
 
 .aplayer .aplayer-icon-back,
@@ -227,20 +242,20 @@
 .aplayer .aplayer-icon-lrc,
 .aplayer .aplayer-icon-order,
 .aplayer .aplayer-icon-play {
-    display: none
+   display: none;
 }
 
 .aplayer .aplayer-icon-lrc-inactivity svg {
-    opacity: .4
+   opacity: 0.4;
 }
 
 .aplayer .aplayer-icon-forward {
    -webkit-transform: rotate(180deg);
-    transform: rotate(180deg)
+   transform: rotate(180deg);
 }
 
 .aplayer .aplayer-lrc-content {
-    display: none
+   display: none;
 }
 
 .aplayer .aplayer-pic {
@@ -250,30 +265,30 @@
    width: 66px;
    background-size: cover;
    background-position: 50%;
-    transition: all .3s ease;
+   transition: all 0.3s ease;
-    cursor: pointer
+   cursor: pointer;
 }
 
 .aplayer .aplayer-pic:hover .aplayer-button {
-    opacity: 1
+   opacity: 1;
 }
 
 .aplayer .aplayer-pic .aplayer-button {
    position: absolute;
    border-radius: 50%;
-    opacity: .8;
+   opacity: 0.8;
-    text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
+   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
+   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-    background: rgba(0, 0, 0, .2);
+   background: rgba(0, 0, 0, 0.2);
-    transition: all .1s ease
+   transition: all 0.1s ease;
 }
 
 .aplayer .aplayer-pic .aplayer-button path {
-    fill: #fff
+   fill: #fff;
 }
 
 .aplayer .aplayer-pic .aplayer-hide {
-    display: none
+   display: none;
 }
 
 .aplayer .aplayer-pic .aplayer-play {
@@ -282,7 +297,7 @@
    border: 2px solid #fff;
    bottom: 50%;
    right: 50%;
-    margin: 0 -15px -15px 0
+   margin: 0 -15px -15px 0;
 }
 
 .aplayer .aplayer-pic .aplayer-play svg {
@@ -290,7 +305,7 @@
    top: 3px;
    left: 4px;
    height: 20px;
-    width: 20px
+   width: 20px;
 }
 
 .aplayer .aplayer-pic .aplayer-pause {
@@ -298,7 +313,7 @@
    height: 16px;
    border: 2px solid #fff;
    bottom: 4px;
-    right: 4px
+   right: 4px;
 }
 
 .aplayer .aplayer-pic .aplayer-pause svg {
@@ -306,14 +321,14 @@
    top: 2px;
    left: 2px;
    height: 12px;
-    width: 12px
+   width: 12px;
 }
 
 .aplayer .aplayer-info {
    margin-left: 66px;
    padding: 14px 7px 0 10px;
    height: 66px;
-    box-sizing: border-box
+   box-sizing: border-box;
 }
 
 .aplayer .aplayer-info .aplayer-music {
@@ -327,7 +342,7 @@
    user-select: text;
    cursor: default;
    padding-bottom: 2px;
-    height: 20px
+   height: 20px;
 }
 
 .aplayer .aplayer-info .aplayer-music .aplayer-title {
@@ -337,52 +352,74 @@
 
 .aplayer .aplayer-info .aplayer-music .aplayer-author {
    font-size: 12px;
-    color: #666
+   color: #666;
 }
 
 .aplayer .aplayer-info .aplayer-controller {
    position: relative;
-    display: flex
+   display: flex;
 }
 
 .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
    margin: 0 0 0 5px;
    padding: 4px 0;
    cursor: pointer !important;
-    flex: 1
+   flex: 1;
 }
 
-.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap:hover .aplayer-bar .aplayer-played .aplayer-thumb {
+.aplayer
+   .aplayer-info
+   .aplayer-controller
+   .aplayer-bar-wrap:hover
+   .aplayer-bar
+   .aplayer-played
+   .aplayer-thumb {
    -webkit-transform: scale(1);
-    transform: scale(1)
+   transform: scale(1);
 }
 
 .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
    position: relative;
    height: 2px;
    width: 100%;
-    background: #cdcdcd
+   background: #cdcdcd;
 }
 
-.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
+.aplayer
+   .aplayer-info
+   .aplayer-controller
+   .aplayer-bar-wrap
+   .aplayer-bar
+   .aplayer-loaded {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: #aaa;
    height: 2px;
-    transition: all .5s ease
+   transition: all 0.5s ease;
 }
 
-.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
+.aplayer
+   .aplayer-info
+   .aplayer-controller
+   .aplayer-bar-wrap
+   .aplayer-bar
+   .aplayer-played {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
-    height: 2px
+   height: 2px;
 }
 
-.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
+.aplayer
+   .aplayer-info
+   .aplayer-controller
+   .aplayer-bar-wrap
+   .aplayer-bar
+   .aplayer-played
+   .aplayer-thumb {
    position: absolute;
    top: 0;
    right: 5px;
@@ -392,9 +429,9 @@
    width: 10px;
    border-radius: 50%;
    cursor: pointer;
-    transition: all .3s ease-in-out;
+   transition: all 0.3s ease-in-out;
    -webkit-transform: scale(0);
-    transform: scale(0)
+   transform: scale(0);
 }
 
 .aplayer .aplayer-info .aplayer-controller .aplayer-time {
@@ -404,28 +441,37 @@
    height: 17px;
    color: #999;
    font-size: 11px;
-    padding-left: 7px
+   padding-left: 7px;
 }
 
 .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner {
-    vertical-align: middle
+   vertical-align: middle;
 }
 
 .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon {
    cursor: pointer;
-    transition: all .2s ease
+   transition: all 0.2s ease;
 }
 
 .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path {
-    fill: #666
+   fill: #666;
 }
 
-.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-loop {
+.aplayer
-    margin-right: 2px
+   .aplayer-info
+   .aplayer-controller
+   .aplayer-time
+   .aplayer-icon.aplayer-icon-loop {
+   margin-right: 2px;
 }
 
-.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon:hover path {
+.aplayer
-    fill: #000
+   .aplayer-info
+   .aplayer-controller
+   .aplayer-time
+   .aplayer-icon:hover
+   path {
+   fill: #000;
 }
 
 /* .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-menu,
@@ -438,14 +484,22 @@
    position: relative;
    display: inline-block;
    margin-left: 3px;
-    cursor: pointer !important
+   cursor: pointer !important;
 }
 
-.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap:hover .aplayer-volume-bar-wrap {
+.aplayer
-    height: 40px
+   .aplayer-info
+   .aplayer-controller
+   .aplayer-volume-wrap:hover
+   .aplayer-volume-bar-wrap {
+   height: 40px;
 }
 
-.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap {
+.aplayer
+   .aplayer-info
+   .aplayer-controller
+   .aplayer-volume-wrap
+   .aplayer-volume-bar-wrap {
    position: absolute;
    bottom: 15px;
    right: -3px;
@@ -453,14 +507,23 @@
    height: 0;
    z-index: 99;
    overflow: hidden;
-    transition: all .2s ease-in-out
+   transition: all 0.2s ease-in-out;
 }
 
-.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap.aplayer-volume-bar-wrap-active {
+.aplayer
-    height: 40px
+   .aplayer-info
+   .aplayer-controller
+   .aplayer-volume-wrap
+   .aplayer-volume-bar-wrap.aplayer-volume-bar-wrap-active {
+   height: 40px;
 }
 
-.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar {
+.aplayer
+   .aplayer-info
+   .aplayer-controller
+   .aplayer-volume-wrap
+   .aplayer-volume-bar-wrap
+   .aplayer-volume-bar {
    position: absolute;
    bottom: 0;
    right: 10px;
@@ -468,25 +531,31 @@
    height: 35px;
    background: #aaa;
    border-radius: 2.5px;
-    overflow: hidden
+   overflow: hidden;
 }
 
-.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume {
+.aplayer
+   .aplayer-info
+   .aplayer-controller
+   .aplayer-volume-wrap
+   .aplayer-volume-bar-wrap
+   .aplayer-volume-bar
+   .aplayer-volume {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 5px;
-    transition: all .1s ease
+   transition: all 0.1s ease;
 }
 
 .aplayer .aplayer-info .aplayer-controller .aplayer-loading-icon {
-    display: none
+   display: none;
 }
 
 .aplayer .aplayer-info .aplayer-controller .aplayer-loading-icon svg {
    position: absolute;
    -webkit-animation: rotate 1s linear infinite;
-    animation: rotate 1s linear infinite
+   animation: rotate 1s linear infinite;
 }
 
 .aplayer .aplayer-lrc {
@@ -495,14 +564,14 @@
    height: 30px;
    text-align: center;
    overflow: hidden;
-    margin: -10px 0 7px
+   margin: -10px 0 7px;
 }
 
 .aplayer .aplayer-lrc:before {
    top: 0;
    height: 10%;
    background: linear-gradient(180deg, #fff 0, hsla(0, 0%, 100%, 0));
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#00ffffff", GradientType=0)
+   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#00ffffff", GradientType=0);
 }
 
 .aplayer .aplayer-lrc:after,
@@ -512,14 +581,18 @@
    display: block;
    overflow: hidden;
    width: 100%;
-    content: " "
+   content: ' ';
 }
 
 .aplayer .aplayer-lrc:after {
    bottom: 0;
    height: 33%;
-    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .8));
+   background: linear-gradient(
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffffff", endColorstr="#ccffffff", GradientType=0)
+      180deg,
+      hsla(0, 0%, 100%, 0) 0,
+      hsla(0, 0%, 100%, 0.8)
+   );
+   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffffff", endColorstr="#ccffffff", GradientType=0);
 }
 
 .aplayer .aplayer-lrc p {
@@ -529,62 +602,62 @@
    height: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
-    transition: all .5s ease-out;
+   transition: all 0.5s ease-out;
-    opacity: .4;
+   opacity: 0.4;
-    overflow: hidden
+   overflow: hidden;
 }
 
 .aplayer .aplayer-lrc p.aplayer-lrc-current {
    opacity: 1;
    overflow: visible;
    height: auto !important;
-    min-height: 16px
+   min-height: 16px;
 }
 
 .aplayer .aplayer-lrc.aplayer-lrc-hide {
-    display: none
+   display: none;
 }
 
 .aplayer .aplayer-lrc .aplayer-lrc-contents {
    width: 100%;
-    transition: all .5s ease-out;
+   transition: all 0.5s ease-out;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
-    cursor: default
+   cursor: default;
 }
 
 .aplayer .aplayer-list {
    overflow: auto;
-    transition: all .35s ease;
+   transition: all 0.35s ease;
    will-change: height;
    /* display: none; */
-    overflow: hidden
+   overflow: hidden;
 }
 
 .aplayer .aplayer-list.aplayer-list-hide {
-    max-height: 0 !important
+   max-height: 0 !important;
 }
 
 .aplayer .aplayer-list ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
-    overflow-y: auto
+   overflow-y: auto;
 }
 
 .aplayer .aplayer-list ol::-webkit-scrollbar {
-    width: 5px
+   width: 5px;
 }
 
 .aplayer .aplayer-list ol::-webkit-scrollbar-thumb {
    border-radius: 3px;
-    background-color: #eee
+   background-color: #eee;
 }
 
 .aplayer .aplayer-list ol::-webkit-scrollbar-thumb:hover {
-    background-color: #ccc
+   background-color: #ccc;
 }
 
 .aplayer .aplayer-list ol li {
@@ -596,13 +669,13 @@
    border-top: 1px solid #e9e9e9;
    cursor: pointer;
    /* transition: all .2s ease; */
-    transition: background .2s ease;
+   transition: background 0.2s ease;
    overflow: hidden;
-    margin: 0
+   margin: 0;
 }
 
 .aplayer .aplayer-list ol li:first-child {
-    border-top: none
+   border-top: none;
 }
 
 /* .aplayer .aplayer-list ol li:hover {
@@ -610,11 +683,11 @@
 } */
 
 .aplayer .aplayer-list ol li.aplayer-list-light {
-    background: #e9e9e9
+   background: #e9e9e9;
 }
 
 .aplayer .aplayer-list ol li.aplayer-list-light .aplayer-list-cur {
-    display: inline-block
+   display: inline-block;
 }
 
 .aplayer .aplayer-list ol li .aplayer-list-cur {
@@ -624,19 +697,19 @@
    position: absolute;
    left: 0;
    top: 5px;
-    cursor: pointer
+   cursor: pointer;
 }
 
 .aplayer .aplayer-list ol li .aplayer-list-index {
    color: #666;
    margin-right: 12px;
-    cursor: pointer
+   cursor: pointer;
 }
 
 .aplayer .aplayer-list ol li .aplayer-list-author {
    color: #666;
    float: right;
-    cursor: pointer
+   cursor: pointer;
 }
 
 .aplayer .aplayer-notice {
@@ -649,12 +722,12 @@
    font-size: 12px;
    border-radius: 4px;
    padding: 5px 10px;
-    transition: all .3s ease-in-out;
+   transition: all 0.3s ease-in-out;
    overflow: hidden;
    color: #fff;
    pointer-events: none;
    background-color: #f4f4f5;
-    color: #909399
+   color: #909399;
 }
 
 .aplayer .aplayer-miniswitcher {
@@ -666,7 +739,7 @@
    height: 100%;
    background: #e6e6e6;
    width: 18px;
-    border-radius: 0 2px 2px 0
+   border-radius: 0 2px 2px 0;
 }
 
 .aplayer .aplayer-miniswitcher .aplayer-icon {
@@ -674,57 +747,57 @@
    width: 100%;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
-    transition: all .3s ease
+   transition: all 0.3s ease;
 }
 
 .aplayer .aplayer-miniswitcher .aplayer-icon path {
-    fill: #666
+   fill: #666;
 }
 
 .aplayer .aplayer-miniswitcher .aplayer-icon:hover path {
-    fill: #000
+   fill: #000;
 }
 
 @-webkit-keyframes aplayer-roll {
    0% {
-        left: 0
+      left: 0;
    }
 
    to {
-        left: -100%
+      left: -100%;
    }
 }
 
 @keyframes aplayer-roll {
    0% {
-        left: 0
+      left: 0;
    }
 
    to {
-        left: -100%
+      left: -100%;
    }
 }
 
 @-webkit-keyframes rotate {
    0% {
       -webkit-transform: rotate(0);
-        transform: rotate(0)
+      transform: rotate(0);
    }
 
    to {
       -webkit-transform: rotate(1turn);
-        transform: rotate(1turn)
+      transform: rotate(1turn);
    }
 }
 
 @keyframes rotate {
    0% {
       -webkit-transform: rotate(0);
-        transform: rotate(0)
+      transform: rotate(0);
    }
 
    to {
       -webkit-transform: rotate(1turn);
-        transform: rotate(1turn)
+      transform: rotate(1turn);
    }
 }

src/plugins/miaoMusicPlayer/src/collectionInfo.vue

@@ -1,21 +1,32 @@
 <template>
    <div class="collection-info-container">
       <div class="collection-info-container-top">
-            <div class="collection-info-container-top-exit" @click="emit('exit')">
+         <div
+            class="collection-info-container-top-exit"
+            @click="emit('exit')"
+         >
             <ArrowBackOutline></ArrowBackOutline>
          </div>
          <div class="collection-info-container-top-title">
-                <span :tooltip="false" v-if="!isEditing">
+            <span
+               :tooltip="false"
+               v-if="!isEditing"
+            >
                {{ collection.name }}
             </span>
-                <n-input v-if="isEditing" v-model:value="collection.name"></n-input>
+            <n-input
+               v-if="isEditing"
+               v-model:value="collection.name"
+            ></n-input>
          </div>
 
-            <div class="collection-info-container-top-delete" v-if="isEditing" @click="
+         <div
-                clickDeleteCount !== 2
+            class="collection-info-container-top-delete"
-                    ? clickDeleteCount++
+            v-if="isEditing"
-                    : emit('deleteSelf')
+            @click="
-                ">
+               clickDeleteCount !== 2 ? clickDeleteCount++ : emit('deleteSelf')
+            "
+         >
             <TrashOutline></TrashOutline>
             <span>
                {{
@@ -29,7 +40,10 @@
          </div>
       </div>
       <div class="collection-info-container-controller">
-            <div class="collection-info-container-controller-play" @click="emit('playAll', collection)">
+         <div
+            class="collection-info-container-controller-play"
+            @click="emit('playAll', collection)"
+         >
             <div class="collection-info-container-controller-play-icon">
                <CaretForwardOutline></CaretForwardOutline>
             </div>
@@ -38,39 +52,63 @@
             </div>
          </div>
          <div class="collection-info-container-controller-right">
-                <div class="collection-info-container-controller-edit" @click="isEditing = !isEditing">
+            <div
-                    <component :is="isEditing ? CheckmarkOutline : CreateOutline
+               class="collection-info-container-controller-edit"
-                        "></component>
+               @click="isEditing = !isEditing"
+            >
+               <component
+                  :is="isEditing ? CheckmarkOutline : CreateOutline"
+               ></component>
             </div>
          </div>
       </div>
       <NScrollbar>
          <div class="collection-info-container-audioList">
-                <VueDraggable v-model="collection.audios" :animation="150"
+            <VueDraggable
-                    handle=".collection-info-container-audioList-item-controller-item-drag" ghostClass="iSDragging"
+               v-model="collection.audios"
-                    @end="updateAudiosIndex">
+               :animation="150"
-                    <div v-for="(audio, index) in collection.audios" class="collection-info-container-audioList-item">
+               handle=".collection-info-container-audioList-item-controller-item-drag"
+               ghostClass="iSDragging"
+               @end="updateAudiosIndex"
+            >
+               <div
+                  v-for="(audio, index) in collection.audios"
+                  class="collection-info-container-audioList-item"
+               >
                   <div class="collection-info-container-audioList-item-index">
                      <div>{{ index + 1 }}</div>
                   </div>
                   <div class="collection-info-container-audioList-item-info">
-                            <div v-if="!isEditing" class="collection-info-container-audioList-item-info-name">
+                     <div
+                        v-if="!isEditing"
+                        class="collection-info-container-audioList-item-info-name"
+                     >
                         <NEllipsis :tooltip="false">
                            {{ audio.name }}
                         </NEllipsis>
                      </div>
-                            <n-input v-model:value="audio.name" v-if="isEditing"></n-input>
+                     <n-input
+                        v-model:value="audio.name"
+                        v-if="isEditing"
+                     ></n-input>
                   </div>
-                        <div class="collection-info-container-audioList-item-controller">
+                  <div
-                            <PlayOutline class="collection-info-container-audioList-item-controller-item"
+                     class="collection-info-container-audioList-item-controller"
-                                v-if="!isEditing" @click="
+                  >
-                                    emit('playAll', collection, index)
+                     <PlayOutline
-                                    "></PlayOutline>
+                        class="collection-info-container-audioList-item-controller-item"
-                            <TrashOutline class="collection-info-container-audioList-item-controller-item"
+                        v-if="!isEditing"
-                                v-if="isEditing" @click="handleDelete(index)"></TrashOutline>
+                        @click="emit('playAll', collection, index)"
-                            <ReorderFourOutline v-if="isEditing"
+                     ></PlayOutline>
-                                class="collection-info-container-audioList-item-controller-item collection-info-container-audioList-item-controller-item-drag">
+                     <TrashOutline
-                            </ReorderFourOutline>
+                        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>
@@ -108,7 +146,10 @@ const handleDelete = (index: number) => {
 }
 
 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<{
@@ -187,7 +228,7 @@ $ig: linear-gradient(90deg, #a1ee5e 0%, #00e3ae 100%);
          user-select: none;
          cursor: pointer;
 
-            &>span {
+         & > span {
             position: relative;
             top: 3px;
             margin-left: 3px;
@@ -205,7 +246,7 @@ $ig: linear-gradient(90deg, #a1ee5e 0%, #00e3ae 100%);
          display: flex;
          align-items: center;
 
-            &>div {
+         & > div {
             cursor: pointer;
          }
 
@@ -238,7 +279,7 @@ $ig: linear-gradient(90deg, #a1ee5e 0%, #00e3ae 100%);
          align-items: center;
          justify-content: flex-end;
 
-            &>div {
+         & > div {
             margin: 0 10px;
             cursor: pointer;
             height: 25px;
@@ -266,7 +307,7 @@ $ig: linear-gradient(90deg, #a1ee5e 0%, #00e3ae 100%);
             font-size: 24px;
             text-align: right;
 
-                &>div {
+            & > div {
                margin: auto;
                width: fit-content;
             }

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

@@ -1,9 +1,13 @@
 <template>
    <div class="aplayer-list-top">
-        <div @click="loopModeToggle" class="aplayer-list-top-loopMode">
+      <div
+         @click="loopModeToggle"
+         class="aplayer-list-top-loopMode"
+      >
          <component
             :is="loopModeMap[loopMode].icon"
-                class="aplayer-list-top-loopMode-icon"></component>
+            class="aplayer-list-top-loopMode-icon"
+         ></component>
          <span class="aplayer-list-top-loopMode-name">
             {{ loopModeMap[loopMode].name }}
          </span>
@@ -12,7 +16,8 @@
          <AddCircleOutline
             v-if="onSaveCollection"
             class="aplayer-list-top-buttons-icon"
-                @click="onSaveCollection(ap.list.audios)"></AddCircleOutline>
+            @click="onSaveCollection(ap.list.audios)"
+         ></AddCircleOutline>
       </div>
       <span></span>
    </div>
@@ -22,7 +27,8 @@
          !isDragging ? 'miaoMusic-ol-isDragging' : 'miaoMusic-ol-notDragging'
       ]"
       :key="refreshKey"
-        ref="ol">
+      ref="ol"
+   >
       <VueDraggable
          v-model="ap.list.audios"
          @start="onDragStart"
@@ -30,70 +36,79 @@
          item-key="id"
          handle=".aplayer-list-control-btn-reorder"
          ghostClass="iSDragging"
-            :animation="150">
+         :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">
+            :key="element.id"
+         >
             <span
                class="aplayer-list-cur"
-                    :style="{ backgroundColor: apTheme }"></span>
+               :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)">
+                  @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)">
+                  @click.stop="switchAudio(index)"
+               >
                   <component
                      :is="
                         activeAudioIndex == index && !isPaused
                            ? PauseOutline
                            : PlayOutline
                      "
-                            class="aplayer-list-control-btn-svg"></component>
+                     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">
+                  v-if="false"
+               >
                   <HeartOutline class="aplayer-list-control-btn-svg" />
                </div>
                <div
                   class="aplayer-list-control-btn"
                   @click.stop="listAudioUp(index)"
-                        v-if="false">
+                  v-if="false"
-                        <ChevronUpOutline
+               >
-                            class="aplayer-list-control-btn-svg" />
+                  <ChevronUpOutline class="aplayer-list-control-btn-svg" />
                </div>
                <div
                   class="aplayer-list-control-btn"
                   @click.stop="listAudioDown(index)"
-                        v-if="false">
+                  v-if="false"
-                        <ChevronDownOutline
+               >
-                            class="aplayer-list-control-btn-svg" />
+                  <ChevronDownOutline class="aplayer-list-control-btn-svg" />
                </div>
                <div
                   class="aplayer-list-control-btn aplayer-list-control-btn-hover"
-                        @click.stop="listAudioRemove(index)">
+                  @click.stop="listAudioRemove(index)"
+               >
                   <CloseOutline class="aplayer-list-control-btn-svg" />
                </div>
                <div
-                        class="aplayer-list-control-btn aplayer-list-control-btn-reorder">
+                  class="aplayer-list-control-btn aplayer-list-control-btn-reorder"
-                        <ReorderFourOutline
+               >
-                            class="aplayer-list-control-btn-svg" />
+                  <ReorderFourOutline class="aplayer-list-control-btn-svg" />
                </div>
             </div>
             <span
                class="aplayer-list-author"
-                    v-show="element.artist !== 'Audio artist1'">
+               v-show="element.artist !== 'Audio artist1'"
+            >
                {{ element.artist }}
             </span>
          </li>

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

@@ -1,10 +1,17 @@
 <template>
-    <div class="collection" @click="emit('onenter')">
+   <div
-        <div class="collection-cover" @click.stop="emit('onPlay')">
+      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" />
+            :src="item.coverUrl"
+         />
          <div class="collection-cover-play">
             <Play></Play>
          </div>
@@ -52,8 +59,10 @@ const dateStr = computed(() =>
    height: 50px;
    position: relative;
    display: flex;
-    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
+   box-shadow:
-        0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+      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;

src/plugins/miaoMusicPlayer/src/main.vue

@@ -8,18 +8,21 @@
                v-model="collections"
                :animation="150"
                :delay="100"
-                    ghostClass="iSDragging">
+               ghostClass="iSDragging"
+            >
                <collection
                   v-for="item in collections"
                   :item="item"
                   @on-play="handleCollectionsPlay(item)"
-                        @onenter="handleCollectionEnter(item)"></collection>
+                  @onenter="handleCollectionEnter(item)"
+               ></collection>
             </VueDraggable>
             <n-empty
                description="空空如也~"
                size="huge"
                style="margin-top: 200px"
-                    v-if="!data || data?.length === 0">
+               v-if="!data || data?.length === 0"
+            >
                <template #icon>
                   <n-icon>
                      <HandLeftOutline />
@@ -29,7 +32,8 @@
                   <n-button
                      size="small"
                      type="primary"
-                            @click="emit('newCollection')">
+                     @click="emit('newCollection')"
+                  >
                      立刻创建
                   </n-button>
                </template>
@@ -43,7 +47,8 @@
             v-if="currCollection"
             @exit="handleCollectionEnter(undefined)"
             @delete-self="handleCollectionDelete()"
-                @play-all="handleCollectionsPlay"></collectionInfo>
+            @play-all="handleCollectionsPlay"
+         ></collectionInfo>
       </Transition>
    </div>
 </template>

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;
+   id: number
-	name: string;
+   name: string
-	intro: string;
+   intro: string
-	createTime: Date;
+   createTime: Date
-	coverUrl?: string;
+   coverUrl?: string
-	audios: collectionItemType[];
+   audios: collectionItemType[]
-};
+}
 
-export default collectionType;
+export default collectionType

src/plugins/miaoPDF/export.ts

@@ -20,6 +20,5 @@ const pluginConfig: registerComponentOption = {
 
 export default pluginConfig
 
-
 import { PluginExportType } from '@/types/type'
 export const type = PluginExportType.component

src/plugins/miaoPDF/miaoPDF.vue

@@ -5,31 +5,36 @@
             <div
                class="miao-container-topBar-btn"
                @click="() => handleZoom(10)"
-                    title="快速缩小">
+               title="快速缩小"
+            >
                --
             </div>
             <div
                class="miao-container-topBar-btn"
                @click="() => handleZoom()"
-                    title="缩小">
+               title="缩小"
+            >
                -
             </div>
             <div
                class="miao-container-topBar-btn"
                @click="() => handleResetMargin()"
-                    title="还原">
+               title="还原"
+            >
                还原缩放
             </div>
             <div
                class="miao-container-topBar-btn"
                @click="() => handleShrink()"
-                    title="放大">
+               title="放大"
+            >
                +
             </div>
             <div
                class="miao-container-topBar-btn"
                @click="() => handleShrink(10)"
-                    title="快速放大">
+               title="快速放大"
+            >
                ++
             </div>
          </div>
@@ -38,13 +43,15 @@
                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>
             </div>
          </NScrollbar>
       </div>

src/plugins/miaoPluginTemplate/_export.ts

@@ -21,6 +21,5 @@ const pluginConfig: registerComponentOption = {
 
 export default pluginConfig
 
-
 import { PluginExportType } from '@/types/type'
 export const type = PluginExportType.component

src/plugins/miaoPluginTemplate/template.vue

@@ -8,7 +8,6 @@
 // const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
 //     required: true
 // })
-
 </script>
 
 <style scoped lang="scss">

src/plugins/miaoVideoPlayer/export.ts

@@ -28,6 +28,5 @@ const pluginConfig: registerComponentOption = {
 
 export default pluginConfig
 
-
 import { PluginExportType } from '@/types/type'
 export const type = PluginExportType.component

src/plugins/miaoVideoPlayer/miaoVideoPlayer.vue

@@ -1,7 +1,10 @@
 <template>
    <miao-drop-handler @on-virtual-files="handleDropVFiles">
       <div class="player-container">
-            <div ref="xgPlayer" id="xgplayer"></div>
+         <div
+            ref="xgPlayer"
+            id="xgplayer"
+         ></div>
       </div>
    </miao-drop-handler>
 </template>
@@ -20,7 +23,6 @@ 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
 })
@@ -28,20 +30,20 @@ const xgPlayer = ref()
 
 let _player: XGPlayer
 const { setVideo } = (() => {
-    const initPlayer = (videos: VirtualFile[], texttrack: {
+   const initPlayer = (
+      videos: VirtualFile[],
+      texttrack: {
          list: {
-            id: number; url: string
+            id: number
+            url: string
             text: string
          }[]
-    }) => {
+      }
+   ) => {
       const videoVFile = videos.shift() as VirtualFile
       _player && _player.destroy()
       _player = new XGPlayer({
-            plugins: [
+         plugins: [TextTrack, lockScreen, useXGPlayerVueFrame(xgplayerVueApp)],
-                TextTrack,
-                lockScreen,
-                useXGPlayerVueFrame(xgplayerVueApp),
-            ],
          el: xgPlayer.value,
          url: videoVFile.url,
          width: '100%',
@@ -52,7 +54,9 @@ const { setVideo } = (() => {
          videoFillMode: 'contain',
          autoplay: true,
          download: true,
-            ignores: [videos.length === 0 ? 'playNext' : undefined].filter(v => v) as string[],
+         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,
@@ -63,11 +67,11 @@ const { setVideo } = (() => {
             format: '.png'
          },
          playNext: {
-                urlList: videos.map(v => v.url)
+            urlList: videos.map((v) => v.url)
          },
          progress: {
             isDragingSeek: true
-            },
+         }
          // mobile: {
          //     disableGesture: true
          // }
@@ -82,7 +86,11 @@ const { setVideo } = (() => {
          textTrackFiles &&
             textTrackFiles.push(...findTextTrack(currentFiles.value))
          textTrackFiles = uniq(textTrackFiles)
-            currentFiles.value = uniq([...currentFiles.value, ...videoVFiles, ...(textTrackFiles ?? [])])
+         currentFiles.value = uniq([
+            ...currentFiles.value,
+            ...videoVFiles,
+            ...(textTrackFiles ?? [])
+         ])
          const videos = findVideo(uniq([...currentFiles.value, ...videoVFiles]))
          const _list = []
          if (textTrackFiles) {
@@ -205,22 +213,17 @@ function assToVtt(assContent: string) {
                .trim()
                .replace('.', ',')
                .replace(',', '.') // 替换 . 为 ,，然后再替换为 .
-                const endTime = parts[2]
+            const endTime = parts[2].trim().replace('.', ',').replace(',', '.') // 替换 . 为 ,，然后再替换为 .
-                    .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(
+                  return `${String(h).padStart(2, '0')}:${String(m).padStart(
-                            m
-                        ).padStart(2, '0')}:${String(s).padStart(
                      2,
                      '0'
-                        )}.${String(ms).padStart(3, '0')}`
+                  )}:${String(s).padStart(2, '0')}.${String(ms).padStart(3, '0')}`
                }
             )
 
@@ -228,12 +231,10 @@ function assToVtt(assContent: string) {
                /(\d+):(\d+):(\d+)\.(\d+)/,
                (match: any, h: any, m: any, s: any, ms: any) => {
                   match
-                        return `${String(h).padStart(2, '0')}:${String(
+                  return `${String(h).padStart(2, '0')}:${String(m).padStart(
-                            m
-                        ).padStart(2, '0')}:${String(s).padStart(
                      2,
                      '0'
-                        )}.${String(ms).padStart(3, '0')}`
+                  )}:${String(s).padStart(2, '0')}.${String(ms).padStart(3, '0')}`
                }
             )
 
@@ -297,14 +298,16 @@ function ssaToVtt(ssaContent: string): string {
 }
 
 const findVideo = (vFiles: VirtualFile[]) =>
-    uniq(vFiles.filter((v) => {
+   uniq(
+      vFiles.filter((v) => {
          for (let s of ['mp4', 'mp3', 'mkv']) {
             if (v.name.endsWith(s)) {
                return true
             }
          }
          return false
-    }))
+      })
+   )
 
 const findTextTrack = (vFiles: VirtualFile[]) =>
    vFiles.filter((v) => {
@@ -319,10 +322,7 @@ const findTextTrack = (vFiles: VirtualFile[]) =>
 onMounted(() => {
    if (currentFiles.value.length) {
       currentFiles.value.reverse()
-        setVideo(
+      setVideo(findVideo(currentFiles.value), findTextTrack(currentFiles.value))
-            findVideo(currentFiles.value),
-            findTextTrack(currentFiles.value)
-        )
    }
 })
 

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

@@ -10,7 +10,11 @@
    color: #f2f2f2;
    opacity: 1;
    visibility: visible;
-    transition: opacity 0.5s ease, visibility 0.5s ease, width 0.25s ease, left 0.25s ease;
+   transition:
+      opacity 0.5s ease,
+      visibility 0.5s ease,
+      width 0.25s ease,
+      left 0.25s ease;
    pointer-events: all !important;
    svg {
       width: inherit;

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

@@ -1,73 +1,78 @@
-import { BasePlugin } from "xgplayer";
+import { BasePlugin } from 'xgplayer'
-import "./lockScreen.scss";
+import './lockScreen.scss'
-import MobilePlugin from "xgplayer/es/plugins/mobile";
+import MobilePlugin from 'xgplayer/es/plugins/mobile'
 
 export default class LockPlugin extends BasePlugin {
    static get pluginName() {
-		return "lockPlugin";
+      return 'lockPlugin'
    }
 
-	private locked: boolean;
+   private locked: boolean
-	private lockDiv: HTMLDivElement = document.createElement("div");
+   private lockDiv: HTMLDivElement = document.createElement('div')
-	private overlayDiv: HTMLDivElement = document.createElement("div");
+   private overlayDiv: HTMLDivElement = document.createElement('div')
 
    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 = `
         <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);
+      super(args)
-		this.locked = false;
+      this.locked = false
    }
 
    afterCreate() {
-		this.initLockDiv();
+      this.initLockDiv()
-		this.initOverlayDiv();
+      this.initOverlayDiv()
-		this.bindEvents();
+      this.bindEvents()
    }
 
    private initLockDiv() {
-		this.lockDiv.innerHTML = this.lockClosedSVG;
+      this.lockDiv.innerHTML = this.lockClosedSVG
-		this.lockDiv.className = "lock-div";
+      this.lockDiv.className = 'lock-div'
-		this.player.root !== null && this.player.root.appendChild(this.lockDiv);
+      this.player.root !== null && this.player.root.appendChild(this.lockDiv)
    }
 
    private initOverlayDiv() {
-		this.overlayDiv.className = "overlay-div";
+      this.overlayDiv.className = 'overlay-div'
-		this.player.root !== null && this.player.root.appendChild(this.overlayDiv);
+      this.player.root !== null && this.player.root.appendChild(this.overlayDiv)
       this.overlayDiv.addEventListener('mousedown', (e) => {
-			e.preventDefault();
+         e.preventDefault()
-		});
+      })
       this.overlayDiv.addEventListener('mousemove', (e) => {
-			e.preventDefault();
+         e.preventDefault()
-		});
+      })
    }
 
    private bindEvents() {
-		this.lockDiv!.addEventListener("click", this.toggleLock.bind(this));
+      this.lockDiv!.addEventListener('click', this.toggleLock.bind(this))
-		this.player.root !== null && this.player.root.addEventListener("click", this.preventClick.bind(this), true);
+      this.player.root !== null &&
-		this.player.usePluginHooks("progress", "dragstart", () => {
+         this.player.root.addEventListener(
+            'click',
+            this.preventClick.bind(this),
+            true
+         )
+      this.player.usePluginHooks('progress', 'dragstart', () => {
          if (this.locked) {
-				return false;
+            return false
          }
-			return true;
+         return true
-		});
+      })
       // 阻止进度条默认行为
-        for(const event of ['dragstart', 'drag', 'dragend']) {
+      for (const event of ['dragstart', 'drag', 'dragend']) {
-            this.player.usePluginHooks("progress", event, () => {
+         this.player.usePluginHooks('progress', event, () => {
             if (this.locked) {
-                    return false;
+               return false
             }
-                return true;
+            return true
-            });
+         })
       }
    }
 
@@ -75,30 +80,46 @@ export default class LockPlugin extends BasePlugin {
       const mobile = this.getPlugin('mobile') as MobilePlugin | undefined
       // mobile?.disableGesture()
       if (this.lockDiv && this.overlayDiv) {
-			this.locked = !this.locked;
+         this.locked = !this.locked
-			this.lockDiv.innerHTML = this.locked ? this.lockOpenSVG : this.lockClosedSVG;
+         this.lockDiv.innerHTML = this.locked
-			this.overlayDiv.style.display = this.locked ? "block" : "none";
+            ? this.lockOpenSVG
-			this.player.controls && (this.locked ? this.player.controls.hide() : this.player.controls.show());
+            : this.lockClosedSVG
-			this.player.root !== null && this.player.root.classList.toggle("xgplayer-locked", this.locked);
+         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")) {
+      if (
-			event.stopPropagation();
+         this.locked &&
-			event.preventDefault();
+         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.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 !== null && this.player.root.removeChild(this.lockDiv);
+            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);
+         this.player.root !== null &&
+            this.player.root.removeChild(this.overlayDiv)
       }
    }
 }

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

@@ -5,9 +5,9 @@
 </template>
 
 <script setup lang="ts">
-import { Component, toRaw } from "vue";
+import { Component, toRaw } from 'vue'
-import Player from "xgplayer/es/player";
+import Player from 'xgplayer/es/player'
-import pick  from "lodash/pick";
+import pick from 'lodash/pick'
 const props = defineProps({
    player: {
       type: Player,
@@ -22,7 +22,6 @@ const props = defineProps({
       required: true
    }
 })
-
 </script>
 
 <style lang="scss" scoped>

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

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

src/plugins/miaoVideoPlayer/src/XGPlayerVuePluginRoot.vue

@@ -3,8 +3,8 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from "vue";
+import { onMounted } from 'vue'
-import Player from "xgplayer/es/player";
+import Player from 'xgplayer/es/player'
 const props = defineProps({
    player: {
       type: Player,
@@ -19,7 +19,6 @@ const props = defineProps({
 onMounted(() => {
    props
 })
-
 </script>
 
 <style lang="scss" scoped>

src/plugins/miaoVideoPlayer/style/xgplayer.scss

@@ -23,8 +23,16 @@
    bottom: 0;
    opacity: 1;
    z-index: 10;
-	background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.37), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75));
+   background-image: linear-gradient(
-	transition: opacity 0.5s ease, visibility 0.5s ease;
+      180deg,
+      transparent,
+      rgba(0, 0, 0, 0.37),
+      rgba(0, 0, 0, 0.75),
+      rgba(0, 0, 0, 0.75)
+   );
+   transition:
+      opacity 0.5s ease,
+      visibility 0.5s ease;
    cursor: default;
 }
 .xgplayer .xgplayer-controls.show {
@@ -178,7 +186,14 @@
    width: 100%;
    height: 100%;
    overflow: hidden;
-	font-family: PingFang SC, Helvetica Neue, Helvetica, STHeiTi, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
+   font-family:
+      PingFang SC,
+      Helvetica Neue,
+      Helvetica,
+      STHeiTi,
+      Microsoft YaHei,
+      WenQuanYi Micro Hei,
+      sans-serif;
    font-size: 14px;
    font-weight: 400;
    background: #000;
@@ -255,15 +270,15 @@
    height: 100%;
    outline: none;
 }
-.xgplayer[data-xgfill="contain"] video {
+.xgplayer[data-xgfill='contain'] video {
    -o-object-fit: contain;
    object-fit: contain;
 }
-.xgplayer[data-xgfill="cover"] video {
+.xgplayer[data-xgfill='cover'] video {
    -o-object-fit: cover;
    object-fit: cover;
 }
-.xgplayer[data-xgfill="fill"] video {
+.xgplayer[data-xgfill='fill'] video {
    -o-object-fit: fill;
    object-fit: fill;
 }
@@ -673,7 +688,9 @@
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
-	transition: opacity 0.3s ease, visibility 0.3s ease;
+   transition:
+      opacity 0.3s ease,
+      visibility 0.3s ease;
    pointer-events: none;
 }
 .xgplayer .xgplayer-poster.hide,
@@ -744,10 +761,10 @@
    display: block;
 }
 .xgplayer .xgplayer-start .xg-icon-pause,
-.xgplayer .xgplayer-start[data-state="pause"] .xg-icon-play {
+.xgplayer .xgplayer-start[data-state='pause'] .xg-icon-play {
    display: none;
 }
-.xgplayer .xgplayer-start[data-state="pause"] .xg-icon-pause,
+.xgplayer .xgplayer-start[data-state='pause'] .xg-icon-pause,
 .xgplayer .xgplayer-start.interact {
    display: block;
 }
@@ -888,7 +905,11 @@
    width: 100%;
    height: 100%;
    z-index: 11;
-	background: linear-gradient(180deg, rgba(57, 57, 57, 0.9), rgba(57, 57, 57, 0) 50.27%);
+   background: linear-gradient(
+      180deg,
+      rgba(57, 57, 57, 0.9),
+      rgba(57, 57, 57, 0) 50.27%
+   );
 }
 .xg-mini-layer .mask {
    pointer-events: none;
@@ -926,7 +947,7 @@
    align-items: center;
 }
 .xg-mini-layer xg-mini-header #disabledMini + label:before {
-	content: "";
+   content: '';
    color: #ff142b;
    background-color: transparent;
    border-radius: 2px;
@@ -946,7 +967,7 @@
    border-color: #ff142b;
 }
 .xg-mini-layer xg-mini-header #disabledMini:checked + label:after {
-	content: "";
+   content: '';
    position: absolute;
    width: 4px;
    height: 8px;
@@ -967,10 +988,18 @@
    background-color: #0000008a;
    display: none;
 }
-.xg-mini-layer xg-mini-header .xgplayer-mini-disableBtn:hover #disabledMini + label:before {
+.xg-mini-layer
+   xg-mini-header
+   .xgplayer-mini-disableBtn:hover
+   #disabledMini
+   + label:before {
    border-color: #ff142b;
 }
-.xg-mini-layer xg-mini-header .xgplayer-mini-disableBtn:hover #disabledMini + label {
+.xg-mini-layer
+   xg-mini-header
+   .xgplayer-mini-disableBtn:hover
+   #disabledMini
+   + label {
    color: #ff142b;
 }
 .xg-mini-layer xg-mini-header .xgplayer-mini-disableBtn:hover xg-tips {
@@ -1009,10 +1038,10 @@
    display: none;
 }
 .xg-mini-layer .xg-icon-pause,
-.xg-mini-layer[data-state="pause"] .xg-icon-play {
+.xg-mini-layer[data-state='pause'] .xg-icon-play {
    display: block;
 }
-.xg-mini-layer[data-state="pause"] .xg-icon-pause {
+.xg-mini-layer[data-state='pause'] .xg-icon-pause {
    display: none;
 }
 .xgplayer-miniicon {
@@ -1154,10 +1183,10 @@
 .xgplayer xg-trigger .xg-playbackrate {
    display: none;
 }
-.xgplayer xg-trigger[data-xg-action="seeking"] .time-preview {
+.xgplayer xg-trigger[data-xg-action='seeking'] .time-preview {
    display: block;
 }
-.xgplayer xg-trigger[data-xg-action="playbackrate"] .xg-playbackrate {
+.xgplayer xg-trigger[data-xg-action='playbackrate'] .xg-playbackrate {
    display: block;
 }
 .xgplayer .gradient {
@@ -1179,10 +1208,20 @@
    );
 }
 .xgplayer .gradient.top {
-	background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.36) 20%, rgba(0, 0, 0, 0) 36%, rgba(0, 0, 0, 0) 70%);
+   background-image: linear-gradient(
+      rgba(0, 0, 0, 0.6),
+      rgba(0, 0, 0, 0.36) 20%,
+      rgba(0, 0, 0, 0) 36%,
+      rgba(0, 0, 0, 0) 70%
+   );
 }
 .xgplayer .gradient.bottom {
-	background-image: linear-gradient(rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.24) 77%, rgba(0, 0, 0, 0.36) 83%, rgba(0, 0, 0, 0.6));
+   background-image: linear-gradient(
+      rgba(0, 0, 0, 0) 70%,
+      rgba(0, 0, 0, 0.24) 77%,
+      rgba(0, 0, 0, 0.36) 83%,
+      rgba(0, 0, 0, 0.6)
+   );
 }
 .xgplayer .gradient.none,
 .xgplayer-mobile .xgplayer-controls {
@@ -1315,7 +1354,9 @@ xg-loading-inner {
    flex: 1;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
-	transition: height 0.2s ease-in, opacity 0.2s ease-out;
+   transition:
+      height 0.2s ease-in,
+      opacity 0.2s ease-out;
    border-radius: inherit;
    margin-right: 2px;
    pointer-events: none;
@@ -1332,7 +1373,7 @@ xg-loading-inner {
 .xgplayer .inner-focus-point:after {
    position: absolute;
    top: 0;
-	content: " ";
+   content: ' ';
    display: block;
    width: 2px;
    height: 300%;
@@ -1381,7 +1422,7 @@ xg-loading-inner {
    pointer-events: none;
 }
 .xgplayer .xgplayer-progress-btn:before {
-	content: " ";
+   content: ' ';
    display: block;
    position: relative;
    width: 12px;
@@ -1452,7 +1493,9 @@ xg-loading-inner {
 .xgplayer.xgplayer-pc .xgplayer-progress.active .xgplayer-progress-outer {
    height: 6px;
    margin-bottom: 3px;
-	transition: height 0.3s ease, margin-bottom 0.3s ease;
+   transition:
+      height 0.3s ease,
+      margin-bottom 0.3s ease;
 }
 .xgplayer.xgplayer-pc .xgplayer-progress.active .xgplayer-progress-btn {
    transform: translate(-50%, -50%) scale(1);
@@ -1526,18 +1569,18 @@ xg-loading-inner {
    display: none;
 }
 .xgplayer .xgplayer-play .xg-icon-pause,
-.xgplayer .xgplayer-play[data-state="pause"] .xg-icon-play {
+.xgplayer .xgplayer-play[data-state='pause'] .xg-icon-play {
    display: block;
 }
-.xgplayer .xgplayer-play[data-state="pause"] .xg-icon-pause,
+.xgplayer .xgplayer-play[data-state='pause'] .xg-icon-pause,
 .xgplayer .xgplayer-fullscreen .xg-exit-fullscreen {
    display: none;
 }
 .xgplayer .xgplayer-fullscreen .xg-get-fullscreen,
-.xgplayer .xgplayer-fullscreen[data-state="full"] .xg-exit-fullscreen {
+.xgplayer .xgplayer-fullscreen[data-state='full'] .xg-exit-fullscreen {
    display: block;
 }
-.xgplayer .xgplayer-fullscreen[data-state="full"] .xg-get-fullscreen {
+.xgplayer .xgplayer-fullscreen[data-state='full'] .xg-get-fullscreen {
    display: none;
 }
 .xgplayer .xg-top-bar .xgplayer-back {
@@ -1612,7 +1655,7 @@ xg-loading-inner {
    outline: none;
 }
 .xgplayer .xgplayer-slider:after {
-	content: " ";
+   content: ' ';
    display: block;
    height: 15px;
    width: 28px;
@@ -1653,7 +1696,7 @@ xg-loading-inner {
    max-height: 76px;
 }
 .xgplayer .xgplayer-drag:after {
-	content: " ";
+   content: ' ';
    display: inline-block;
    width: 8px;
    height: 8px;
@@ -1664,23 +1707,23 @@ xg-loading-inner {
    left: -2px;
    top: -4px;
 }
-.xgplayer .xgplayer-volume[data-state="normal"] .xg-volume {
+.xgplayer .xgplayer-volume[data-state='normal'] .xg-volume {
    display: block;
 }
-.xgplayer .xgplayer-volume[data-state="normal"] .xg-volume-small,
+.xgplayer .xgplayer-volume[data-state='normal'] .xg-volume-small,
-.xgplayer .xgplayer-volume[data-state="normal"] .xg-volume-mute,
+.xgplayer .xgplayer-volume[data-state='normal'] .xg-volume-mute,
-.xgplayer .xgplayer-volume[data-state="small"] .xg-volume {
+.xgplayer .xgplayer-volume[data-state='small'] .xg-volume {
    display: none;
 }
-.xgplayer .xgplayer-volume[data-state="small"] .xg-volume-small {
+.xgplayer .xgplayer-volume[data-state='small'] .xg-volume-small {
    display: block;
 }
-.xgplayer .xgplayer-volume[data-state="small"] .xg-volume-mute,
+.xgplayer .xgplayer-volume[data-state='small'] .xg-volume-mute,
-.xgplayer .xgplayer-volume[data-state="mute"] .xg-volume,
+.xgplayer .xgplayer-volume[data-state='mute'] .xg-volume,
-.xgplayer .xgplayer-volume[data-state="mute"] .xg-volume-small {
+.xgplayer .xgplayer-volume[data-state='mute'] .xg-volume-small {
    display: none;
 }
-.xgplayer .xgplayer-volume[data-state="mute"] .xg-volume-mute {
+.xgplayer .xgplayer-volume[data-state='mute'] .xg-volume-mute {
    display: block;
 }
 .xgplayer.xgplayer-mobile .xgplayer-volume .xgplayer-slider,
@@ -1688,10 +1731,10 @@ xg-loading-inner {
    display: none;
 }
 .xgplayer .xgplayer-pip .xg-get-pip,
-.xgplayer .xgplayer-pip[data-state="pip"] .xg-exit-pip {
+.xgplayer .xgplayer-pip[data-state='pip'] .xg-exit-pip {
    display: block;
 }
-.xgplayer .xgplayer-pip[data-state="pip"] .xg-get-pip {
+.xgplayer .xgplayer-pip[data-state='pip'] .xg-get-pip {
    display: none;
 }
 .xgplayer .xgplayer-playnext {
@@ -1740,10 +1783,10 @@ xg-loading-inner {
    display: block;
 }
 .xgplayer .xgplayer-cssfullscreen .xg-exit-cssfull,
-.xgplayer .xgplayer-cssfullscreen[data-state="full"] .xg-get-cssfull {
+.xgplayer .xgplayer-cssfullscreen[data-state='full'] .xg-get-cssfull {
    display: none;
 }
-.xgplayer .xgplayer-cssfullscreen[data-state="full"] .xg-exit-cssfull {
+.xgplayer .xgplayer-cssfullscreen[data-state='full'] .xg-exit-cssfull {
    display: block;
 }
 .xgplayer-error {
@@ -1799,7 +1842,7 @@ xg-loading-inner {
    transform: translate(-50%);
 }
 .xgplayer .xgplayer-prompt.arrow:after {
-	content: "";
+   content: '';
    display: block;
    position: absolute;
    left: 50%;
@@ -1987,7 +2030,9 @@ xg-loading-inner {
    left: 0;
    opacity: 0;
    visibility: hidden;
-	transition: visibility 0.3s, opacity 0.3s;
+   transition:
+      visibility 0.3s,
+      opacity 0.3s;
    background-color: #000;
 }
 .xgplayer .xgvideo-preview .xgvideo-thumbnail {

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" &&
+      typeof obj === 'object' &&
-        obj!== null &&
+      obj !== null &&
-        typeof obj.name === "string" &&
+      typeof obj.name === 'string' &&
-        (obj.icon === undefined || typeof obj.icon === "object") &&
+      (obj.icon === undefined || typeof obj.icon === 'object') &&
-        typeof obj.disable === "boolean" &&
+      typeof obj.disable === 'boolean' &&
       Array.isArray(obj.group) &&
-        obj.group.every((group: any) => typeof group === "string") &&
+      obj.group.every((group: any) => typeof group === 'string') &&
-        typeof obj.priority === "number" &&
+      typeof obj.priority === 'number' &&
-        typeof obj.filter === "function" &&
+      typeof obj.filter === 'function' &&
-        typeof obj.func === "function"
+      typeof obj.func === 'function'
-    );
+   )
 }
 
-
+export function checkComponentPlugin(obj: any): obj is registerComponentOption {
-export function checkComponentPlugin(
-    obj: any
-): obj is registerComponentOption {
    return (
-        typeof obj === "object" &&
+      typeof obj === 'object' &&
-        obj!== null &&
+      obj !== null &&
-        typeof obj.key === "string" &&
+      typeof obj.key === 'string' &&
-        typeof obj.name === "string" &&
+      typeof obj.name === 'string' &&
-        (obj.icon === undefined || typeof obj.icon === "object") &&
+      (obj.icon === undefined || typeof obj.icon === 'object') &&
-        typeof obj.getComponent === "function" &&
+      typeof obj.getComponent === 'function' &&
-        ((obj.group === undefined) || (Array.isArray(obj.group) && obj.group.every((item: any) => typeof item === "string"))) &&
+      (obj.group === undefined ||
-        typeof obj.filter === "function" &&
+         (Array.isArray(obj.group) &&
-        (obj.disable === undefined || typeof obj.disable === "boolean") &&
+            obj.group.every((item: any) => typeof item === 'string'))) &&
-        (obj.exitConfirm === undefined || typeof obj.exitConfirm === "boolean") &&
+      typeof obj.filter === 'function' &&
-        (obj.single === undefined || typeof obj.single === "boolean") &&
+      (obj.disable === undefined || typeof obj.disable === 'boolean') &&
-        (obj.priority === undefined || typeof obj.priority === "number")
+      (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,18 +1,18 @@
-import { Plugin, PluginGroup } from "@/class/PluginCenter";
+import { Plugin, PluginGroup } from '@/class/PluginCenter'
-import { LogoGithub } from "@vicons/ionicons5";
+import { LogoGithub } from '@vicons/ionicons5'
-import { PluginExportType } from "@/types/type";
+import { PluginExportType } from '@/types/type'
-import { shallowRef } from "vue";
+import { shallowRef } from 'vue'
-import registerExternalPlugin from "./registerExternalPlugin";
+import registerExternalPlugin from './registerExternalPlugin'
 
 const pluginConfig: Plugin = {
-	name: "导入插件",
+   name: '导入插件',
    icon: shallowRef(LogoGithub),
    filter: (vDirs, vFiles) => {
       if (vDirs.length !== 0) {
-			return false;
+         return false
       }
       if (vFiles.length !== 1) {
-			return false;
+         return false
       }
       return vFiles[0].name.endsWith('js')
    },
@@ -20,10 +20,10 @@ const pluginConfig: Plugin = {
    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,33 +1,39 @@
-import VirtualDirectory, { VirtualFile } from "@/class/VirtualDirectory";
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
 // import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
-import { PluginExportType, usePluginHooksType } from "@/types/type";
+import { PluginExportType, usePluginHooksType } from '@/types/type'
-import type { Plugin, registerComponentOption } from "@/class/PluginCenter";
+import type { Plugin, registerComponentOption } from '@/class/PluginCenter'
-import { checkComponentPlugin, checkNormalPlugin } from "./checkPluginAvailable";
+import { checkComponentPlugin, checkNormalPlugin } from './checkPluginAvailable'
 
 // const miaoFetchApi = useMiaoFetchApi()
 
-export default async function registerExternalPlugin(_VDirectories: VirtualDirectory[], VFiles: VirtualFile[], hooks: usePluginHooksType) {
+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 {
+      const plugin = (await import(
-            default: registerComponentOption | Plugin;
+         /* @vite-ignore */ targetPluginVFile.url
-            type: PluginExportType;
+      )) as {
-            key?: string;
+         default: registerComponentOption | Plugin
+         type: PluginExportType
+         key?: string
       }
       const pc = hooks.getPluginCenter()
       if (plugin.type === PluginExportType.default) {
          if (checkNormalPlugin(plugin.default) === false) {
-                throw('插件不合法')
+            throw '插件不合法'
          }
          pc.register(plugin.key ?? `${Math.random()}`, plugin.default as Plugin)
       } else {
          if (checkComponentPlugin(plugin.default) === false) {
-                throw('插件不合法')
+            throw '插件不合法'
          }
          pc.registerComponent(plugin.default as registerComponentOption)
       }
    } catch (e) {
-        console.error(e);
+      console.error(e)
       hooks.globalAlertTip('导入外部插件失败', {
          type: 'error',
          timeout: 3000

src/styles/default.scss

@@ -1,4 +1,3 @@
-:root
+:root body {
-body {
    background-color: aliceblue;
 }

src/types/fetch.ts

@@ -1,39 +1,39 @@
-import { AxiosRequestConfig } from "axios";
+import { AxiosRequestConfig } from 'axios'
-import { directory, file } from "./type";
+import { directory, file } from './type'
 
 export type miaoFetchConfig = {
    retry?: number
    axiosOption?: AxiosRequestConfig<any>
 }
 
-export type getOption = {} & miaoFetchConfig;
+export type getOption = {} & miaoFetchConfig
 
 export type getFileOption = {
    /**
     * 下载进度回调函数
     * @param {any} percent 进度百分比，float类型, 0-1
     */
-	onProcess?: (percent: number) => void;
+   onProcess?: (percent: number) => void
-} & miaoFetchConfig;
+} & miaoFetchConfig
 
-export type getResponse = (file | directory)[];
+export type getResponse = (file | directory)[]
 
 export type uploadOption = {
    /**
     * 上传进度回调函数
     * @param {any} percent 进度百分比，float类型, 0-1
     */
-	onProcess?: (percent: number) => void;
+   onProcess?: (percent: number) => void
    /**
     * 上传文件执行的操作
     * write即为覆盖写
     * append即为增量写
     */
-	type?: "write" | "append";
+   type?: 'write' | 'append'
-} & miaoFetchConfig;
+} & miaoFetchConfig
 
-export type deleteOption = {} & miaoFetchConfig;
+export type deleteOption = {} & miaoFetchConfig
-export type renameOption = {} & miaoFetchConfig;
+export type renameOption = {} & miaoFetchConfig
 export type cutOption = {} & miaoFetchConfig
 export type mkdirOption = {} & miaoFetchConfig
-export type queryOption = {} & miaoFetchConfig;
+export type queryOption = {} & miaoFetchConfig

src/types/type.ts

@@ -1,48 +1,54 @@
-import PluginCenter from "@/class/PluginCenter";
+import PluginCenter from '@/class/PluginCenter'
-import VirtualDirectory from "@/class/VirtualDirectory";
+import VirtualDirectory from '@/class/VirtualDirectory'
-import type { VirtualPages } from "@/class/VirtualPage";
+import type { VirtualPages } from '@/class/VirtualPage'
 
 export type stats = {
-	atimeMs: number; // 上次访问时间（毫秒）
+   atimeMs: number // 上次访问时间（毫秒）
-	birthtimeMs: number; // 创建时间（毫秒）
+   birthtimeMs: number // 创建时间（毫秒）
-	ctimeMs: number; // 状态更改时间（毫秒）
+   ctimeMs: number // 状态更改时间（毫秒）
-	mtimeMs: number; // 上次修改时间（毫秒）
+   mtimeMs: number // 上次修改时间（毫秒）
-};
+}
 
 export type file = {
-	name: string;
+   name: string
-	size: number;
+   size: number
-	type?: "file";
+   type?: 'file'
-	stats: stats;
+   stats: stats
-};
+}
 
 export type directory = {
-	name: string;
+   name: string
    // 考虑到可能还没请求过来
-	content?: (file | directory)[];
+   content?: (file | directory)[]
-	type?: "directory";
+   type?: 'directory'
-	stats: stats;
+   stats: stats
-	parent?: directory;
+   parent?: directory
-};
+}
 
-export type alertTipType = (content: string, options?: AlertTipMessageOptions) => (newContent: string, newOptions?: AlertTipMessageOptions) => void;
+export type alertTipType = (
+   content: string,
+   options?: AlertTipMessageOptions
+) => (newContent: string, newOptions?: AlertTipMessageOptions) => void
 
 export interface AlertTipMessageOptions {
-	type?: "info" | "success" | "error";
+   type?: 'info' | 'success' | 'error'
-	timeout?: number;
+   timeout?: number
-	id?: number;
+   id?: number
 }
 
 export enum PluginExportType {
-	default = "default",
+   default = 'default',
-	component = "component"
+   component = 'component'
 }
 
 export interface usePluginHooksType {
-	globalAlertTip: alertTipType;
+   globalAlertTip: alertTipType
-	getViews: () => VirtualPages;
+   getViews: () => VirtualPages
-	getPluginCenter: () => PluginCenter;
+   getPluginCenter: () => PluginCenter
-	getRootVDirectory: () => VirtualDirectory;
+   getRootVDirectory: () => VirtualDirectory
 }
 
-export type Equals<X, Y> = (<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2 ? true : false;
+export type Equals<X, Y> =
+   (<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2
+      ? true
+      : false