From 143aa7979798ffd6eb4b0dc1e6078ee47d1b4138 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Tue, 19 Mar 2024 12:53:23 +0800
Subject: [PATCH] fix defer

---
 src/components/FileBrowser.vue          |  21 +--
 src/components/filebrowser/List.vue     |   7 +
 src/components/filebrowser/Tree.vue     | 203 ------------------------
 src/views/plugin/PluginCardListView.vue |  25 ++-
 4 files changed, 27 insertions(+), 229 deletions(-)
 delete mode 100644 src/components/filebrowser/Tree.vue

diff --git a/src/components/FileBrowser.vue b/src/components/FileBrowser.vue
index ead2f2d9..1bff79fd 100644
--- a/src/components/FileBrowser.vue
+++ b/src/components/FileBrowser.vue
@@ -4,7 +4,6 @@ import axios from 'axios'
 import List from './filebrowser/List.vue'
 
 import Toolbar from './filebrowser/Toolbar.vue'
-import Tree from './filebrowser/Tree.vue'
 import type { EndPoints } from '@/api/types'
 
 // 输入参数
@@ -70,12 +69,10 @@ const storagesArray = computed(() => {
 
 // 方法
 function loadingChanged(loading: number) {
-  if (loading) {
+  if (loading)
     loading++
-  }
-  else if (loading > 0) {
+  else if (loading > 0)
     loading--
-  }
 }
 
 function storageChanged(storage: string) {
@@ -115,20 +112,6 @@ onMounted(() => {
         @sortchanged="sortChanged"
       />
       <VRow no-gutters>
-        <VCol v-if="tree" sm="auto" class="d-none d-md-block">
-          <Tree
-            :path="path"
-            :storage="activeStorage"
-            :icons="fileIcons"
-            :endpoints="endpoints"
-            :axios="axiosInstance"
-            :refreshpending="refreshPending"
-            @pathchanged="pathChanged"
-            @loading="loadingChanged"
-            @refreshed="refreshPending = false"
-          />
-        </VCol>
-        <VDivider v-if="tree" vertical />
         <VCol>
           <List
             :path="path"
diff --git a/src/components/filebrowser/List.vue b/src/components/filebrowser/List.vue
index 490fd561..6103618a 100644
--- a/src/components/filebrowser/List.vue
+++ b/src/components/filebrowser/List.vue
@@ -10,6 +10,7 @@ import type { Context, EndPoints, FileItem } from '@/api/types'
 import store from '@/store'
 import api from '@/api'
 import MediaInfoCard from '@/components/cards/MediaInfoCard.vue'
+import { useDefer } from '@/@core/utils/dom'
 
 // 输入参数
 const inProps = defineProps({
@@ -73,6 +74,9 @@ const nameTestResult = ref<Context>()
 // 识别结果对话框
 const nameTestDialog = ref(false)
 
+// 延迟加载
+let defer = (_: number) => true
+
 // 目录过滤
 const dirs = computed(() =>
   items.value.filter(item => item.type === 'dir' && item.basename.includes(filter.value)),
@@ -111,6 +115,7 @@ async function load() {
   }
   // 加载数据
   items.value = await axiosInstance.value.request(config) ?? []
+  defer = useDefer(items.value.length)
   emit('loading', false)
   loading.value = false
 }
@@ -382,6 +387,7 @@ onMounted(() => {
         >
           <template #default="hover">
             <VListItem
+              v-if="defer(index)"
               v-bind="hover.props"
               class="px-3 pe-1"
               @click="changePath(item.path)"
@@ -466,6 +472,7 @@ onMounted(() => {
         >
           <template #default="hover">
             <VListItem
+              v-if="defer(index)"
               v-bind="hover.props"
               class="pl-3 pe-1"
               @click="changePath(item.path)"
diff --git a/src/components/filebrowser/Tree.vue b/src/components/filebrowser/Tree.vue
deleted file mode 100644
index 32e32965..00000000
--- a/src/components/filebrowser/Tree.vue
+++ /dev/null
@@ -1,203 +0,0 @@
-<script lang="ts" setup>
-import type { Axios } from 'axios'
-import type { EndPoints, FileItem } from '@/api/types'
-
-// 输入参数
-const props = defineProps({
-  icons: Object,
-  storage: String,
-  path: String,
-  endpoints: Object as PropType<EndPoints>,
-  axios: Object as PropType<Axios>,
-  refreshpending: Boolean,
-})
-
-// 对外事件
-const emit = defineEmits(['pathchanged', 'loading', 'refreshed'])
-
-// 变量
-const open = ref<string[]>([])
-// 活跃的文件夹
-const active = ref<string[]>([])
-// 内容
-const items = ref<FileItem[]>([])
-// 过滤
-const filter = ref('')
-
-// 方法
-function init() {
-  open.value = []
-  items.value = [{
-    type: 'dir',
-    path: '/',
-    basename: 'root',
-    extension: '',
-    name: 'root',
-    children: [],
-    size: 0,
-    modify_time: 0,
-  }]
-}
-
-// 调用API读取文件夹
-async function readFolder(item: FileItem) {
-  emit('loading', true)
-  const url = props.endpoints?.list.url
-    .replace(/{storage}/g, props.storage)
-    .replace(/{path}/g, item.path)
-
-  const config = {
-    url,
-    method: props.endpoints?.list.method || 'get',
-  }
-
-  const response: FileItem[] = await props.axios?.request(config) ?? []
-
-  item.children = response.map((item: FileItem) => {
-    if (item.type === 'dir')
-      item.children = []
-
-    return item
-  })
-
-  emit('loading', false)
-}
-
-// 选中变化
-function activeChanged(_active: string[]) {
-  let path = ''
-  if (active.value.length)
-    path = active.value[0]
-
-  if (props.path !== path)
-    emit('pathchanged', path)
-}
-
-// 查找文件
-function findItem(path: string) {
-  const stack: FileItem[] = []
-  stack.push(items.value[0])
-  while (stack.length > 0) {
-    const node = stack.pop()
-    if (node?.path === path) {
-      return node
-    }
-    else if (node?.children && node.children.length) {
-      for (const element of node.children)
-        stack.push(element)
-    }
-  }
-  return null
-}
-
-// 监听存储空间变量
-watch(() => props.storage, () => {
-  init()
-})
-
-// 监听路径变化
-watch(
-  () => props.path,
-  () => {
-    if (props.path) {
-      active.value = [props.path]
-      if (!open.value.includes(props.path))
-        open.value.push(props.path)
-    }
-  })
-
-// 监听 refreshPending
-watch(
-  () => props.refreshpending,
-  async () => {
-    if (props.refreshpending && props.path) {
-      const item = findItem(props.path)
-      if (item) {
-        await readFolder(item)
-        emit('refreshed')
-      }
-    }
-  },
-)
-
-onMounted(() => {
-  init()
-})
-</script>
-
-<template>
-  <VCard flat width="250" min-height="500" class="d-flex flex-column folders-tree-card">
-    <div class="grow scroll-x">
-      <VTreeview
-        :open="open"
-        :active="active"
-        :items="items"
-        :search="filter"
-        :load-children="readFolder"
-        item-key="path"
-        item-text="basename"
-        dense
-        activatable
-        transition
-        class="folders-tree"
-        @update:active="activeChanged"
-      >
-        <template #prepend="{ item, open }">
-          <VIcon
-            v-if="item.type === 'dir'"
-          >
-            {{ open ? 'mdi-folder-open-outline' : 'mdi-folder-outline' }}
-          </VIcon>
-          <VIcon v-else-if="props.icons" :icon="props.icons[item.extension.toLowerCase()] || props.icons.other" />
-        </template>
-        <template #label="{ item }">
-          {{ item.basename }}
-          <VBtn
-            v-if="item.type === 'dir'"
-            icon
-            class="ml-1"
-            @click.stop="readFolder(item)"
-          >
-            <VIcon class="pa-0 mdi-18px" color="grey lighten-1">
-              mdi-refresh
-            </VIcon>
-          </VBtn>
-        </template>
-      </VTreeview>
-    </div>
-    <VDivider />
-    <VToolbar
-      density="compact"
-    >
-      <VBtn icon @click="init">
-        <VIcon icon="mdi-collapse-all-outline" />
-      </VBtn>
-    </VToolbar>
-  </VCard>
-</template>
-
-<style lang="scss" scoped>
-.folders-tree-card {
-    height: 100%;
-
-    .scroll-x {
-        overflow-x: auto;
-    }
-
-    ::v-deep .folders-tree {
-        width: fit-content;
-        min-width: 250px;
-
-        .v-treeview-node {
-            cursor: pointer;
-
-            &:hover {
-                background-color: rgba(0, 0, 0, 0.02);
-            }
-        }
-    }
-}
-.v-toolbar{
-  background: rgb(var(--v-table-header-background));
-}
-</style>
diff --git a/src/views/plugin/PluginCardListView.vue b/src/views/plugin/PluginCardListView.vue
index c08a4e3a..7a94ed4d 100644
--- a/src/views/plugin/PluginCardListView.vue
+++ b/src/views/plugin/PluginCardListView.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { useDefer } from '@/@core/utils/dom'
 import api from '@/api'
 import type { Plugin } from '@/api/types'
 import NoDataFound from '@/components/NoDataFound.vue'
@@ -20,6 +21,9 @@ const isAppMarketLoaded = ref(false)
 // APP市场窗口
 const PluginAppDialog = ref(false)
 
+// 延迟加载
+let defer = (_: number) => true
+
 // 关闭插件市场窗口
 function pluginDialogClose() {
   PluginAppDialog.value = false
@@ -80,7 +84,9 @@ function refreshData() {
 
 // 获取没有更新的插件
 const getUnupdatedPlugins = computed(() => {
-  return uninstalledList.value.filter(item => !item.has_update)
+  const list = uninstalledList.value.filter(item => !item.has_update)
+  defer = useDefer(list.length)
+  return list
 })
 
 // 加载时获取数据
@@ -173,12 +179,17 @@ onBeforeMount(() => {
           />
         </div>
         <div v-if="isAppMarketLoaded" class="grid gap-4 grid-plugin-card items-start">
-          <PluginAppCard
-            v-for="data in getUnupdatedPlugins"
-            :key="data.id"
-            :plugin="data"
-            @install="pluginInstalled"
-          />
+          <div
+            v-for="(data, index) in getUnupdatedPlugins"
+            :key="index"
+          >
+            <PluginAppCard
+              v-if="defer(index)"
+              :key="data.id"
+              :plugin="data"
+              @install="pluginInstalled"
+            />
+          </div>
         </div>
         <NoDataFound
           v-if="uninstalledList.length === 0 && isAppMarketLoaded"