feat: 为文件夹插件导航栏添加滚动条以及鼠标滚轮相关事件处理

.prettierrc.js

@@ -63,7 +63,7 @@ export default {
      * @default false
      * @type {boolean}
      */
-    bracketSameLine: false,
+    bracketSameLine: true,
     /**
      * 当箭头函数只有一个参数是否加括号
      * @default "always"
@@ -99,6 +99,6 @@ export default {
      * @default true
      * @type {boolean}
      */
-    singleAttributePerLine: true,
+    // singleAttributePerLine: true,
-    disableLanguages: ['html']
+    // disableLanguages: ['html']
 }

README.md

@@ -7,13 +7,13 @@
 | 完善PDF插件 | ✅ |
 | 完善Code插件 | ✅ |
 | 实现miaoDirectory的搜索功能 | ✅ |
+| 创建音乐播放器组件（仿QQ音乐移动端吧） | ✅ |
+| plugin增加些属性，icon, disable, group之类的 | ✅ |
+| 实现miaoDirectory的排序功能 | ✅ |
 | 重构miaoFetchApi.getFile， 增加进度 | ❌ |
-| plugin增加些属性，icon, disable, group之类的 | ❌ |
 | 完善miaoDirectory的搜索功能 | ❌ |
-| 实现miaoDirectory的排序功能 | ❌ |
 | 完善图片浏览插件 | ❌ |
 | VirtualDirectory更新时更新文件信息 | ❌ |
-| 创建音乐播放器组件（仿QQ音乐移动端吧） | ❌ |
 | miaoDirectory的复制文件/文件夹功能 | ❌ |
 | 重构miaoDropHandler的实现 | ❌ |
 | 重构主界面，拆分主界面组件的实现 | ❌ |
@@ -25,4 +25,4 @@
 
 ## 碎碎念：
 
-为什么不直接做成类似于windows的风格呢？其实技术实现上问题应该不大，重构也不用重构太多东西（APP.vue改改，插件部分改改这样），但是开学了事情一大堆，实习又没法比较美好地推掉。平时每天到宿舍都精疲力竭还要准备秋招和学校的破事。更何况搞不好还会被两个学分卡得没法毕业，好烦好烦。md想这么多干嘛，反正都快岩壁了，mdmdmdmd
+写的真潦草

src/App.vue

@@ -7,16 +7,7 @@ import {
    shallowRef,
    useTemplateRef
 } from 'vue'
-import { NIcon, NScrollbar, NDropdown } from 'naive-ui'
+import { QrCodeOutline, ExtensionPuzzleOutline } from '@vicons/ionicons5'
-import {
-   EyeOffOutline,
-   EyeOutline,
-   CloseOutline,
-   CopyOutline,
-   EllipsisVertical,
-   QrCodeOutline,
-   ExtensionPuzzleOutline
-} from '@vicons/ionicons5'
 import type VirtualDirectory from './class/VirtualDirectory'
 import type { VirtualFile } from './class/VirtualDirectory'
 import MiaoMask from './components/miaoMask.vue'
@@ -26,26 +17,23 @@ import useVirtualPages from './hooks/useVirtualPages'
 import init from './hooks/init'
 import usePluginCenter from './hooks/usePluginCenter'
 import PluginCenter, { PluginGroup } from './class/PluginCenter'
-import { renderIcon } from './hooks/miaoTools'
+import { renderIcon } from './utils/miaoTools'
 import { DropdownMixedOption } from 'naive-ui/es/dropdown/src/interface'
 import useRootVDirectory from './hooks/useRootVDirectory'
+import ViewController from '@/components/APP/ViewController.vue'
+import ViewContainer from '@/components/APP/ViewContainer.vue'
 
 const { baseUrl } = config
 
 const showModal = ref<boolean>(false)
-
 const viewRef = ref<HTMLDivElement>()
-
 const modalData = shallowRef<{
    component: any
    props: any
 }>()
-
 const messageProviderRef = useTemplateRef('messageProviderRef')
-
 const views = useVirtualPages()
 let pluginCenter = ref<PluginCenter>()
-
 const rootDirectory = useRootVDirectory()
 
 // component就是一个vue组件，类似于miaoDirectory
@@ -137,126 +125,33 @@ provide('rootDirectory', rootDirectory)
 </script>
 
 <template>
-   <div
+   <div class="view" ref="viewRef">
-      class="view"
-      ref="viewRef"
-   >
       <miao-message-provider ref="messageProviderRef">
-         <div class="view-controller">
+         <ViewController
-            <n-scrollbar x-scrollable>
+            :views="views"
-               <div class="tabs-container">
+            :handleClickTitle="handleClickTitle"
-                  <transition-group name="tab">
+            :createView="createView"
-                     <div
+            :deleteView="deleteView"
-                        class="tab"
+            :openMenuOption="openMenuOption"
-                        v-for="(view, index) of views._views"
+            :handleMenuSelect="handleMenuSelect" />
-                        :key="view.id"
+         <ViewContainer
-                     >
+            :views="views"
-                        <span
+            :deleteView="deleteView"
-                           class="tab-title"
+            :handleClickTitle="handleClickTitle" />
-                           :title="view.title"
-                           @click="handleClickTitle(index)"
-                        >
-                           {{
-                              view.title.length > 5 && 0
-                                 ? `${view.title.substring(0, 5)}...`
-                                 : view.title
-                           }}
-                        </span>
-                        <div class="tab-control">
-                           <div
-                              class="tab-point"
-                              :style="{ backgroundColor: view.color }"
-                           ></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="
-                                 createView(
-                                    view.component,
-                                    view.name,
-                                    view.currentDirectories,
-                                    view.currentFiles,
-                                    index + 1
-                                 )
-                              "
-                              v-if="view.allowCopy"
-                           >
-                              <CopyOutline />
-                           </n-icon>
-                           <n-icon
-                              class="tag-control-icon icon"
-                              @click="deleteView(index)"
-                           >
-                              <CloseOutline class="icon-inner" />
-                           </n-icon>
-                        </div>
-                     </div>
-                  </transition-group>
-               </div>
-            </n-scrollbar>
-            <div class="view-controller-menu">
-               <div class="view-controller-menu-item">
-                  <n-dropdown
-                     trigger="click"
-                     :options="openMenuOption"
-                     @select="handleMenuSelect"
-                  >
-                     <n-icon class="icon">
-                        <EllipsisVertical class="icon-inner" />
-                     </n-icon>
-                  </n-dropdown>
-               </div>
-            </div>
-         </div>
-         <div class="view-container">
-            <!-- <transition-group name="page"> -->
-            <div
-               class="view-container-item"
-               v-for="(view, index) of views._views"
-               :class="!view.visible ? 'view-container-item-hidden' : ''"
-               :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
+   <MiaoMask v-model:show="showModal" @click="showModal = false">
-      v-model:show="showModal"
-      @click="showModal = false"
-   >
       <component
          @click="(e: any) => e.stopPropagation()"
          :is="modalData?.component"
