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']
 }

src/App.vue

@@ -137,10 +137,7 @@ provide('rootDirectory', rootDirectory)
 </script>
 
 <template>
-   <div
+   <div class="view" ref="viewRef">
-      class="view"
-      ref="viewRef"
-   >
       <miao-message-provider ref="messageProviderRef">
          <div class="view-controller">
             <n-scrollbar x-scrollable>
@@ -149,13 +146,11 @@ provide('rootDirectory', rootDirectory)
                      <div
                         class="tab"
                         v-for="(view, index) of views._views"
-                        :key="view.id"
+                        :key="view.id">
-                     >
                         <span
                            class="tab-title"
                            :title="view.title"
-                           @click="handleClickTitle(index)"
+                           @click="handleClickTitle(index)">
-                        >
                            {{
                               view.title.length > 5 && 0
                                  ? `${view.title.substring(0, 5)}...`
@@ -165,20 +160,16 @@ provide('rootDirectory', rootDirectory)
                         <div class="tab-control">
                            <div
                               class="tab-point"
-                              :style="{ backgroundColor: view.color }"
+                              :style="{ backgroundColor: view.color }"></div>
-                           ></div>
                            <n-icon
                               class="tag-control-icon icon"
-                              @click="view.switchShow()"
+                              @click="view.switchShow()">
-                           >
                               <EyeOutline
                                  v-show="view.visible"
-                                 class="icon-inner"
+                                 class="icon-inner" />
-                              />
                               <EyeOffOutline
                                  v-show="!view.visible"
-                                 class="icon-inner"
+                                 class="icon-inner" />
-                              />
                            </n-icon>
                            <n-icon
                               class="tag-control-icon icon"
@@ -191,14 +182,12 @@ provide('rootDirectory', rootDirectory)
                                     index + 1
                                  )
                               "
-                              v-if="view.allowCopy"
+                              v-if="view.allowCopy">
-                           >
                               <CopyOutline />
                            </n-icon>
                            <n-icon
                               class="tag-control-icon icon"
-                              @click="deleteView(index)"
+                              @click="deleteView(index)">
-                           >
                               <CloseOutline class="icon-inner" />
                            </n-icon>
                         </div>
@@ -211,8 +200,7 @@ provide('rootDirectory', rootDirectory)
                   <n-dropdown
                      trigger="click"
                      :options="openMenuOption"
-                     @select="handleMenuSelect"
+                     @select="handleMenuSelect">
-                  >
                      <n-icon class="icon">
                         <EllipsisVertical class="icon-inner" />
                      </n-icon>
@@ -226,8 +214,7 @@ provide('rootDirectory', rootDirectory)
                class="view-container-item"
                v-for="(view, index) of views._views"
                :class="!view.visible ? 'view-container-item-hidden' : ''"
-               :key="view.id"
+               :key="view.id">
-            >
                <component
                   :is="view.component"
                   v-model:current-directories="view.currentDirectories"
@@ -236,23 +223,18 @@ provide('rootDirectory', rootDirectory)
                   :color="view.color"
                   :view="view"
                   :views="views"
-                  @exit="deleteView(index)"
+                  @exit="deleteView(index)"></component>
-               ></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>
 

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

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>

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>

src/plugins/miaoDirectory/components/miaoDirectoryTop.vue

@@ -3,18 +3,13 @@
       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-breadcrumb
+            <n-breadcrumb separator=">" style="margin-left: 5px">
-               separator=">"
-               style="margin-left: 5px"
-            >
                <n-breadcrumb-item :clickable="false">
                   <n-icon size="18">
                      <CloudOutline />
@@ -23,8 +18,7 @@
                <n-breadcrumb-item
                   v-for="dir in currentDirectory?.getParents"
                   @click="handleClickBreadcrumbItem(dir)"
-                  :clickable="true"
+                  :clickable="true">
-               >
                   <div>{{ dir.name }}</div>
                </n-breadcrumb-item>
             </n-breadcrumb>
@@ -34,26 +28,20 @@
          <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>

src/plugins/miaoDirectory/miaoDirectory.vue

@@ -2,13 +2,9 @@
    <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
                :color="props.color"
@@ -20,8 +16,7 @@
                :index="index"
                @set-current-directory="setCurrentDirectory"
                @search="handleSearch"
-               @menu-select="handleTopBarMenuSelect"
+               @menu-select="handleTopBarMenuSelect" />
-            />
 
             <!-- 文件和文件夹列表 -->
             <miao-directory-items
@@ -36,16 +31,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>

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>
 

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>

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>