diff --git a/src/frontend/devops-pipeline/src/components/ExecDetail/Artifactory.vue b/src/frontend/devops-pipeline/src/components/ExecDetail/Artifactory.vue
index 68a1846633d..0e64f515ce8 100644
--- a/src/frontend/devops-pipeline/src/components/ExecDetail/Artifactory.vue
+++ b/src/frontend/devops-pipeline/src/components/ExecDetail/Artifactory.vue
@@ -15,7 +15,11 @@
                 </template>
             </bk-table-column>
             <bk-table-column :label="$t('details.path')" prop="fullName" show-overflow-tooltip></bk-table-column>
-            <bk-table-column :label="$t('details.filesize')" width="150" prop="size" :formatter="sizeFormatter" show-overflow-tooltip></bk-table-column>
+            <bk-table-column :label="$t('details.filesize')" width="150" prop="size" show-overflow-tooltip>
+                <template slot-scope="props">
+                    {{ !props.row.folder ? sizeFormatter(props.row.size) : sizeFormatter(getFolderSize(props.row)) }}
+                </template>
+            </bk-table-column>
             <bk-table-column :label="$t('details.repoType')" width="150" prop="artifactoryType" :formatter="repoTypeFormatter" show-overflow-tooltip></bk-table-column>
             <bk-table-column :label="$t('operate')" width="150">
                 <template slot-scope="props">
@@ -91,7 +95,7 @@
                 ]).then(([res, permission]) => {
                     this.artifactories = res.records.map(item => ({
                         ...item,
-                        icon: extForFile(item.name)
+                        icon: item.folder ? 'folder' : extForFile(item.name)
                     })) || []
                     this.hasPermission = permission
                     if (this.artifactories.length <= 0) {
@@ -127,8 +131,21 @@
                 return typeMap[cellValue]
             },
 
-            sizeFormatter (row, column, cellValue, index) {
+            sizeFormatter (cellValue) {
                 return (cellValue >= 0 && convertFileSize(cellValue, 'B')) || ''
+            },
+
+            getFolderSize (payload) {
+                if (!payload.folder) return '0'
+                return this.getValuesByKey(payload.properties, 'size')
+            },
+
+            getValuesByKey (data, key) {
+                for (const item of data) {
+                    if (key.includes(item.key)) {
+                        return item.value
+                    }
+                }
             }
         }
     }
diff --git a/src/frontend/devops-pipeline/src/components/Outputs/index.vue b/src/frontend/devops-pipeline/src/components/Outputs/index.vue
index 9c19d8d681e..54648915b58 100644
--- a/src/frontend/devops-pipeline/src/components/Outputs/index.vue
+++ b/src/frontend/devops-pipeline/src/components/Outputs/index.vue
@@ -90,7 +90,7 @@
                                 v-if="activeOutputDetail.isApp"
                             />
 
-                            <ext-menu :data="activeOutputDetail" :config="artifactMoreActions"></ext-menu>
+                            <ext-menu v-if="!activeOutputDetail.folder" :data="activeOutputDetail" :config="artifactMoreActions"></ext-menu>
                         </p>
                     </div>
                     <div class="pipeline-exec-output-artifact">
@@ -260,6 +260,16 @@
                 ]
             },
             infoBlocks () {
+                if (this.activeOutputDetail.folder) {
+                    return [
+                        {
+                            key: 'baseInfo',
+                            title: this.$t('settings.baseInfo'),
+                            block: this.baseInfoRows,
+                            value: this.activeOutputDetail
+                        }
+                    ]
+                }
                 return [
                     {
                         key: 'baseInfo',
@@ -278,17 +288,25 @@
                         block: this.checkSumRows,
                         value: this.activeOutputDetail.checksums
                     }
-                    
                 ]
             },
             baseInfoRows () {
-                return [
-                    { key: 'name', name: this.$t('details.name') },
-                    { key: 'fullName', name: this.$t('details.filePath') },
-                    { key: 'size', name: this.$t('details.size') },
-                    { key: 'createdTime', name: this.$t('details.created') },
-                    { key: 'modifiedTime', name: this.$t('details.lastModified') }
-                ]
+                return this.activeOutputDetail.folder
+                    ? [
+                        { key: 'name', name: this.$t('details.directoryName') },
+                        { key: 'fullName', name: this.$t('details.directoryPath') },
+                        { key: 'size', name: this.$t('details.size') },
+                        { key: 'include', name: this.$t('details.include') },
+                        { key: 'createdTime', name: this.$t('details.created') },
+                        { key: 'modifiedTime', name: this.$t('details.lastModified') }
+                    ]
+                    : [
+                        { key: 'name', name: this.$t('details.name') },
+                        { key: 'fullName', name: this.$t('details.filePath') },
+                        { key: 'size', name: this.$t('details.size') },
+                        { key: 'createdTime', name: this.$t('details.created') },
+                        { key: 'modifiedTime', name: this.$t('details.lastModified') }
+                    ]
             },
             checkSumRows () {
                 return [
@@ -338,7 +356,7 @@
 
                     this.outputs = res.map((item) => {
                         const isReportOutput = item.artifactoryType === 'REPORT'
-                        const icon = isReportOutput ? 'order' : extForFile(item.name)
+                        const icon = isReportOutput ? 'order' : item.folder ? 'folder' : extForFile(item.name)
                         const id = isReportOutput ? item.createTime : item.fullPath
                         const type = this.isArtifact(item.artifactoryType) ? 'ARTIFACT' : ''
                         return {
@@ -393,10 +411,11 @@
                         ...output,
                         ...res,
                         artifactoryTypeTxt: repoTypeMap[output.artifactoryType] ?? '--',
-                        size: res.size > 0 ? convertFileSize(res.size, 'B') : '--',
+                        size: output.folder ? convertFileSize(this.getFolderSize(output), 'B') : res.size > 0 ? convertFileSize(res.size, 'B') : '--',
                         createdTime: convertTime(res.createdTime * 1000),
                         modifiedTime: convertTime(res.modifiedTime * 1000),
-                        icon: extForFile(res.name)
+                        icon: !output.folder ? extForFile(res.name) : 'folder',
+                        include: this.getInclude(output)
                     }
                     this.isLoading = false
                 } catch (err) {
@@ -410,6 +429,23 @@
                     ])
                 }
             },