-         v-bind="modalData?.props"
+         v-bind="modalData?.props"></component>
-      ></component>
    </MiaoMask>
 </template>
 
 <style lang="scss" scoped>
+@use "styles/default.scss";
+
 $controller-height: 25px;
 $tag-width: 170px;
 
@@ -265,215 +160,5 @@ $tag-width: 170px;
    position: relative;
    height: 100%;
    width: 100%;
-
-   .view-controller {
-      display: flex;
-      height: $controller-height;
-      width: 100%;
-      background-color: #dadada;
-      // overflow: hidden;
-
-      .tabs-container {
-         display: flex;
-         margin-left: 5px;
-         flex: 1;
-
-         // overflow-x: scroll;
-         .tab {
-            position: relative;
-            width: $tag-width;
-            height: $controller-height;
-            margin: 0 5px;
-            // flex: 1;
-            display: flex;
-            border-radius: 5px 5px 0 0;
-            align-items: center;
-
-            .tab-title {
-               // font-family: monospace;
-               // font-weight: bolder;
-               margin-left: 4px;
-               width: 90px;
-               user-select: none;
-               cursor: pointer;
-               overflow: hidden;
-               white-space: nowrap;
-               text-overflow: ellipsis;
-
-               span {
-                  user-select: none;
-                  cursor: pointer;
-               }
-            }
-
-            .tab-point {
-               height: 5px;
-               aspect-ratio: 1;
-               border-radius: 66px;
-               margin-right: 5px;
-            }
-
-            .tab-control {
-               position: absolute;
-               right: 10px;
-               display: flex;
-               align-items: center;
-
-               .tab-control-icon:not(:last-child) {
-                  margin-right: 5px;
-               }
-            }
-
-            &:not(:last-child)::after {
-               content: '';
-               height: calc($controller-height * 0.6);
-               width: 1px;
-               border-right: 1px solid black;
-               position: absolute;
-               right: 0px;
-            }
-         }
-      }
-
-      .view-controller-menu {
-         position: relative;
-         display: flex;
-         align-items: center;
-         padding: 0 5px;
-
-         .view-controller-menu-item {
-            height: 100%;
-            aspect-ratio: 1;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-         }
-
-         &::before {
-            content: '';
-            height: calc($controller-height * 0.6);
-            width: 1px;
-            border-right: 1px solid black;
-            position: absolute;
-            left: 2px;
-         }
-      }
-
-      .icon {
-         height: calc($controller-height * 0.7);
-         width: calc($controller-height * 0.7);
-         border-radius: 5px;
-         display: flex;
-         justify-content: center;
-         align-items: center;
-         cursor: pointer;
-         background-color: rgba(128, 128, 128, 0);
-         transition: background-color 0.3s;
-
-         &:hover {
-            background-color: rgba(128, 128, 128, 0.4);
-         }
-      }
-   }
-
-   .view-container {
-      position: relative;
-      display: flex;
-      // flex-direction: column;
-      height: calc(100% - $controller-height);
-      overflow-y: hidden;
-      overflow-x: overlay;
-
-      .view-container-item {
-         flex: 1;
-         height: 100%;
-         min-width: 180px;
-         opacity: 1;
-         transition:
-            flex 0.25s ease,
-            opacity 0.25s ease;
-      }
-
-      .view-container-item-hidden {
-         flex: 0;
-         min-width: 0px;
-         opacity: 0;
-         // transition-delay: opacity .25s;
-         // transition: opacity 5.25s ease;
-      }
-
-      &::-webkit-scrollbar {
-         position: absolute;
-         width: 4px;
-      }
-
-      // 滚动条轨道
-      &::-webkit-scrollbar-track {
-         // background: rgb(239, 239, 239);
-         border-radius: 2px;
-      }
-
-      // 小滑块
-      &::-webkit-scrollbar-thumb {
-         background: #e0e0e0;
-         // border-radius: 5px;
-      }
-
-      &::-webkit-scrollbar-thumb:hover {
-         background: #999999;
-      }
-   }
-}
-
-// transition动画相关
-.view {
-   .view-controller {
-      .tabs-container {
-         .tab-move,
-         .tab-enter-active {
-            transition: all 0.2s ease;
-         }
-
-         .tab-leave-active {
-            opacity: 0;
-            transition: none;
-         }
-
-         .tab-enter-from {
-            opacity: 0;
-            transform: translateY(-30px);
-         }
-
-         // .tab-leave-to {
-         //   opacity: 0;
-         //   transform: translateY(-80px) translateX(calc($tag-width + 10px));
-         // }
-
-         .tab-leave-active {
-            position: absolute;
-         }
-      }
-   }
-
-   // .view-container {
-   //     .page-move {
-   //         //   transition: all 0.55s ease;
-   //     }
-
-   //     .page-enter-active {}
-
-   //     .page-leave-active {
-   //         transition: none !important;
-   //     }
-
-   //     .page-enter-from {
-   //         //   opacity: 0;
-   //     }
-
-   //     .page-leave-active {
-   //         display: none;
-   //         position: absolute;
-   //     }
-   // }
 }
 </style>

src/class/UploadQueue.ts

