feat: 优化代码表现

src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { h, onMounted, reactive, ref, shallowRef } from 'vue'
-import { NIcon, NScrollbar, NDropdown, NQrCode } from 'naive-ui'
+import { NIcon, NScrollbar, NDropdown } from 'naive-ui'
 import {
     EyeOffOutline,
     EyeOutline,
@@ -88,11 +88,11 @@ const openMenuOption = [
     }
 ]
 
-const handleMenuSelect = (key: string) => {
+const handleMenuSelect = async (key: string) => {
     if (key === 'share') {
         showModal.value = true
         modalData.value = {
-            component: NQrCode,
+            component: (await import('naive-ui/es/qr-code')).NQrCode,
             props: {
                 value: baseUrl,
                 size: 300,
@@ -114,37 +114,21 @@ onMounted(() => {
             <n-scrollbar x-scrollable>
                 <div class="tabs-container">
                     <transition-group name="tab">
-                        <div
+                        <div class="tab" v-for="(view, index) of views._views" :key="view.uid">
-                            class="tab"
+                            <span class="tab-title" :title="view.title" @click="handleClickTitle(index)">
-                            v-for="(view, index) of views._views"
-                            :key="view.uid">
-                            <span
-                                class="tab-title"
-                                :title="view.title"
-                                @click="handleClickTitle(index)">
                                 {{
                                     view.title.length > 5 && 0
                                         ? `${view.title.substring(0, 5)}...`
                                         : view.title
                                 }}
                             </span>
-                            <div
+                            <div class="tab-point" :style="{ backgroundColor: view.color }"></div>
-                                class="tab-point"
-                                :style="{ backgroundColor: view.color }"></div>
                             <div class="tab-control">
-                                <n-icon
+                                <n-icon class="tag-control-icon icon" @click="view.switchShow()">
-                                    class="tag-control-icon icon"
+                                    <EyeOutline v-show="view.visible" class="icon-inner" />
-                                    @click="view.switchShow()">
+                                    <EyeOffOutline v-show="!view.visible" class="icon-inner" />
-                                    <EyeOutline
-                                        v-show="view.visible"
-                                        class="icon-inner" />
-                                    <EyeOffOutline
-                                        v-show="!view.visible"
-                                        class="icon-inner" />
                                 </n-icon>
-                                <n-icon
+                                <n-icon class="tag-control-icon icon" @click="
-                                    class="tag-control-icon icon"
-                                    @click="
                                     createView(
                                         view.component,
                                         view.currentDirectories,
@@ -154,9 +138,7 @@ onMounted(() => {
                                     ">
                                     <CopyOutline />
                                 </n-icon>
-                                <n-icon
+                                <n-icon class="tag-control-icon icon" @click="deleteView(index)">
-                                    class="tag-control-icon icon"
-                                    @click="deleteView(index)">
                                     <CloseOutline class="icon-inner" />
                                 </n-icon>
                             </div>
@@ -166,10 +148,7 @@ onMounted(() => {
             </n-scrollbar>
             <div class="view-controller-menu">
                 <div class="view-controller-menu-item">
-                    <n-dropdown
+                    <n-dropdown trigger="click" :options="openMenuOption" @select="handleMenuSelect">
-                        trigger="click"
-                        :options="openMenuOption"
-                        @select="handleMenuSelect">
                         <n-icon class="icon">
                             <EllipsisVertical class="icon-inner" />
                         </n-icon>
@@ -179,17 +158,10 @@ onMounted(() => {
         </div>
         <div class="view-container">
             <transition-group name="page">
-                <div
+                <div class="view-container-item" v-for="(view, index) of views._views" v-show="view.visible"
-                    class="view-container-item"
-                    v-for="(view, index) of views._views"
-                    v-show="view.visible"
                     :key="view.uid">
-                    <component
+                    <component :is="view.component" v-model:current-directories="view.currentDirectories"
-                        :is="view.component"
+                        v-model:current-files="view.currentFiles" :id="view.uid" :color="view.color"
-                        v-model:current-directories="view.currentDirectories"
-                        v-model:current-files="view.currentFiles"
-                        :id="view.uid"
-                        :color="view.color"
                         @exit="deleteView(index)"></component>
                 </div>
             </transition-group>
@@ -197,10 +169,8 @@ onMounted(() => {
     </div>
     <!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
     <MiaoMask v-model:show="showModal" @click="showModal = false">
-        <component
+        <component @click="(e: any) => e.stopPropagation()" :is="modalData?.component" v-bind="modalData?.props">
-            @click="(e:any) => e.stopPropagation()"
+        </component>
-            :is="modalData?.component"
-            v-bind="modalData?.props"></component>
     </MiaoMask>
 </template>
 
@@ -246,6 +216,7 @@ $tag-width: 170px;
                     overflow: hidden;
                     white-space: nowrap;
                     text-overflow: ellipsis;
+
                     span {
                         user-select: none;
                         cursor: pointer;
@@ -333,7 +304,7 @@ $tag-width: 170px;
         .view-container-item {
             flex: 1;
             height: 100%;
-            min-width: 200px;
+            min-width: 180px;
         }
 
         &::-webkit-scrollbar {
@@ -363,6 +334,7 @@ $tag-width: 170px;
 .view {
     .view-controller {
         .tabs-container {
+
             .tab-move,
             .tab-enter-active {
                 transition: all 0.2s ease;

src/components/miaoDirectory/miaoDirectoryItem.vue

@@ -7,7 +7,7 @@
                 <div class="item-main-info">
                     <div class="item-main-info-name">
                         <Icon class="item-main-info-name-icon" v-if="clientWidth <= 250"></Icon>
-                        <n-ellipsis style="max-width: 80%;">{{ name }}</n-ellipsis>
+                        <n-ellipsis :style="{ maxWidth: clientWidth > 250 ? '80%' : '75%' }">{{ name }}</n-ellipsis>
                     </div>
                     <div class="item-main-info-date" v-if="time">
                         {{ time }}
@@ -238,7 +238,7 @@ onMounted(() => {
 .miao-item {
     cursor: pointer;
     width: calc(100% - 20px);
-    min-width: 170px;
+    // min-width: 170px;
     // aspect-ratio: 66/9;
     height: 50px;
     position: relative;

src/components/miaoDirectory/miaoDirectoryItemsContainer.vue

@@ -3,15 +3,13 @@
         backgroundColor:
             index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
     }">
-        <n-scrollbar ref="scrollbarRef">
+        <n-scrollbar ref="scrollbarRef" style="max-height: 100%;">
-            <miao-lazy-div v-for="(dir, index) in showData_directory" :key="dir.uid" :disableLazy="index < 20"
+            <miao-lazy-div v-for="(dir, index) in showData_directory" :key="dir.uid" min-height="50px">
-                min-height="50px">
                 <miaoDirectoryItem :item="dir" :color="props.color" :selectedItem="selectedItem"
                     @delete="handleItemDelete(dir)" @click="handleItemClick(dir)" @drag-start="handleItemDragStart"
                     @rename="handleItemRename(dir)" @on-selected="handleItemSelect(dir)" />
             </miao-lazy-div>
-            <miao-lazy-div v-for="(file, index) in showData_files" :key="file.uid" :disableLazy="index < 20"
+            <miao-lazy-div v-for="(file) in showData_files" :key="file.uid" min-height="50px">
-                min-height="50px">
                 <miaoDirectoryItem :item="file" :color="props.color" :selectedItem="selectedItem"
                     @click="handleItemClick(file)" @download="handleItemDownload(file)" @delete="handleItemDelete(file)"
                     @drag-start="handleItemDragStart" @rename="handleItemRename(file)"
@@ -77,6 +75,7 @@ const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
 <style scoped lang="scss">
 .miao-directory-container-items {
     width: 100%;
-    height: calc(100% - 30px - 60px);
+    flex: 1;
+    min-height: 0;
 }
 </style>

src/components/miaoDropHandler.vue

@@ -1,9 +1,5 @@
 <template>
-    <div
+    <div class="container" @dragover="handleDragOver" @dragleave="handleDragLeave" @drop="handleDrop">
-        class="container"
-        @dragover="handleDragOver"
-        @dragleave="handleDragLeave"
-        @drop="handleDrop">
         <slot></slot>
         <miao-mask v-model:show="showMask"></miao-mask>
     </div>
@@ -63,8 +59,11 @@ const removeDirectory = async (files: File[]) => {
 }
 
 const handleDragOver = async (event: DragEvent) => {
-    showMask.value += 1
     event.preventDefault()
+    if (showMask.value === 1) {
+        return
+    }
+    showMask.value = 1
 }
 
 const handleDragLeave = async () => {