+            getFolderSize (payload) {
+                if (!payload.folder) return '0'
+                return this.getValuesByKey(payload.properties, 'size')
+            },
+            getInclude (payload) {
+                if (!payload.folder) return '--'
+                const fileCount = this.getValuesByKey(payload.properties, 'fileCount')
+                const folderCount = this.getValuesByKey(payload.properties, 'folderCount')
+                return this.$t('details.fileAndFolder', [fileCount, folderCount])
+            },
+            getValuesByKey (data, key) {
+                for (const item of data) {
+                    if (key.includes(item.key)) {
+                        return item.value
+                    }
+                }
+            },
             setActiveOutput (output) {
                 this.activeOutput = output
                 switch (output.type) {
@@ -534,6 +570,7 @@
         }
         &.active,
         &:hover {
+            color: $iconPrimaryColor;
             background: #f5f7fa;
         }
       }
@@ -592,7 +629,7 @@
             color: #979ba5;
             text-align: right;
             @include ellipsis();
-            width: 100px;
+            width: 110px;
             flex-shrink: 0;
           }
           .pipeline-exec-output-block-row-value {
diff --git a/src/frontend/devops-pipeline/src/utils/util.js b/src/frontend/devops-pipeline/src/utils/util.js
index 24edc931db4..12576b7ce03 100755
--- a/src/frontend/devops-pipeline/src/utils/util.js
+++ b/src/frontend/devops-pipeline/src/utils/util.js
@@ -391,7 +391,7 @@ export function convertFileSize (size, unit) {
             return convertFileSize(calcSize, next)
         }
     } else {
-        return `${calcSize.toFixed(2)}${next || unit}`
+        return `${calcSize.toFixed(2)} ${next || unit}`
     }
 }
 
diff --git a/src/frontend/locale/pipeline/en-US.json b/src/frontend/locale/pipeline/en-US.json
index f54c56644b1..53cc6732b48 100644
--- a/src/frontend/locale/pipeline/en-US.json
+++ b/src/frontend/locale/pipeline/en-US.json
@@ -688,14 +688,18 @@
     "name": "Name",
     "filePath": "Path",
     "size": "Size",
-    "created": "Created",
-    "lastModified": "Last Modified",
+    "created": "Created at",
+    "lastModified": "Last Modified at",
     "pipelineErrorGuide": "Troubleshooting Guide",
     "pipelineErrorType": "Error Type",
     "pipelineErrorCode": "Error Code",
     "pipelineErrorPos": "Error Position",
     "pipelineErrorInfo": "Error Message",
-    "Errors": "Errors"
+    "Errors": "Errors",
+    "directoryName": "Folder Name",
+    "directoryPath": "Folder Path",
+    "include": "Include",
+    "fileAndFolder": "{0} files, {1} folders"
   },
   "editPage": {
     "invalidValue": "Plugin's Input {0} Invalid",
diff --git a/src/frontend/locale/pipeline/zh-CN.json b/src/frontend/locale/pipeline/zh-CN.json
index 5ef46943f8f..0e07aa26ed2 100644
--- a/src/frontend/locale/pipeline/zh-CN.json
+++ b/src/frontend/locale/pipeline/zh-CN.json
@@ -698,7 +698,11 @@
     "pipelineErrorCode": "错误码",
     "pipelineErrorPos": "错误位置",
     "pipelineErrorInfo": "错误信息",
-    "Errors": "Errors"
+    "Errors": "Errors",
+    "directoryName": "目录名称",
+    "directoryPath": "目录路径",
+    "include": "包含",
+    "fileAndFolder": "{0} 个文件，{1} 个目录"
   },
   "editPage": {
     "invalidValue": "插件表单参数{0}非法 ",