@@ -1,4 +1,4 @@
-import generateId from '@/hooks/generateId'
+import generateId from '@/utils/generateId'
 import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
 import VirtualDirectory from './VirtualDirectory'
 

src/class/VirtualDirectory.ts

@@ -1,5 +1,5 @@
 import config from '@/config'
-import generateId from '@/hooks/generateId'
+import generateId from '@/utils/generateId'
 import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
 import type { stats, file, directory } from '@/types/type.ts'
 import difference from 'lodash/difference'

src/class/VirtualPage.ts

@@ -1,6 +1,6 @@
 import { Component, reactive, shallowRef } from 'vue'
 import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
-import generateId from '@/hooks/generateId'
+import generateId from '@/utils/generateId'
 
 export interface VirtualPageOption {
    exitConfirm?: boolean

src/components/APP/ViewContainer.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+const props = defineProps({
+   views: {
+      type: Object,
+      required: true
+   },
+   deleteView: {
+      type: Function,
+      required: true
+   }
+})
+</script>
+
+<template>
+   <div class="view-container">
+      <div
+         class="view-container-item"
+         v-for="(view, index) of props.views._views"
+         :class="!view.visible ? 'view-container-item-hidden' : ''"
+         :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="props.views"
+            @exit="props.deleteView(index)"></component>
+      </div>
+   </div>
+</template>
+
+<style lang="scss" scoped>
+$controller-height: 25px;
+
+.view-container {
+   position: relative;
+   display: flex;
+   height: calc(100% - $controller-height);
+   overflow-y: hidden;
+   overflow-x: overlay;
+
+   .view-container-item {
+      flex: 1;
+      height: 100%;
+      min-width: 180px;
+      opacity: 1;
+      transition:
+         flex 0.25s ease,
+         opacity 0.25s ease;
+   }
+
+   .view-container-item-hidden {
+      flex: 0;
+      min-width: 0px;
+      opacity: 0;
+   }
+
+   &::-webkit-scrollbar {
+      position: absolute;
+      width: 4px;
+   }
+
+   // 滚动条轨道
+   &::-webkit-scrollbar-track {
+      border-radius: 2px;
+   }
+
+   // 小滑块
+   &::-webkit-scrollbar-thumb {
+      background: #e0e0e0;
+   }
+
+   &::-webkit-scrollbar-thumb:hover {
+      background: #999999;
+   }
+}
+</style>

src/components/APP/ViewController.vue

@@ -0,0 +1,233 @@
+<script setup lang="ts">
+import { NIcon, NScrollbar, NDropdown } from 'naive-ui'
+import {
+   EyeOffOutline,
+   EyeOutline,
+   CloseOutline,
+   CopyOutline,
+   EllipsisVertical
+} from '@vicons/ionicons5'
+import type { DropdownMixedOption } from 'naive-ui/es/dropdown/src/interface'
+import type { VirtualPages } from '@/class/VirtualPage'
+import type VirtualDirectory from '@/class/VirtualDirectory'
+import type { VirtualFile } from '@/class/VirtualDirectory'
+
+const props = defineProps<{
+   views: VirtualPages
+   handleClickTitle: (index: number) => void
+   createView: (
+      component: any,
+      name: string,
+      currentDirectories?: VirtualDirectory[],
+      currentFiles?: VirtualFile[],
+      index?: number
+   ) => void
+   deleteView: (index: number) => void
+   openMenuOption: DropdownMixedOption[]
+   handleMenuSelect: (key: string) => any
+}>()
+</script>
+
+<template>
+   <div class="view-controller">
+      <n-scrollbar x-scrollable>
+         <div class="tabs-container">
+            <transition-group name="tab">
+               <div
+                  class="tab"
+                  v-for="(view, index) of props.views._views"
+                  :key="view.id">
+                  <span
+                     class="tab-title"
+                     :title="view.title"
+                     @click="props.handleClickTitle(index)">
+                     {{
+                        view.title.length > 5 && 0
+                           ? `${view.title.substring(0, 5)}...`
+                           : view.title
+                     }}
+                  </span>
+                  <div class="tab-control">
+                     <div
+                        class="tab-point"
+                        :style="{ backgroundColor: view.color }"></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="
+                           props.createView(
+                              view.component,
+                              view.name,
+                              view.currentDirectories,
+                              view.currentFiles,
+                              index + 1
+                           )
+                        "
+                        v-if="view.allowCopy">
+                        <CopyOutline />
+                     </n-icon>
+                     <n-icon
+                        class="tag-control-icon icon"
+                        @click="props.deleteView(index)">
+                        <CloseOutline class="icon-inner" />
+                     </n-icon>
+                  </div>
+               </div>
+            </transition-group>
+         </div>
+      </n-scrollbar>
+      <div class="view-controller-menu">
+         <div class="view-controller-menu-item">
+            <n-dropdown
+               trigger="click"
+               :options="props.openMenuOption"
+               @select="props.handleMenuSelect">
+               <n-icon class="icon">
+                  <EllipsisVertical class="icon-inner" />
+               </n-icon>
+            </n-dropdown>
+         </div>
+      </div>
+   </div>
+</template>
+
+<style lang="scss" scoped>
+$controller-height: 25px;
+$tag-width: 170px;
+
+.view-controller {
+   display: flex;
+   height: $controller-height;
+   width: 100%;
+   background-color: #dadada;
+
+   .tabs-container {
+      display: flex;
+      margin-left: 5px;
+      flex: 1;
+
+      .tab {
+         position: relative;
+         width: $tag-width;
+         height: $controller-height;
+         margin: 0 5px;
+         display: flex;
+         border-radius: 5px 5px 0 0;
+         align-items: center;
+
+         .tab-title {
+            margin-left: 4px;
+            width: 90px;
+            user-select: none;
+            cursor: pointer;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+
+            span {
+               user-select: none;
+               cursor: pointer;
+            }
+         }
+
+         .tab-point {
+            height: 5px;
+            aspect-ratio: 1;
+            border-radius: 66px;
+            margin-right: 5px;
+         }
+
+         .tab-control {
+            position: absolute;
+            right: 10px;
+            display: flex;
+            align-items: center;
+
+            .tab-control-icon:not(:last-child) {
+               margin-right: 5px;
+            }
+         }
+
+         &:not(:last-child)::after {
+            content: '';
+            height: calc($controller-height * 0.6);
+            width: 1px;
+            border-right: 1px solid black;
+            position: absolute;
+            right: 0px;
+         }
+      }
+   }
+
+   .view-controller-menu {
+      position: relative;
+      display: flex;
+      align-items: center;
+      padding: 0 5px;
+
+      .view-controller-menu-item {
+         height: 100%;
+         aspect-ratio: 1;
+         display: flex;
+         justify-content: center;
+         align-items: center;
+      }
+
+      &::before {
+         content: '';
+         height: calc($controller-height * 0.6);
+         width: 1px;
+         border-right: 1px solid black;
+         position: absolute;
+         left: 2px;
+      }
+   }
+
+   .icon {
+      height: calc($controller-height * 0.7);
+      width: calc($controller-height * 0.7);
+      border-radius: 5px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      background-color: rgba(128, 128, 128, 0);
+      transition: background-color 0.3s;
+
+      &:hover {
+         background-color: rgba(128, 128, 128, 0.4);
+      }
+   }
+}
+
+// transition动画相关
+.view-controller {
+   .tabs-container {
+      .tab-move,
+      .tab-enter-active {
+         transition: all 0.2s ease;
+      }
+
+      .tab-leave-active {
+         opacity: 0;
+         transition: none;
+      }
+
+      .tab-enter-from {
+         opacity: 0;
+         transform: translateY(-30px);
+      }
+
+      .tab-leave-active {
+         position: absolute;
+      }
+   }
+}
+</style>

src/components/miaoAlertTipProvider.vue

@@ -1,25 +1,16 @@
 <template>
-   <div
+   <div class="miao-message-provider" ref="rootRef">
-      class="miao-message-provider"
-      ref="rootRef"
-   >
       <slot></slot>
       <transition-group
          name="message-fade"
          tag="div"
-         class="miao-message-provider-container"
+         class="miao-message-provider-container">
-      >
          <div
             class="miao-message"
             v-for="msg in messageList"
             :key="msg.id"
-            :style="{ maxWidth: maxMessageWidth + 'px' }"
+            :style="{ maxWidth: maxMessageWidth + 'px' }">
-         >
+            <n-icon class="miao-message-item" size="18" :color="msg.iconColor">
-            <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">
@@ -31,7 +22,7 @@
 </template>
 
 <script setup lang="ts">
-import generateId from '@/hooks/generateId'
+import generateId from '@/utils/generateId'
 import { NIcon } from 'naive-ui'
 import { computed, onMounted, ref, shallowReactive } from 'vue'
 import {

src/components/miaoContextMenu.vue

@@ -4,8 +4,7 @@
    <div
       class="main"
       @contextmenu="handleContextMenu"
-      @mouseleave="handleMainMouseLeave"
+      @mouseleave="handleMainMouseLeave">
-   >
       <slot></slot>
    </div>
    <n-dropdown
@@ -18,8 +17,7 @@
       :on-clickoutside="onClickoutside"
       @select="handleSelect"
       @mouseleave="showContextMenu -= 1"
-      @mouseenter="showContextMenu += 1"
+      @mouseenter="showContextMenu += 1" />
-   />
 </template>
 
 <script setup lang="ts">

src/components/miaoDraggableDiv.vue

@@ -1,9 +1,5 @@
 <template>
-   <div
+   <div ref="divRef" @dragstart="onDs" :draggable="isDraggable">
-      ref="divRef"
-      @dragstart="onDs"
-      :draggable="isDraggable"
-   >
       <slot></slot>
    </div>
 </template>

src/components/miaoDropHandler.vue

@@ -3,8 +3,7 @@
       class="container"
       @dragover="handleDragOver"
       @dragleave="handleDragLeave"
-      @drop="handleDrop"
+      @drop="handleDrop">
-   >
       <slot></slot>
       <miao-mask v-model:show="showMask"></miao-mask>
    </div>

src/components/miaoLazyDiv.vue

@@ -13,8 +13,7 @@
                  margin
               }
             : {}
-      "
+      ">
-   >
       <slot v-if="show" />
    </div>
 </template>

src/components/miaoMask.vue

@@ -1,10 +1,6 @@
 <template>
    <transition name="transition">
-      <div
+      <div class="mask-body" ref="maskBodyRef" v-show="showMask">
-         class="mask-body"
-         ref="maskBodyRef"
-         v-show="showMask"
-      >
          <slot></slot>
       </div>
    </transition>

src/components/miaoPopupInput.vue

@@ -1,10 +1,6 @@
 <template>
    <miao-mask v-model:show="showMask">
-      <n-card
+      <n-card class="popup-card" :title="popupConfig?.title" size="medium">
-         class="popup-card"
-         :title="popupConfig?.title"
-         size="medium"
-      >
          {{ popupConfig?.content }}
          <n-input
             class="popup-input"
@@ -13,16 +9,14 @@
             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/plugins/miaoCodeMirror/miaoCodeMirror.vue

@@ -3,28 +3,22 @@
       <div
          class="codemirror-container"
          ref="rootRef"
-         :class="`codemirror-container-${theme}`"
+         :class="`codemirror-container-${theme}`">
-      >
          <div class="codemirror-container-top">
             <div
                class="codemirror-container-btn codemirror-container-btn-save"
-               @click="handleSave"
+               @click="handleSave">
-            >
                保存
             </div>
             <div
                class="codemirror-container-btn codemirror-container-btn-save"
-               @click="handleReset"
+               @click="handleReset">
-            >
                恢复到上次保存
             </div>
          </div>
          <div class="codemirror-container-main">
             <NScrollbar style="max-height: calc(100%)">
-               <codemirror
+               <codemirror v-model="codeData" :extensions="extensions" />
-                  v-model="codeData"
-                  :extensions="extensions"
-               />
             </NScrollbar>
          </div>
       </div>

src/plugins/miaoCrypto/miaoCrypto.vue

@@ -6,8 +6,7 @@
                <div
                   v-for="item of workItemList"
                   :key="item.id"
-                  class="miaoCrypto-container-item-item"
+                  class="miaoCrypto-container-item-item">
-               >
                   <div
                      class="miaoCrypto-container-item-percentBar"
                      :style="{
@@ -17,16 +16,14 @@
                               ? `${item.getBufferProgress * 100}%`
                               : `0%`,
                         backgroundColor: 'blue'
-                     }"
+                     }"></div>
-                  ></div>
                   <div
                      class="miaoCrypto-container-item-percentBar"
                      :style="{
                         zIndex: 1,
                         width: item.status === 'finish' ? `100%` : `0%`,
                         backgroundColor: 'green'
