perf: Optimize file directory style

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

@@ -7,116 +7,121 @@
       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"
-          class="shared-button flex cursor"
-          :class="currentNodeKey === 'share' && 'active'"
-        >
-          <AppIcon
-            iconName="app-shared-active"
-            style="font-size: 18px"
-            class="color-primary"
-          ></AppIcon>
-          <span class="ml-8">{{ shareTitle }}</span>
-        </div>
+
+    <div v-if="showShared && hasPermission(EditionConst.IS_EE, 'OR')" class="border-b mb-4">
+      <div
+        @click="handleSharedNodeClick"
+        class="shared-button flex cursor"
+        :class="currentNodeKey === 'share' && 'active'"
+      >
+        <AppIcon
+          iconName="app-shared-active"
+          style="font-size: 18px"
+          class="color-primary"
+        ></AppIcon>
+        <span class="ml-8">{{ shareTitle }}</span>
       </div>
-
-      <el-scrollbar>
-        <el-tree
-          ref="treeRef"
-          :data="data"
-          :props="defaultProps"
-          @node-click="handleNodeClick"
-          :filter-node-method="filterNode"
-          :default-expanded-keys="[currentNodeKey]"
-          :current-node-key="currentNodeKey"
-          highlight-current
-          class="overflow-inherit_node__children"
-          draggable
-          :allow-drop="allowDrop"
-          :allow-drag="allowDrag"
-          @node-drop="handleDrop"
-          node-key="id"
-          v-loading="loading"
-          v-bind="$attrs"
-        >
-          <template #default="{ node, data }">
-            <div class="flex-between w-full" @mouseenter.stop="handleMouseEnter(data)">
-              <div class="flex align-center">
-                <AppIcon iconName="app-folder" style="font-size: 20px"></AppIcon>
-                <span class="ml-8 ellipsis tree-label" style="max-width: 110px" :title="node.label">{{
-                  i18n_name(node.label)
-                }}</span>
-              </div>
-
-              <div
-                v-if="canOperation && MoreFilledPermission(node, data)"
-                @click.stop
-                v-show="hoverNodeId === data.id"
-                @mouseenter.stop="handleMouseEnter(data)"
-                @mouseleave.stop="handleMouseleave"
-                class="mr-16"
-              >
-                <el-dropdown trigger="click" :teleported="false">
-                  <el-button text class="w-full" v-if="MoreFilledPermission(node, data)">
-                    <AppIcon iconName="app-more"></AppIcon>
-                  </el-button>
-                  <template #dropdown>
-                    <el-dropdown-menu>
-                      <el-dropdown-item
-                        @click.stop="openCreateFolder(data)"
-                        v-if="permissionPrecise.folderCreate(data.id)"
-                      >
-                        <AppIcon iconName="app-add-folder" class="color-secondary"></AppIcon>
-                        {{ $t('components.folder.addChildFolder') }}
-                      </el-dropdown-item>
-                      <el-dropdown-item
-                        @click.stop="openEditFolder(data)"
-                        v-if="permissionPrecise.folderEdit(data.id)"
-                      >
-                        <AppIcon iconName="app-edit" class="color-secondary"></AppIcon>
-                        {{ $t('common.edit') }}
-                      </el-dropdown-item>
-                      <el-dropdown-item
-                        @click.stop="openMoveToDialog(data)"
-                        v-if="node.level !== 1 && permissionPrecise.folderEdit(data.id)"
-                      > 
-                        <AppIcon iconName="app-migrate" class="color-secondary"></AppIcon>
-                              {{ $t('common.moveTo') }}
-                      </el-dropdown-item>
-                      <el-dropdown-item
-                        @click.stop="openAuthorization(data)"
-                        v-if="permissionPrecise.folderAuth(data.id)"
-                      > 
-                        <AppIcon iconName="app-resource-authorization" class="color-secondary"></AppIcon>
-                        {{ $t('views.system.resourceAuthorization.title') }}
-                      </el-dropdown-item>
-                      <el-dropdown-item
-                        divided
-                        @click.stop="deleteFolder(data)"
-                        :disabled="!data.parent_id"
-                        v-if="permissionPrecise.folderDelete(data.id)"
-                      >
-                        <AppIcon iconName="app-delete" class="color-secondary"></AppIcon>
-                        {{ $t('common.delete') }}
-                      </el-dropdown-item>
-                    </el-dropdown-menu>
-                  </template>
-                </el-dropdown>
-              </div>
-            </div>
-          </template>
-        </el-tree>
-      </el-scrollbar>
     </div>
