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,11 +70,13 @@ 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) {
   activeStorage.value = storage
@@ -92,19 +94,20 @@ 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">
+  <VCard class="mx-auto" :loading="loading > 0 || !path">
+    <div v-if="path">
       <Toolbar
-      :path="props.path"
+        :path="path"
         :storages="storagesArray"
         :storage="activeStorage"
-      :endpoints="props.endpoints"
+        :endpoints="endpoints"
         :axios="axiosInstance"
         @storagechanged="storageChanged"
         @pathchanged="pathChanged"
@@ -114,7 +117,7 @@ onBeforeMount(() => {
       <VRow no-gutters>
         <VCol v-if="tree" sm="auto" class="d-none d-md-block">
           <Tree
-          :path="props.path"
+            :path="path"
             :storage="activeStorage"
             :icons="fileIcons"
             :endpoints="endpoints"
@@ -128,7 +131,7 @@ onBeforeMount(() => {
         <VDivider v-if="tree" vertical />
         <VCol>
           <List
-          :path="props.path"
+            :path="path"
             :storage="activeStorage"
             :icons="fileIcons"
             :endpoints="endpoints"
@@ -143,5 +146,6 @@ onBeforeMount(() => {
           />
         </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' },
+  list: {
-  mkdir: { url: '/filebrowser/mkdir?path={path}', method: 'get' },
+    url: '/filebrowser/list?path={path}&sort={sort}',
-  delete: { url: '/filebrowser/delete?path={path}', method: 'get' },
+    method: 'get',
-  download: { url: '/filebrowser/download?path={path}', method: 'get' },
+  },
-  image: { url: '/filebrowser/image?path={path}', method: 'get' },
+  mkdir: {
-  rename: { url: '/filebrowser/rename?path={path}&new_name={newname}', method: 'get' },
+    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() {
+function loadSystemSettings(): Promise<string> {
-  try {
+  return new Promise((resolve, reject) => {
-    const result: { [key: string]: any } = await api.get('system/env')
+    api
+      .get('system/env')
+      .then((result: any) => {
+        let path = '/'
         if (result.success)
-      path.value = result.data?.DOWNLOAD_PATH || '/'
+          path = result.data?.DOWNLOAD_PATH || '/'
-    if (path.value && !path.value.endsWith('/'))
+
-      path.value += '/'
+        if (!path.endsWith('/'))
-  }
+          path += '/'
-  catch (error) {
+
-    console.log(error)
+        resolve(path)
-  }
+      })
+      .catch(error => reject(error))
+  })
 }
 
 function pathChanged(_path: string) {
   path.value = _path
 }
 
-onBeforeMount(async () => {
+onMounted(() => {
-  await loadSystemSettings()
+  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>