perf: Optimize file directory style

ui/src/components/folder-tree/index.vue

@@ -7,7 +7,7 @@
       clearable
       class="p-8"
     />
-    <div class="tree-height" :style="treeStyle">
+
     <div v-if="showShared && hasPermission(EditionConst.IS_EE, 'OR')" class="border-b mb-4">
       <div
         @click="handleSharedNodeClick"
@@ -25,6 +25,13 @@
 
     <el-scrollbar>
       <el-tree
+        class="overflow-inherit_node__children"
+        :class="
+          showShared && hasPermission(EditionConst.IS_EE, 'OR')
+            ? 'tree-height-shared'
+            : 'tree-height '
+        "
+        :style="treeStyle"
         ref="treeRef"
         :data="data"
         :props="defaultProps"
@@ -33,7 +40,6 @@
         :default-expanded-keys="[currentNodeKey]"
         :current-node-key="currentNodeKey"
         highlight-current
-          class="overflow-inherit_node__children"
         draggable
         :allow-drop="allowDrop"
         :allow-drag="allowDrag"
@@ -90,7 +96,10 @@
                       @click.stop="openAuthorization(data)"
                       v-if="permissionPrecise.folderAuth(data.id)"
                     >
-                        <AppIcon iconName="app-resource-authorization" class="color-secondary"></AppIcon>
+                      <AppIcon
+                        iconName="app-resource-authorization"
+                        class="color-secondary"
+                      ></AppIcon>
                       {{ $t('views.system.resourceAuthorization.title') }}
                     </el-dropdown-item>
                     <el-dropdown-item
@@ -110,13 +119,9 @@
         </template>
       </el-tree>
     </el-scrollbar>
-    </div>
+
     <CreateFolderDialog ref="CreateFolderDialogRef" @refresh="refreshFolder" :title="title" />
-    <MoveToDialog
+    <MoveToDialog ref="MoveToDialogRef" :source="props.source" @refresh="emit('refreshTree')" />
-      ref="MoveToDialogRef"
-      :source="props.source"
-      @refresh="emit('refreshTree')"
-    />
     <ResourceAuthorizationDrawer
       :type="props.source"
       :is-folder="true"
@@ -202,7 +207,7 @@ const MoreFilledPermission = (node: any, data: any) => {
 }
 
 const MoveToDialogRef = ref()
-function openMoveToDialog(data:any) {
+function openMoveToDialog(data: any) {
   const obj = {
     id: data.id,
     folder_type: props.source,
@@ -234,9 +239,10 @@ const handleDrop = (draggingNode: any, dropNode: any, dropType: string, ev: Drag
   }
   const obj = {
     ...dragData,
-    parent_id: newParentId
+    parent_id: newParentId,
   }
-  folderApi.putFolder(dragData.id, props.source, obj, loading)
+  folderApi
+    .putFolder(dragData.id, props.source, obj, loading)
     .then(() => {
       MsgSuccess(t('common.saveSuccess'))
       emit('refreshTree')
@@ -253,7 +259,7 @@ onBeforeRouteLeave((to, from) => {
 onMounted(() => {
   bus.on('select_node', (id: string) => {
     treeRef.value?.setCurrentKey(id)
-      hoverNodeId.value=id
+    hoverNodeId.value = id
   })
 })
 interface Tree {
@@ -385,12 +391,15 @@ onUnmounted(() => {
       }
     }
   }
+  .tree-height-shared {
+    padding-top: 4px;
+    height: calc(100vh - 220px);
+  }
   .tree-height {
     padding-top: 4px;
-    height: calc(100vh - 210px);
+    height: calc(100vh - 180px);
   }
-}
+  :deep(.el-tree) {
-:deep(.el-tree) {
     .el-tree-node.is-dragging {
       opacity: 0.5;
     }
@@ -403,9 +412,10 @@ onUnmounted(() => {
       position: relative;
     }
   }
-:deep(.overflow-inherit_node__children) {
+  :deep(.overflow-inherit_node__children) {
     .el-tree-node__children {
       overflow: inherit !important;
     }
+  }
 }
 </style>

ui/src/views/application-workflow/component/DropdownMenu.vue

@@ -1,5 +1,9 @@
 <template>
-  <div v-show="show" class="workflow-dropdown-menu border border-r-6 white-bg" :style="{ width: activeName === 'base' ? '400px':'640px' }">
+  <div
+    v-show="show"
+    class="workflow-dropdown-menu border border-r-6 white-bg"
+    :style="{ width: activeName === 'base' ? '400px' : '640px' }"
+  >
     <el-tabs v-model="activeName" class="workflow-dropdown-tabs" @tab-change="handleClick">
       <div
         v-show="activeName === 'base'"
@@ -80,6 +84,7 @@
                 :shareTitle="$t('views.shared.shared_tool')"
                 :showShared="permissionPrecise['is_share']()"
                 :canOperation="false"
+                :treeStyle="{ height: '400px' }"
               />
             </div>
           </template>
@@ -103,6 +108,7 @@
                 :currentNodeKey="folder.currentFolder?.id"
                 @handleNodeClick="folderClickHandle"
                 :canOperation="false"
+                :treeStyle="{ height: '400px' }"
               />
             </div>
           </template>
@@ -342,9 +348,5 @@ onMounted(() => {})
   :deep(.el-tabs__header) {
     margin-bottom: 0;
   }
-
-  :deep(.tree-height) {
-    height: 400px;
-  }
 }
 </style>

ui/src/views/system/resource-authorization/component/PermissionTable.vue

@@ -60,7 +60,7 @@
         :maxTableHeight="260"
         :row-key="(row: any) => row.id"
         style="min-width: 600px"
-        :expand-row-keys="defaultExpandKeys"
+
         show-overflow-tooltip
       >
         <el-table-column type="selection" width="55" :reserve-selection="true"> </el-table-column>