From 704c80e019feb055454313d6d049f5a77dfd2dec Mon Sep 17 00:00:00 2001
From: Miao_Spring <539943419@qq.com>
Date: Fri, 30 Aug 2024 16:41:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=201.=E9=80=9A=E8=BF=87=E6=87=92=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E5=A4=A7=E5=A4=A7=E4=BC=98=E5=8C=96miaoDirectory?=
 =?UTF-8?q?=E7=9A=84=E4=BD=BF=E7=94=A8=E4=BD=93=E9=AA=8C=E3=80=822.?=
 =?UTF-8?q?=E7=8E=B0=E5=9C=A8=E5=88=87=E6=8D=A2=E6=96=87=E4=BB=B6=E5=A4=B9?=
 =?UTF-8?q?=E6=97=B6=E4=BC=9A=E8=87=AA=E5=8A=A8=E6=B8=85=E7=A9=BA=E5=A4=9A?=
 =?UTF-8?q?=E9=80=89=E6=96=87=E4=BB=B6=E5=88=97=E8=A1=A8=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/miaoLazyDiv.vue | 49 ++++++++++++++++++++++++++++++++++
 src/views/miaoDirectory.vue    | 41 +++++++++++++++++++---------
 2 files changed, 77 insertions(+), 13 deletions(-)
 create mode 100644 src/components/miaoLazyDiv.vue

diff --git a/src/components/miaoLazyDiv.vue b/src/components/miaoLazyDiv.vue
new file mode 100644
index 0000000..178c275
--- /dev/null
+++ b/src/components/miaoLazyDiv.vue
@@ -0,0 +1,49 @@
+<template>
+    <div class="miao-lazy" ref="miaoLazyRoot" :style="!show ? { minHeight, minWidth } : {}">
+        <slot v-if="show" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+const props = defineProps({
+    show: {
+        type: Boolean,
+        default: false,
+    },
+    minHeight: {
+        type: String,
+        default: 'none',
+    },
+    minWidth: {
+        type: String,
+        default: 'none',
+    }
+})
+
+const miaoLazyRoot = ref<HTMLDivElement>()
+
+const show = ref<boolean>(props.show === true)
+
+onMounted(() => {
+    if (show.value === false) {
+        let options = {
+            root: null, // 默认为视窗
+            rootMargin: '0px', // 视窗的外边距
+            threshold: 0.1 // 目标元素可见比例达到 10% 时触发回调
+        };
+
+        let observer: IntersectionObserver | undefined = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting) {
+                show.value = true
+                // miaoLazyRoot.value && observer?.unobserve(miaoLazyRoot.value)
+                // observer = undefined
+            } else {
+                show.value = false
+            }
+        }, options);
+        miaoLazyRoot.value && observer.observe(miaoLazyRoot.value);
+    }
+})
+</script>
\ No newline at end of file
diff --git a/src/views/miaoDirectory.vue b/src/views/miaoDirectory.vue
index c5add56..d02132a 100644
--- a/src/views/miaoDirectory.vue
+++ b/src/views/miaoDirectory.vue
@@ -40,19 +40,24 @@
                 backgroundColor:
                     index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
             }">
-                <n-scrollbar>
+                <n-scrollbar ref="scrollbarRef">
                     <transition-group name="dirItem">
-                        <miaoDirectoryItem v-for="dir in showData_directory" :item="dir" :key="dir.uid"
-                            :color="props.color" :selectedItem="selectedItem.value" @delete="handleItemDelete(dir)"
-                            @click="handleItemClick(dir)" @drag-start="handleItemDragStart"
-                            @rename="handleItemRename(dir)" @on-selected="handleItemSelect(dir)" />
+                        <miao-lazy-div v-for="(dir, index) in showData_directory" :key="dir.uid" :show="index < 20"
+                            min-height="50px">
+                            <miaoDirectoryItem :item="dir" :color="props.color" :selectedItem="selectedItem.value"
+                                @delete="handleItemDelete(dir)" @click="handleItemClick(dir)"
+                                @drag-start="handleItemDragStart" @rename="handleItemRename(dir)"
+                                @on-selected="handleItemSelect(dir)" />
+                        </miao-lazy-div>
                     </transition-group>
                     <transition-group name="dirItem">
-                        <miaoDirectoryItem v-for="file in showData_files" :item="file" :key="file.uid"
-                            :color="props.color" :selectedItem="selectedItem.value" @click="handleItemClick(file)"
-                            @download="handleItemDownload(file)" @delete="handleItemDelete(file)"
-                            @drag-start="handleItemDragStart" @rename="handleItemRename(file)"
-                            @on-selected="handleItemSelect(file)" />
+                        <miao-lazy-div v-for="(file, index) in showData_files" :key="file.uid" :show="index < 20"
+                            min-height="50px">
+                            <miaoDirectoryItem :item="file" :color="props.color" :selectedItem="selectedItem.value"
+                                @click="handleItemClick(file)" @download="handleItemDownload(file)"
+                                @delete="handleItemDelete(file)" @drag-start="handleItemDragStart"
+                                @rename="handleItemRename(file)" @on-selected="handleItemSelect(file)" />
+                        </miao-lazy-div>
                     </transition-group>
                     <!-- <n-virtual-list :item="showData_all" :item-size="50">
 
@@ -93,10 +98,11 @@
 <script setup lang="ts">
 import { NBreadcrumbItem, NBreadcrumb, NIcon, NScrollbar } from 'naive-ui'
 import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 import Config from '@/config'
 import miaoMask from '@/components/miaoMask.vue'
 import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue'
+import miaoLazyDiv from '@/components/miaoLazyDiv.vue'
 import miaoPopupInput from '@/components/miaoPopupInput.vue'
 import miaoDropHandler from '@/components/miaoDropHandler.vue'
 import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
@@ -130,6 +136,9 @@ const emit = defineEmits<{
 }>()
 
 const popupInput = ref()
+
+const scrollbarRef = ref()
+
 // 是否显示模态框
 const showModel = ref(0)
 
@@ -212,7 +221,14 @@ const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
     } else {
         virtualDirectory.update()
     }
+    currentDirectories.value[0] !== virtualDirectory && selectedItem.clear()
     currentDirectories.value[0] = virtualDirectory
+    nextTick(() => {
+        scrollbarRef.value.scrollTo({
+            top: 0,
+            behavior: "instant"
+        })
+    })
 }
 
 const reload = () => {
@@ -607,5 +623,4 @@ $bottom-bar-height: 60px;
 //             position: absolute;
 //         }
 //     }
-// }
-</style>
+// }</style>