feat: virtualized tree move

Author: wangdan-fit2cloud

ui/src/components/folder-virtualized-tree/MoveToDialog.vue

@@ -6,12 +6,12 @@
     :close-on-click-modal="false"
     :close-on-press-escape="false"
     align-center
+    width="720"
   >
-    <folder-tree
-      ref="treeRef"
+    <FolderVirtualizedTree
       :source="source"
       :data="folderList"
-      :default-expanded-keys="[currentNodeKey]"
+      :currentNodeKey="currentNodeKey"
       :canOperation="false"
       class="move-to-dialog-tree"
       @handleNodeClick="folderClickHandle"
@@ -25,7 +25,7 @@
           type="primary"
           @click="submitHandle"
           :loading="loading"
-          :disabled="!selectForderId || selectForderId === folder?.currentFolder?.id"
+          :disabled="!selectForderId || (!isFolder && selectForderId === folder?.currentFolder?.id)"
         >
           {{ $t('common.confirm') }}
         </el-button>
@@ -53,7 +53,6 @@ const props = defineProps({
   },
 })
 
-const treeRef = ref()
 const loading = ref(false)
 const dialogVisible = ref(false)
 const folderList = ref<any[]>([])
@@ -68,7 +67,6 @@ watch(dialogVisible, (bool) => {
     selectForderId.value = ''
     folderList.value = []
     currentNodeKey.value = ''
-    treeRef.value?.clearCurrentKey()
   }
 })
 
@@ -95,6 +93,7 @@ function getFolder() {
 }
 
 function folderClickHandle(item: any) {
+  currentNodeKey.value = item.id
   selectForderId.value = item.id
 }
 
@@ -180,11 +179,9 @@ defineExpose({ open })
     padding: 0 !important;
     margin-bottom: 8px;
   }
-  :deep(.el-scrollbar) {
+  :deep(.maxkb-virtualized-tree) {
     border: 1px solid var(--el-border-color-light);
     border-radius: 6px;
-  }
-  :deep(.el-tree) {
     height: calc(100vh - 320px) !important;
   }
 }

ui/src/components/folder-virtualized-tree/VirtualizedTree.vue

@@ -10,8 +10,8 @@
     @after-drop="onAfterDrop"
     :rootDroppable="false"
     :statHandler="statHandler"
-    :disableDrag="draggable"
-    :disableDrop="draggable"
+    :disableDrag="!draggable"
+    :disableDrop="!draggable"
   >
     <template #default="{ node, stat }">
       <div

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

@@ -61,6 +61,7 @@
       @handleNodeClick="handleNodeClick"
       :current-node-key="currentNodeKey"
       :filter-node-method="filterNode"
+      :draggable="draggable"
     >
       <template #default="{ node, stat }">
         <div @mouseenter.stop="handleMouseEnter(node)" class="flex align-center custom-tree-node">
@@ -142,10 +143,14 @@
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { onBeforeRouteLeave } from 'vue-router'
 import VirtualizedTree from './VirtualizedTree.vue'
-import CreateFolderDialog from '@/components/folder-tree/CreateFolderDialog.vue'
+import CreateFolderDialog from '@/components/folder-virtualized-tree/CreateFolderDialog.vue'
 import ResourceAuthorizationDrawer from '@/components/resource-authorization-drawer/index.vue'
-import MoveToDialog from '@/components/folder-tree/MoveToDialog.vue'
-import { SORT_MENU_CONFIG, SORT_TYPES, type SortType } from '@/components/folder-tree/constant'
+import MoveToDialog from '@/components/folder-virtualized-tree/MoveToDialog.vue'
+import {
+  SORT_MENU_CONFIG,
+  SORT_TYPES,
+  type SortType,
+} from '@/components/folder-virtualized-tree/constant'
 import { t } from '@/locales'
 import { debounce } from 'lodash'
 import { i18n_name } from '@/utils/common'

ui/src/views/application/index.vue

@@ -400,9 +400,9 @@ import { onMounted, ref, reactive, computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import type { CheckboxValueType } from 'element-plus'
 import CreateApplicationDialog from '@/views/application/component/CreateApplicationDialog.vue'
-import CreateFolderDialog from '@/components/folder-tree/CreateFolderDialog.vue'
+import CreateFolderDialog from '@/components/folder-virtualized-tree/CreateFolderDialog.vue'
 import CopyApplicationDialog from '@/views/application/component/CopyApplicationDialog.vue'
-import MoveToDialog from '@/components/folder-tree/MoveToDialog.vue'
+import MoveToDialog from '@/components/folder-virtualized-tree/MoveToDialog.vue'
 import ResourceAuthorizationDrawer from '@/components/resource-authorization-drawer/index.vue'
 import ResourceTriggerDrawer from '@/views/trigger/ResourceTriggerDrawer.vue'
 import TemplateStoreDialog from '@/views/application/template-store/TemplateStoreDialog.vue'

ui/src/views/knowledge/component/KnowledgeListContainer.vue

@@ -441,8 +441,8 @@ import CreateWebKnowledgeDialog from '@/views/knowledge/create-component/CreateW
 import CreateLarkKnowledgeDialog from '@/views/knowledge/create-component/CreateLarkKnowledgeDialog.vue'
 import CreateWorkflowKnowledgeDialog from '@/views/knowledge/create-component/CreateWorkflowKnowledgeDialog.vue'
 import SyncWebDialog from '@/views/knowledge/component/SyncWebDialog.vue'
-import CreateFolderDialog from '@/components/folder-tree/CreateFolderDialog.vue'
-import MoveToDialog from '@/components/folder-tree/MoveToDialog.vue'
+import CreateFolderDialog from '@/components/folder-virtualized-tree/CreateFolderDialog.vue'
+import MoveToDialog from '@/components/folder-virtualized-tree/MoveToDialog.vue'
 import GenerateRelatedDialog from '@/components/generate-related-dialog/index.vue'
 import AuthorizedWorkspace from '@/views/system-shared/AuthorizedWorkspaceDialog.vue'
 import ResourceAuthorizationDrawer from '@/components/resource-authorization-drawer/index.vue'

ui/src/views/tool/component/ToolListContainer.vue

@@ -502,11 +502,11 @@ import ToolFormDrawer from '@/views/tool/ToolFormDrawer.vue'
 import McpToolFormDrawer from '@/views/tool/McpToolFormDrawer.vue'
 import SkillToolFormDrawer from '@/views/tool/SkillToolFormDrawer.vue'
 import DataSourceToolFormDrawer from '@/views/tool/DataSourceToolFormDrawer.vue'
-import CreateFolderDialog from '@/components/folder-tree/CreateFolderDialog.vue'
+import CreateFolderDialog from '@/components/folder-virtualized-tree/CreateFolderDialog.vue'
 import AuthorizedWorkspace from '@/views/system-shared/AuthorizedWorkspaceDialog.vue'
 import ToolStoreDialog from '@/views/tool/tool-store/ToolStoreDialog.vue'
 import AddInternalToolDialog from '@/views/tool/tool-store/AddInternalToolDialog.vue'
-import MoveToDialog from '@/components/folder-tree/MoveToDialog.vue'
+import MoveToDialog from '@/components/folder-virtualized-tree/MoveToDialog.vue'
 import ResourceAuthorizationDrawer from '@/components/resource-authorization-drawer/index.vue'
 import McpToolConfigDialog from '@/views/tool/component/McpToolConfigDialog.vue'
 import ResourceTriggerDrawer from '@/views/trigger/ResourceTriggerDrawer.vue'