feat: 优化代码表现

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;
@@ -276,7 +276,7 @@ onMounted(() => {
         .item-main-info {
             margin-left: 10px;
             height: 100%;
-            width: calc( 100% - 10px );
+            width: calc(100% - 10px);
             display: flex;
             flex-direction: column;
 

src/components/miaoDirectory/miaoDirectoryItemsContainer.vue

@@ -3,15 +3,13 @@
         backgroundColor:
             index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
     }">
-        <n-scrollbar ref="scrollbarRef">
-            <miao-lazy-div v-for="(dir, index) in showData_directory" :key="dir.uid" :disableLazy="index < 20"
-                min-height="50px">
+        <n-scrollbar ref="scrollbarRef" style="max-height: 100%;">
+            <miao-lazy-div v-for="(dir, index) in showData_directory" :key="dir.uid" 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"
-                min-height="50px">
+            <miao-lazy-div v-for="(file) in showData_files" :key="file.uid" 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
-        class="container"
-        @dragover="handleDragOver"
-        @dragleave="handleDragLeave"
-        @drop="handleDrop">
+    <div 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 () => {