-                     }"
+                     }"></div>
-                  ></div>
                   <span class="miaoCrypto-container-item-content">
                      {{ item.name }}{{ item.status }}
                   </span>

src/plugins/miaoDirectory/components/miaoDirectoryBottom.vue

@@ -3,16 +3,14 @@
       class="miao-directory-container-bottom"
       :style="{
          backgroundColor: index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)'
-      }"
+      }">
-   >
       <div class="container-bottom-item">
          <div class="container-bottom-item-icon">
             <add-outline
                :style="{
                   color: index % 2 === 0 ? 'rgb(0 0 0)' : 'rgb(255 255 255)'
                }"
-               @click="emit('add-new-item')"
+               @click="emit('add-new-item')" />
-            />
          </div>
       </div>
       <div class="container-bottom-item">
@@ -21,8 +19,7 @@
                :style="{
                   color: index % 2 === 0 ? 'rgb(0 0 0)' : 'rgb(255 255 255)'
                }"
-               @click="emit('pick-files-upload')"
+               @click="emit('pick-files-upload')" />
-            />
          </div>
       </div>
    </div>

src/plugins/miaoDirectory/components/miaoDirectoryItem.vue

@@ -3,49 +3,36 @@
       class="miao-item"
       :isDraggable="!draggable"
       ref="itemRef"