+
+    <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"
+        @node-click="handleNodeClick"
+        :filter-node-method="filterNode"
+        :default-expanded-keys="[currentNodeKey]"
+        :current-node-key="currentNodeKey"
+        highlight-current
+        draggable
+        :allow-drop="allowDrop"
+        :allow-drag="allowDrag"
+        @node-drop="handleDrop"
+        node-key="id"
+        v-loading="loading"
+        v-bind="$attrs"
+      >
+        <template #default="{ node, data }">
+          <div class="flex-between w-full" @mouseenter.stop="handleMouseEnter(data)">
+            <div class="flex align-center">
+              <AppIcon iconName="app-folder" style="font-size: 20px"></AppIcon>
+              <span class="ml-8 ellipsis tree-label" style="max-width: 110px" :title="node.label">{{
+                i18n_name(node.label)
+              }}</span>
+            </div>
+
+            <div
+              v-if="canOperation && MoreFilledPermission(node, data)"
+              @click.stop
+              v-show="hoverNodeId === data.id"
+              @mouseenter.stop="handleMouseEnter(data)"
+              @mouseleave.stop="handleMouseleave"
+              class="mr-16"
+            >
+              <el-dropdown trigger="click" :teleported="false">
+                <el-button text class="w-full" v-if="MoreFilledPermission(node, data)">
+                  <AppIcon iconName="app-more"></AppIcon>
+                </el-button>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item
+                      @click.stop="openCreateFolder(data)"
+                      v-if="permissionPrecise.folderCreate(data.id)"
+                    >
+                      <AppIcon iconName="app-add-folder" class="color-secondary"></AppIcon>
+                      {{ $t('components.folder.addChildFolder') }}
+                    </el-dropdown-item>
+                    <el-dropdown-item
+                      @click.stop="openEditFolder(data)"
+                      v-if="permissionPrecise.folderEdit(data.id)"
+                    >
+                      <AppIcon iconName="app-edit" class="color-secondary"></AppIcon>
+                      {{ $t('common.edit') }}
+                    </el-dropdown-item>
+                    <el-dropdown-item
+                      @click.stop="openMoveToDialog(data)"
+                      v-if="node.level !== 1 && permissionPrecise.folderEdit(data.id)"
+                    >
+                      <AppIcon iconName="app-migrate" class="color-secondary"></AppIcon>
+                      {{ $t('common.moveTo') }}
+                    </el-dropdown-item>
+                    <el-dropdown-item
+                      @click.stop="openAuthorization(data)"
+                      v-if="permissionPrecise.folderAuth(data.id)"
+                    >
+                      <AppIcon
+                        iconName="app-resource-authorization"
+                        class="color-secondary"
+                      ></AppIcon>
+                      {{ $t('views.system.resourceAuthorization.title') }}
+                    </el-dropdown-item>
+                    <el-dropdown-item
+                      divided
+                      @click.stop="deleteFolder(data)"
+                      :disabled="!data.parent_id"
+                      v-if="permissionPrecise.folderDelete(data.id)"
+                    >
+                      <AppIcon iconName="app-delete" class="color-secondary"></AppIcon>
+                      {{ $t('common.delete') }}
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </div>
+          </div>
+        </template>
+      </el-tree>
+    </el-scrollbar>
+
     <CreateFolderDialog ref="CreateFolderDialogRef" @refresh="refreshFolder" :title="title" />
-    <MoveToDialog
-      ref="MoveToDialogRef"
-      :source="props.source"
-      @refresh="emit('refreshTree')"
-    />
+    <MoveToDialog 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,
@@ -211,14 +216,14 @@ function openMoveToDialog(data:any) {
 }
 
 const allowDrag = (node: any) => {
-  return permissionPrecise.value.folderEdit(node.data.id)   
+  return permissionPrecise.value.folderEdit(node.data.id)
 }
 
 const allowDrop = (draggingNode: any, dropNode: any, type: string) => {
   const dropData = dropNode.data
   if (type === 'inner') {
     return permissionPrecise.value.folderEdit(dropData.id)
-  } 
+  }
   return false
 }
 
@@ -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,8 +259,8 @@ onBeforeRouteLeave((to, from) => {
 onMounted(() => {
   bus.on('select_node', (id: string) => {
     treeRef.value?.setCurrentKey(id)
-      hoverNodeId.value=id
-   })
+    hoverNodeId.value = id
+  })
 })
 interface Tree {
   name: string
@@ -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) {
-  .el-tree-node__children {
-    overflow: inherit !important;
+  :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>