diff --git a/apps/vue/src/views/account/center/Cloud.vue b/apps/vue/src/views/account/center/Cloud.vue
index 0e0f4b73e..f860130dc 100644
--- a/apps/vue/src/views/account/center/Cloud.vue
+++ b/apps/vue/src/views/account/center/Cloud.vue
@@ -6,6 +6,7 @@
           <template #description>
             <DirectoryTree
               :tree-data="folderTree"
+              :loadedKeys="loadedKeys"
               :expandedKeys="expandedKeys"
               @expand="fetchFolders"
               @select="handleSelectFolder"
@@ -29,7 +30,7 @@
 <script lang="ts" setup>
   import { computed, ref, shallowRef } from 'vue';
   import { Card, Tree } from 'ant-design-vue';
-  import { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
+  import { AntTreeNodeBaseEvent, TreeDataItem } from 'ant-design-vue/es/tree/Tree';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { OssObject } from '/@/api/oss-management/objects/model';
@@ -52,6 +53,12 @@
     dataRef: any;
   }
 
+  interface NodeInfo {
+    path?: string;
+    node: NodeInfo;
+    parent?: NodeInfo;
+  }
+
   const { hasPermission } = usePermission();
   const { L } = useLocalization(['AbpOssManagement', 'AbpUi']);
   const folderTreeRef = ref<{ [key: string]: TreeDataItem }>({
@@ -97,28 +104,36 @@
         return false;
     }
   });
+  const loadedKeys = ref<string[]>([]);
   const expandedKeys = ref<string[]>([]);
 
-  function fetchFolders(keys) {
+  function fetchFolders(keys, e) {
     expandedKeys.value = keys;
+    if (!e.expanded) {
+      const keys = loadedKeys.value;
+      const findIndex = keys.findLastIndex((key) => key === e.node.key);
+      findIndex >= 0 && keys.splice(findIndex);
+      loadedKeys.value = keys;
+    }
   }
 
-  function handleSelectFolder(_, e) {
-    switch (e.node.dataRef.group) {
+  function handleSelectFolder(_, e: AntTreeNodeBaseEvent) {
+    const path = calculateFilePath(e.node as any);
+    switch (e.node.group) {
       case 'private':
       case 'public':
         switchComponent.value = {
           name: 'FileList',
-          group: e.node.dataRef.group,
-          path: e.node.dataRef.path,
+          group: e.node.group,
+          path: path,
           dataRef: e.node.dataRef,
         };
         break;
       case 'share':
         switchComponent.value = {
           name: 'ShareList',
-          group: e.node.dataRef.group,
-          path: e.node.dataRef.path,
+          group: e.node.group,
+          path: path,
           dataRef: e.node.dataRef,
         };
         break;
@@ -128,7 +143,7 @@
   function handleAppendFolder(folders: OssObject[]) {
     switchComponent.value.dataRef.children = folders.map((obj) => {
       return {
-        key: obj.name,
+        key: switchComponent.value.path + obj.name,
         group: switchComponent.value.group,
         title: obj.name,
         path: obj.name,
@@ -136,4 +151,13 @@
       };
     });
   }
+
+  function calculateFilePath(e: NodeInfo) {
+    let path = e.path ?? '';
+    if (e.parent?.node?.path) {
+      path = e.parent.node.path + path;
+      path = calculateFilePath(e.parent) + path;
+    }
+    return path;
+  }
 </script>