-      @on-drag-start="handleDragStart"
+      @on-drag-start="handleDragStart">
-   >
       <miaoContextMenu
          :options="dropDownOptions ?? []"
          :touch-time-out="500"
-         @select="handleDropdownSelect"
+         @select="handleDropdownSelect">
-      >
          <div
             class="item-main"
             :class="selected ? 'item-main-selected' : ''"
-            ref="mainRef"
+            ref="mainRef">
-         >
             <div
                class="item-main-front"
-               :style="{ backgroundColor: props.color }"
+               :style="{ backgroundColor: props.color }"></div>
-            ></div>
+            <Icon class="item-main-icon" v-show="clientWidth > 250"></Icon>
-            <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"
+                     v-if="clientWidth <= 250"></Icon>
-                  ></Icon>
                   <n-ellipsis
-                     :style="{ maxWidth: clientWidth > 250 ? '80%' : '75%' }"
+                     :style="{ maxWidth: clientWidth > 250 ? '80%' : '75%' }">
-                  >
                      {{ name }}
                   </n-ellipsis>
                </div>
-               <div
+               <div class="item-main-info-date" v-if="time">
-                  class="item-main-info-date"
-                  v-if="time"
-               >
                   {{ time }}
                </div>
             </div>
             <miao-draggable-div
                class="item-main-dragBtn"
-               :isDraggable="draggable"
+               :isDraggable="draggable">
-            >
                <ReorderFourOutline></ReorderFourOutline>
             </miao-draggable-div>
          </div>
@@ -69,7 +56,7 @@ import {
    ReorderFourOutline
 } from '@vicons/ionicons5'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
-import dateFormatter from '@/hooks/dateFormatter'
+import dateFormatter from '@/utils/dateFormatter'
 import { NEllipsis } from 'naive-ui'
 import { DropdownOption } from 'naive-ui/es/dropdown'
 import miaoDraggableDiv from '@/components/miaoDraggableDiv.vue'

src/plugins/miaoDirectory/components/miaoDirectoryItemsContainer.vue

@@ -3,18 +3,13 @@
       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"
@@ -25,14 +20,12 @@
                @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"
@@ -44,8 +37,7 @@
                @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>
@@ -58,7 +50,7 @@ import miaoDirectoryItem from './miaoDirectoryItem.vue'
 import miaoLazyDiv from '@/components/miaoLazyDiv.vue'
 import { computed, ref } from 'vue'
 import usePluginCenter from '@/hooks/usePluginCenter'
-import { renderIcon } from '@/hooks/miaoTools'
+import { renderIcon } from '@/utils/miaoTools'
 
 const pluginCenter = usePluginCenter()
 

src/plugins/miaoDirectory/components/miaoDirectoryTop.vue

@@ -3,57 +3,54 @@
       class="miao-directory-container-top"
       :style="{
          backgroundColor: index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
-      }"
+      }">
-   >
       <div
          class="container-top-colorfulBar"
-         :style="{ backgroundColor: props.color }"
+         :style="{ backgroundColor: props.color }"></div>
-      ></div>
       <div class="container-top-breadcrumb">
-         <div class="container-top-breadcrumb-container">
+         <n-scrollbar
-            <n-breadcrumb
+            ref="scrollbarRef"
-               separator=">"
+            :x-scrollable="true"
-               style="margin-left: 5px"
+            class="container-top-breadcrumb-scroll"
-            >
+            @wheel="handleWheel">
-               <n-breadcrumb-item :clickable="false">
+            <div class="container-top-breadcrumb-container">
-                  <n-icon size="18">
+               <n-breadcrumb
-                     <CloudOutline />
+                  separator=">"
-                  </n-icon>
+                  class="sb-nn"
-               </n-breadcrumb-item>
+                  style="margin-left: 5px">
-               <n-breadcrumb-item
+                  <n-breadcrumb-item :clickable="false">
-                  v-for="dir in currentDirectory?.getParents"
+                     <n-icon size="18">
-                  @click="handleClickBreadcrumbItem(dir)"
+                        <CloudOutline />
-                  :clickable="true"
+                     </n-icon>
-               >
+                  </n-breadcrumb-item>
-                  <div>{{ dir.name }}</div>
+                  <n-breadcrumb-item
-               </n-breadcrumb-item>
+                     v-for="dir in currentDirectory?.getParents"
-            </n-breadcrumb>
+                     @click="handleClickBreadcrumbItem(dir)"
-         </div>
+                     :clickable="true">
+                     <div>{{ dir.name }}</div>
+                  </n-breadcrumb-item>
+               </n-breadcrumb>
+            </div>
+         </n-scrollbar>
       </div>
       <div class="container-top-tools">
          <n-icon
             class="container-top-tools-item"
             size="15"
