fix: 文件管理初始化两次的bug

src/components/FileBrowser.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import type { Axios } from 'axios'
 import axios from 'axios'
+import List from './filebrowser/List.vue'
 
 import Toolbar from './filebrowser/Toolbar.vue'
 import Tree from './filebrowser/Tree.vue'
-import List from './filebrowser/List.vue'
 import type { EndPoints } from '@/api/types'
 
 // 输入参数
@@ -70,10 +70,12 @@ 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) {
@@ -92,56 +94,58 @@ function sortChanged(s: string) {
 }
 
 // 初始化
-onBeforeMount(() => {
+onMounted(() => {
   activeStorage.value = props.storage ?? 'local'
   axiosInstance.value = props.axios ?? axios.create(props.axiosconfig)
 })
 </script>
 
 <template>
-  <VCard class="mx-auto" :loading="loading > 0">
-    <Toolbar
-      :path="props.path"
-      :storages="storagesArray"
-      :storage="activeStorage"
-      :endpoints="props.endpoints"
-      :axios="axiosInstance"
-      @storagechanged="storageChanged"
-      @pathchanged="pathChanged"
-      @foldercreated="refreshPending = true"
-      @sortchanged="sortChanged"
-    />
-    <VRow no-gutters>
-      <VCol v-if="tree" sm="auto" class="d-none d-md-block">
-        <Tree
-          :path="props.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="props.path"
-          :storage="activeStorage"
-          :icons="fileIcons"
-          :endpoints="endpoints"
-          :axios="axiosInstance"
-          :refreshpending="refreshPending"
-          :sort="sort"
-          @pathchanged="pathChanged"
-          @loading="loadingChanged"
-          @refreshed="refreshPending = false"
-          @filedeleted="refreshPending = true"
-          @renamed="refreshPending = true"
-        />
-      </VCol>
-    </VRow>
+  <VCard class="mx-auto" :loading="loading > 0 || !path">
+    <div v-if="path">
+      <Toolbar
+        :path="path"
+        :storages="storagesArray"
+        :storage="activeStorage"
+        :endpoints="endpoints"
+        :axios="axiosInstance"
+        @storagechanged="storageChanged"
+        @pathchanged="pathChanged"
+        @foldercreated="refreshPending = true"
+        @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"
+            :storage="activeStorage"
+            :icons="fileIcons"
+            :endpoints="endpoints"
+            :axios="axiosInstance"
+            :refreshpending="refreshPending"
+            :sort="sort"
+            @pathchanged="pathChanged"
+            @loading="loadingChanged"
+            @refreshed="refreshPending = false"
+            @filedeleted="refreshPending = true"
+            @renamed="refreshPending = true"
+          />
+        </VCol>
+      </VRow>
+    </div>
   </VCard>
 </template>

src/views/reorganize/FileBrowserView.vue

@@ -3,42 +3,79 @@ import api from '@/api'
 import FileBrowser from '@/components/FileBrowser.vue'
 
 const endpoints = {
-  list: { url: '/filebrowser/list?path={path}&sort={sort}', method: 'get' },
-  mkdir: { url: '/filebrowser/mkdir?path={path}', method: 'get' },
-  delete: { url: '/filebrowser/delete?path={path}', method: 'get' },
-  download: { url: '/filebrowser/download?path={path}', method: 'get' },
-  image: { url: '/filebrowser/image?path={path}', method: 'get' },
-  rename: { url: '/filebrowser/rename?path={path}&new_name={newname}', method: 'get' },
+  list: {
+    url: '/filebrowser/list?path={path}&sort={sort}',
+    method: 'get',
+  },
+  mkdir: {
+    url: '/filebrowser/mkdir?path={path}',
+    method: 'get',
+  },
+  delete: {
+    url: '/filebrowser/delete?path={path}',
+    method: 'get',
+  },
+  download: {
+    url: '/filebrowser/download?path={path}',
+    method: 'get',
+  },
+  image: {
+    url: '/filebrowser/image?path={path}',
+    method: 'get',
+  },
+  rename: {
+    url: '/filebrowser/rename?path={path}&new_name={newname}',
+    method: 'get',
+  },
 }
 
 // 读取下载目录
-const path = ref('/')
+const path: Ref<string | undefined> = ref()
 
 // 调用API，加载当前系统环境设置
-async function loadSystemSettings() {
-  try {
-    const result: { [key: string]: any } = await api.get('system/env')
-    if (result.success)
-      path.value = result.data?.DOWNLOAD_PATH || '/'
-    if (path.value && !path.value.endsWith('/'))
-      path.value += '/'
-  }
-  catch (error) {
-    console.log(error)
-  }
+function loadSystemSettings(): Promise<string> {
+  return new Promise((resolve, reject) => {
+    api
+      .get('system/env')
+      .then((result: any) => {
+        let path = '/'
+        if (result.success)
+          path = result.data?.DOWNLOAD_PATH || '/'
+
+        if (!path.endsWith('/'))
+          path += '/'
+
+        resolve(path)
+      })
+      .catch(error => reject(error))
+  })
 }
 
 function pathChanged(_path: string) {
   path.value = _path
 }
 
-onBeforeMount(async () => {
-  await loadSystemSettings()
+onMounted(() => {
+  loadSystemSettings()
+    .then((res) => {
+      path.value = res
+    })
+    .catch((error) => {
+      console.error(error)
+      path.value = '/'
+    })
 })
 </script>
 
 <template>
   <div>
-    <FileBrowser storages="local" :tree="false" :path="path" :endpoints="endpoints" :axios="api" @pathchanged="pathChanged" />
+    <FileBrowser
+      storages="local"
+      :tree="false"
+      :path="path"
+      :endpoints="endpoints"
+      :axios="api"
+      @pathchanged="pathChanged"
+    />
   </div>
 </template>