diff --git a/backend/utils/files/fileinfo.go b/backend/utils/files/fileinfo.go
index 224e95296..102450d3f 100644
--- a/backend/utils/files/fileinfo.go
+++ b/backend/utils/files/fileinfo.go
@@ -64,6 +64,20 @@ type FileSearchInfo struct {
 	fs.FileInfo
 }
 
+func getDirSize(fs afero.Fs, path string) (int64, error) {
+	var size int64
+	err := afero.Walk(fs, path, func(p string, info os.FileInfo, err error) error {
+		if err != nil {
+			return err
+		}
+		if !info.IsDir() {
+			size += info.Size()
+		}
+		return nil
+	})
+	return size, err
+}
+
 func NewFileInfo(op FileOption) (*FileInfo, error) {
 	var appFs = afero.NewOsFs()
 
@@ -101,6 +115,11 @@ func NewFileInfo(op FileOption) (*FileInfo, error) {
 	}
 	if op.Expand {
 		if file.IsDir {
+			size, err := getDirSize(appFs, op.Path)
+			if err != nil {
+				return nil, err
+			}
+			file.Size = size
 			if err := file.listChildren(op); err != nil {
 				return nil, err
 			}
diff --git a/frontend/src/views/host/file-management/detail/index.vue b/frontend/src/views/host/file-management/detail/index.vue
index 9a61fbf8a..1d397842d 100644
--- a/frontend/src/views/host/file-management/detail/index.vue
+++ b/frontend/src/views/host/file-management/detail/index.vue
@@ -10,7 +10,15 @@
                     <el-descriptions-item :label="$t('commons.table.type')">{{ data.type }}</el-descriptions-item>
                     <el-descriptions-item :label="$t('file.path')">{{ data.path }}</el-descriptions-item>
                     <el-descriptions-item :label="$t('file.size')">
-                        {{ computeSize(data.size) }}
+                        <span v-if="data.isDir">
+                            <el-button type="primary" link small @click="getDirSize(data)">
+                                <span v-if="data.dirSize == undefined">
+                                    {{ $t('file.calculate') }}
+                                </span>
+                                <span v-else>{{ computeSize(data.dirSize) }}</span>
+                            </el-button>
+                        </span>
+                        <span v-else>{{ computeSize(data.size) }}</span>
                     </el-descriptions-item>
                     <el-descriptions-item :label="$t('file.role')">{{ data.mode }}</el-descriptions-item>
                     <el-descriptions-item :label="$t('commons.table.user')">{{ data.user }}</el-descriptions-item>
@@ -25,7 +33,7 @@
 </template>
 
 <script lang="ts" setup>
-import { GetFileContent } from '@/api/modules/files';
+import { ComputeDirSize, GetFileContent } from '@/api/modules/files';
 import { computeSize } from '@/utils/util';
 import { ref } from 'vue';
 import { dateFormatSimple } from '@/utils/util';
@@ -40,6 +48,7 @@ const props = ref<InfoProps>({
 
 let open = ref(false);
 let data = ref();
+let loading = ref(false);
 
 const handleClose = () => {
     open.value = false;
@@ -53,6 +62,20 @@ const acceptParams = async (params: InfoProps): Promise<void> => {
     });
 };
 
+const getDirSize = async (row: any) => {
+    const req = {
+        path: row.path,
+    };
+    loading.value = true;
+    await ComputeDirSize(req)
+        .then(async (res) => {
+            data.value.dirSize = res.data.size;
+        })
+        .finally(() => {
+            loading.value = false;
+        });
+};
+
 defineExpose({
     acceptParams,
 });