-            @click="$emit('back')"
+            @click="$emit('back')">
-         >
             <ChevronBackOutline />
          </n-icon>
          <n-icon
             class="container-top-tools-item"
             size="14"
-            @click="$emit('reload')"
+            @click="$emit('reload')">
-         >
             <ReloadOutline class="container-top-tools-item-reload" />
          </n-icon>
          <n-dropdown
             trigger="click"
             :options="openMenuOption"
-            @select="(key: string) => emit('menuSelect', key)"
+            @select="(key: string) => emit('menuSelect', key)">
-         >
+            <n-icon class="container-top-tools-item" size="14">
-            <n-icon
-               class="container-top-tools-item"
-               size="14"
-            >
                <EllipsisVertical />
             </n-icon>
          </n-dropdown>
@@ -62,7 +59,13 @@
 </template>
 
 <script setup lang="ts">
-import { NBreadcrumbItem, NBreadcrumb, NIcon, NDropdown } from 'naive-ui'
+import {
+   NBreadcrumbItem,
+   NBreadcrumb,
+   NIcon,
+   NDropdown,
+   NScrollbar
+} from 'naive-ui'
 import {
    CloudOutline,
    ChevronBackOutline,
@@ -70,6 +73,7 @@ import {
    EllipsisVertical
 } from '@vicons/ionicons5'
 import VirtualDirectory from '@/class/VirtualDirectory'
+import { ref } from 'vue'
 
 const props = defineProps<{
    color: string
@@ -89,9 +93,28 @@ const emit = defineEmits<{
    'set-current-directory': [virtualDirectory: VirtualDirectory]
 }>()
 
+const scrollbarRef = ref<InstanceType<typeof NScrollbar>>()
+
 const handleClickBreadcrumbItem = (virtualDirectory: VirtualDirectory) => {
    emit('set-current-directory', virtualDirectory)
 }
+
+const handleWheel = (event: WheelEvent) => {
+   event.preventDefault()
+   event.stopPropagation()
+   if (scrollbarRef.value) {
+      scrollbarRef.value.scrollBy({
+         left: event.deltaY,
+         behavior: "smooth"
+      })
+   }
+}
+
+defineExpose({
+   // @ts-ignore
+   scrollTo: (...args: any[]) => scrollbarRef.value?.scrollTo(...args)
+   // getRef: () => scrollbarRef.value
+})
 </script>
 
 <style scoped lang="scss">
@@ -127,14 +150,15 @@ const handleClickBreadcrumbItem = (virtualDirectory: VirtualDirectory) => {
       border-radius: 0 3px 3px 0;
 
       .container-top-breadcrumb-container {
-         position: absolute;
+         // position: absolute;
-         height: 100%;
+         height: 21px;
-         right: 0;
+         // right: 0;
-         top: 0;
+         // top: 0;
          min-width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
+         overflow: hidden;
       }
    }
 
@@ -174,3 +198,11 @@ const handleClickBreadcrumbItem = (virtualDirectory: VirtualDirectory) => {
    }
 }
 </style>
+
+<style lang="scss">
+.container-top-breadcrumb-scroll {
+   .n-scrollbar-rail {
+      transform: translateY(5px);
+   }
+}
+</style>

src/plugins/miaoDirectory/miaoDirectory.vue

@@ -2,15 +2,12 @@
    <miao-drop-handler
       @on-virtual-directory="handleDropVDirectory"
       @on-files="handleDropFiles"
-      @on-virtual-files="handleDropVirtualFiles"
+      @on-virtual-files="handleDropVirtualFiles">
-   >
       <miaoAlertTipProvider ref="miaoAlertTip">
-         <div
+         <div class="miao-directory-item-container" ref="rootDomRef">
-            class="miao-directory-item-container"
-            ref="rootDomRef"
-         >
             <!-- 顶部面包屑导航和工具栏 -->
             <miao-directory-top
+               ref="miaoDirectoryTopRef"
                :color="props.color"
                :current-directory="currentDirectory"
                @back="handleBack"
@@ -20,8 +17,7 @@
                :index="index"
                @set-current-directory="setCurrentDirectory"
                @search="handleSearch"
-               @menu-select="handleTopBarMenuSelect"
+               @menu-select="handleTopBarMenuSelect" />
-            />
 
             <!-- 文件和文件夹列表 -->
             <miao-directory-items
@@ -36,16 +32,14 @@
                @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>
@@ -62,7 +56,7 @@ import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
 import useDataBus from '@/hooks/useDataBus'
 import useUploadQueue from '@/hooks/useUploadQueue'
 import useVirtualPages from '@/hooks/useVirtualPages'
-import { filePicker, renderIcon } from '@/hooks/miaoTools'
+import { filePicker, renderIcon } from '@/utils/miaoTools'
 import uniq from 'lodash/uniq'
 
 import miaoDirectoryTop from './components/miaoDirectoryTop.vue'
@@ -108,6 +102,7 @@ const searchText = ref<string>('')
 const showDirs = ref<boolean>(true)
 const showFiles = ref<boolean>(true)
 const miaoDirectoryItemRef = ref()
+const miaoDirectoryTopRef = ref<InstanceType<typeof miaoDirectoryTop>>()
 const miaoAlertTip = ref<InstanceType<typeof miaoAlertTipProvider>>()
 
 class SelectedItem {
@@ -304,6 +299,16 @@ const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
                top: 0,
                behavior: 'instant'
             })
+            // miaoDirectoryTopRef.value &&
+            //    miaoDirectoryTopRef.value.scrollTo({
+            //    top: 0,
+            //    behavior: 'instant'
+            // })
+            miaoDirectoryTopRef.value?.scrollTo({
+               top: 0,
+               left: 999,
+               behavior: 'instant'
+            })
          })
       }
       currentDirectories.value[0] = virtualDirectory

src/plugins/miaoIframe/miaoIframe.vue

@@ -4,8 +4,7 @@
          ref="iframeRef"
          :src="iframeSrc"
          frameborder="0"
-         class="iframe-container-iframe"
+         class="iframe-container-iframe"></iframe>
-      ></iframe>
    </div>
 </template>
 
@@ -13,7 +12,7 @@
 import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
 import cloneDeep from 'lodash/cloneDeep'
 import { inject, onMounted, ref } from 'vue'
-import buildFromTree from '../../hooks/buildFromTree'
+import buildFromTree from '../../utils/buildFromTree'
 
 const root = inject('rootDirectory') as VirtualDirectory
 const currentFiles = defineModel<VirtualFile[]>('currentFiles', {

src/plugins/miaoImages/miaoImages.vue

@@ -1,21 +1,13 @@
 <template>
    <miao-drop-handler
       @on-virtual-directory="handleDrop"
-      @on-virtual-files="handleDrop"
+      @on-virtual-files="handleDrop">
-   >
       <miao-message-provider ref="miaoMessageRef">
-         <div
+         <div class="miaoImage" ref="rootRef">
-            class="miaoImage"
+            <n-scrollbar ref="NScrollbarRef" style="max-height: 100%">
-            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>
@@ -30,8 +22,7 @@
                   <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"
@@ -41,8 +32,7 @@
                               ? 'miaoImage-container-row-image-active'
                               : ''
                         "
-                        @click="activeImage = vFile"
+                        @click="activeImage = vFile" />
-                     />
                   </div>
                </div>
             </n-scrollbar>
@@ -50,23 +40,19 @@
                :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>

src/plugins/miaoMarkdown/miaoMarkdown.vue

@@ -2,8 +2,7 @@
    <n-scrollbar>
       <div
          class="miao-markdown-container-miaomiaomiao"
-         v-html="renderedMarkdown"
+         v-html="renderedMarkdown"></div>
-      ></div>
       <div style="height: 50px; width: 100%"></div>
    </n-scrollbar>
 </template>

src/plugins/miaoMusicPlayer/miaoMusicPlayer.vue

@@ -7,21 +7,15 @@
                :ap="ap"
                v-model:data="data"
                :updateLocalData="updateLocalData"
-               @new-collection="saveCurrPlayList"
+               @new-collection="saveCurrPlayList"></miao-music-main>
-            ></miao-music-main>
             <miao-mask
                :show="isAPlayerListShow"
                style="z-index: 5"
-               @click="() => ap?.list.hide()"
+               @click="() => ap?.list.hide()"></miao-mask>
-            ></miao-mask>
+            <div ref="aplayer" style="z-index: 10" />
-            <div
-               ref="aplayer"
-               style="z-index: 10"
-            />
             <miao-mask
                :show="isSavingCollection"
-               @click="isSavingCollection = false"
+               @click="isSavingCollection = false"></miao-mask>
-            ></miao-mask>
          </div>
       </miao-alert-tip-provider>
    </miao-drop-handler>

src/plugins/miaoMusicPlayer/src/collectionInfo.vue

@@ -1,23 +1,14 @@
 <template>
    <div class="collection-info-container">
       <div class="collection-info-container-top">
-         <div
+         <div class="collection-info-container-top-exit" @click="emit('exit')">
-            class="collection-info-container-top-exit"
-            @click="emit('exit')"
-         >
             <ArrowBackOutline></ArrowBackOutline>
          </div>
          <div class="collection-info-container-top-title">
-            <span
+            <span :tooltip="false" v-if="!isEditing">
-               :tooltip="false"
-               v-if="!isEditing"
-            >
                {{ collection.name }}
             </span>
-            <n-input
+            <n-input v-if="isEditing" v-model:value="collection.name"></n-input>
-               v-if="isEditing"
-               v-model:value="collection.name"
-            ></n-input>
          </div>
 
          <div
@@ -25,8 +16,7 @@
             v-if="isEditing"
             @click="
                clickDeleteCount !== 2 ? clickDeleteCount++ : emit('deleteSelf')
-            "
+            ">
-         >
             <TrashOutline></TrashOutline>
             <span>
                {{
@@ -42,8 +32,7 @@
       <div class="collection-info-container-controller">
          <div
             class="collection-info-container-controller-play"
-            @click="emit('playAll', collection)"
+            @click="emit('playAll', collection)">
-         >
             <div class="collection-info-container-controller-play-icon">
                <CaretForwardOutline></CaretForwardOutline>
             </div>
@@ -54,11 +43,11 @@
          <div class="collection-info-container-controller-right">
             <div
                class="collection-info-container-controller-edit"
-               @click="isEditing = !isEditing"
+               @click="isEditing = !isEditing">
-            >
                <component
-                  :is="isEditing ? CheckmarkOutline : CreateOutline"
+                  :is="
-               ></component>
+                     isEditing ? CheckmarkOutline : CreateOutline
+                  "></component>
             </div>
          </div>
       </div>
@@ -69,46 +58,40 @@
                :animation="150"
                handle=".collection-info-container-audioList-item-controller-item-drag"
                ghostClass="iSDragging"
-               @end="updateAudiosIndex"
+               @end="updateAudiosIndex">
-            >
                <div
                   v-for="(audio, index) in collection.audios"
-                  class="collection-info-container-audioList-item"
+                  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"
+                        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"
+                        v-if="isEditing"></n-input>
-                     ></n-input>
                   </div>
                   <div
-                     class="collection-info-container-audioList-item-controller"
+                     class="collection-info-container-audioList-item-controller">
-                  >
                      <PlayOutline
                         class="collection-info-container-audioList-item-controller-item"
                         v-if="!isEditing"
-                        @click="emit('playAll', collection, index)"
+                        @click="
-                     ></PlayOutline>
+                           emit('playAll', collection, index)
+                        "></PlayOutline>
                      <TrashOutline
                         class="collection-info-container-audioList-item-controller-item"
                         v-if="isEditing"
-                        @click="handleDelete(index)"
+                        @click="handleDelete(index)"></TrashOutline>
-                     ></TrashOutline>
                      <ReorderFourOutline
                         v-if="isEditing"
-                        class="collection-info-container-audioList-item-controller-item collection-info-container-audioList-item-controller-item-drag"
+                        class="collection-info-container-audioList-item-controller-item collection-info-container-audioList-item-controller-item-drag"></ReorderFourOutline>
-                     ></ReorderFourOutline>
                   </div>
                </div>
             </VueDraggable>

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

@@ -1,13 +1,9 @@
 <template>
    <div class="aplayer-list-top">
-      <div
+      <div @click="loopModeToggle" class="aplayer-list-top-loopMode">
-         @click="loopModeToggle"
-         class="aplayer-list-top-loopMode"
-      >
          <component
             :is="loopModeMap[loopMode].icon"
-            class="aplayer-list-top-loopMode-icon"
+            class="aplayer-list-top-loopMode-icon"></component>
-         ></component>
          <span class="aplayer-list-top-loopMode-name">
             {{ loopModeMap[loopMode].name }}
          </span>
@@ -16,8 +12,7 @@
          <AddCircleOutline
             v-if="onSaveCollection"
             class="aplayer-list-top-buttons-icon"
-            @click="onSaveCollection(ap.list.audios)"
+            @click="onSaveCollection(ap.list.audios)"></AddCircleOutline>
-         ></AddCircleOutline>
       </div>
       <span></span>
    </div>
@@ -27,8 +22,7 @@
          !isDragging ? 'miaoMusic-ol-isDragging' : 'miaoMusic-ol-notDragging'
       ]"
       :key="refreshKey"
-      ref="ol"
+      ref="ol">
-   >
       <VueDraggable
          v-model="ap.list.audios"
          @start="onDragStart"
@@ -36,79 +30,67 @@
          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 }"
+               :style="{ backgroundColor: apTheme }"></span>
-            ></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"
+                     class="aplayer-list-control-btn-svg"></component>
-                  ></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" />
                </div>
                <div
                   class="aplayer-list-control-btn"
                   @click.stop="listAudioDown(index)"
-                  v-if="false"
+                  v-if="false">
-               >
                   <ChevronDownOutline class="aplayer-list-control-btn-svg" />
                </div>
                <div
                   class="aplayer-list-control-btn aplayer-list-control-btn-hover"
-                  @click.stop="listAudioRemove(index)"
+                  @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" />
                </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,17 +1,10 @@
 <template>
-   <div
+   <div class="collection" @click="emit('onenter')">
-      class="collection"
+      <div class="collection-cover" @click.stop="emit('onPlay')">
-      @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>
@@ -37,7 +30,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import collectionType from '../../types/collection'
-import dateFormatter from '@/hooks/dateFormatter'
+import dateFormatter from '@/utils/dateFormatter'
 import { Play } from '@vicons/ionicons5'
 
 const props = defineProps<{

src/plugins/miaoMusicPlayer/src/main.vue

@@ -8,21 +8,18 @@
                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)"
+                  @onenter="handleCollectionEnter(item)"></collection>
-               ></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 />
@@ -32,8 +29,7 @@
                   <n-button
                      size="small"
                      type="primary"
-                     @click="emit('newCollection')"
+                     @click="emit('newCollection')">
-                  >
                      立刻创建
                   </n-button>
                </template>
@@ -47,8 +43,7 @@
             v-if="currCollection"
             @exit="handleCollectionEnter(undefined)"
             @delete-self="handleCollectionDelete()"
-            @play-all="handleCollectionsPlay"
+            @play-all="handleCollectionsPlay"></collectionInfo>
-         ></collectionInfo>
       </Transition>
    </div>
 </template>

src/plugins/miaoPDF/miaoPDF.vue

@@ -5,36 +5,31 @@
             <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>
@@ -43,15 +38,13 @@
                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/miaoVideoPlayer/miaoVideoPlayer.vue

@@ -1,10 +1,7 @@
 <template>
    <miao-drop-handler @on-virtual-files="handleDropVFiles">
       <div class="player-container">
-         <div
+         <div ref="xgPlayer" id="xgplayer"></div>
-            ref="xgPlayer"
-            id="xgplayer"
-         ></div>
       </div>
    </miao-drop-handler>
 </template>

src/styles/default.scss

@@ -1,3 +1,92 @@
 :root body {
    background-color: aliceblue;
 }
+
+// html,
+// body,
+// div,
+// span,
+// applet,
+// object,
+// iframe,
+// h1,
+// h2,
+// h3,
+// h4,
+// h5,
+// h6,
+// p,
+// blockquote,
+// pre,
+// a,
+// abbr,
+// acronym,
+// address,
+// big,
+// cite,
+// code,
+// del,
+// dfn,
+// em,
+// img,
+// ins,
+// kbd,
+// q,
+// s,
+// samp,
+// small,
+// strike,
+// strong,
+// sub,
+// sup,
+// tt,
+// var,
+// b,
+// u,
+// i,
+// center,
+// dl,
+// dt,
+// dd,
+// ol,
+// ul,
+// li,
+// fieldset,
+// form,
+// label,
+// legend,
+// table,
+// caption,
+// tbody,
+// tfoot,
+// thead,
+// tr,
+// th,
+// td,
+// article,
+// aside,
+// canvas,
+// details,
+// embed,
+// figure,
+// figcaption,
+// footer,
+// header,
+// hgroup,
+// menu,
+// nav,
+// output,
+// ruby,
+// section,
+// summary,
+// time,
+// mark,
+// audio,
+// video {
+//    margin: 0;
+//    padding: 0;
+//    border: 0;
+//    font-size: 100%;
+//    vertical-align: baseline;
+//    box-sizing: border-box;
+// }