From 53d431d849eb3547eb8055c20d086f934f016037 Mon Sep 17 00:00:00 2001 From: wangdan-fit2cloud Date: Tue, 21 Apr 2026 19:14:34 +0800 Subject: [PATCH 01/56] feat: Virtualized tree --- ui/package.json | 1 + ui/src/components/folder-tree/index.vue | 2 +- .../CreateFolderDialog.vue | 154 +++++ .../folder-virtualized-tree/HeTree.vue | 97 +++ .../folder-virtualized-tree/MoveToDialog.vue | 191 ++++++ .../folder-virtualized-tree/constant.ts | 31 + .../folder-virtualized-tree/index.vue | 568 ++++++++++++++++++ ui/src/components/index.ts | 2 + ui/src/styles/app.scss | 6 +- ui/src/styles/index.scss | 1 - ui/src/views/application/index.vue | 2 +- 11 files changed, 1049 insertions(+), 6 deletions(-) create mode 100644 ui/src/components/folder-virtualized-tree/CreateFolderDialog.vue create mode 100644 ui/src/components/folder-virtualized-tree/HeTree.vue create mode 100644 ui/src/components/folder-virtualized-tree/MoveToDialog.vue create mode 100644 ui/src/components/folder-virtualized-tree/constant.ts create mode 100644 ui/src/components/folder-virtualized-tree/index.vue diff --git a/ui/package.json b/ui/package.json index cb468636f27..332161abc75 100644 --- a/ui/package.json +++ b/ui/package.json @@ -20,6 +20,7 @@ "@codemirror/lang-json": "^6.0.1", "@codemirror/lang-python": "^6.2.1", "@codemirror/theme-one-dark": "^6.1.2", + "@he-tree/vue": "^2.10.5", "@logicflow/core": "^1.2.27", "@logicflow/extension": "^1.2.27", "@vavt/cm-extension": "^1.9.1", diff --git a/ui/src/components/folder-tree/index.vue b/ui/src/components/folder-tree/index.vue index dac762224dd..bdadbe3fbb9 100644 --- a/ui/src/components/folder-tree/index.vue +++ b/ui/src/components/folder-tree/index.vue @@ -57,7 +57,7 @@ :class=" showShared && hasPermission(EditionConst.IS_EE, 'OR') ? 'tree-height-shared' - : 'tree-height ' + : 'tree-height' " :style="treeStyle" ref="treeRef" diff --git a/ui/src/components/folder-virtualized-tree/CreateFolderDialog.vue b/ui/src/components/folder-virtualized-tree/CreateFolderDialog.vue new file mode 100644 index 00000000000..771fb129f46 --- /dev/null +++ b/ui/src/components/folder-virtualized-tree/CreateFolderDialog.vue @@ -0,0 +1,154 @@ + + + diff --git a/ui/src/components/folder-virtualized-tree/HeTree.vue b/ui/src/components/folder-virtualized-tree/HeTree.vue new file mode 100644 index 00000000000..1ad7e3d2592 --- /dev/null +++ b/ui/src/components/folder-virtualized-tree/HeTree.vue @@ -0,0 +1,97 @@ + + + + + diff --git a/ui/src/components/folder-virtualized-tree/MoveToDialog.vue b/ui/src/components/folder-virtualized-tree/MoveToDialog.vue new file mode 100644 index 00000000000..2be96edf37d --- /dev/null +++ b/ui/src/components/folder-virtualized-tree/MoveToDialog.vue @@ -0,0 +1,191 @@ + + + diff --git a/ui/src/components/folder-virtualized-tree/constant.ts b/ui/src/components/folder-virtualized-tree/constant.ts new file mode 100644 index 00000000000..fbd25a10f28 --- /dev/null +++ b/ui/src/components/folder-virtualized-tree/constant.ts @@ -0,0 +1,31 @@ +import { t } from '@/locales' + +export const SORT_TYPES = { + CREATE_TIME_ASC: 'createTime-asc', + CREATE_TIME_DESC: 'createTime-desc', + NAME_ASC: 'name-asc', + NAME_DESC: 'name-desc', + CUSTOM: 'custom', +} as const + +export type SortType = (typeof SORT_TYPES)[keyof typeof SORT_TYPES] + +export const SORT_MENU_CONFIG = [ + { + title: 'time', + items: [ + { label: t('components.folder.ascTime'), value: SORT_TYPES.CREATE_TIME_ASC }, + { label: t('components.folder.descTime'), value: SORT_TYPES.CREATE_TIME_DESC }, + ], + }, + { + title: 'name', + items: [ + { label: t('components.folder.ascName'), value: SORT_TYPES.NAME_ASC }, + { label: t('components.folder.descName'), value: SORT_TYPES.NAME_DESC }, + ], + }, + { + items: [{ label: t('components.folder.custom'), value: SORT_TYPES.CUSTOM }], + }, +] diff --git a/ui/src/components/folder-virtualized-tree/index.vue b/ui/src/components/folder-virtualized-tree/index.vue new file mode 100644 index 00000000000..1e961aba5f1 --- /dev/null +++ b/ui/src/components/folder-virtualized-tree/index.vue @@ -0,0 +1,568 @@ + + + + diff --git a/ui/src/components/index.ts b/ui/src/components/index.ts index 302371d1fb5..6ef00f9db5e 100644 --- a/ui/src/components/index.ts +++ b/ui/src/components/index.ts @@ -7,6 +7,7 @@ import AppIcon from './app-icon/AppIcon.vue' import LayoutContainer from './layout-container/index.vue' import ContentContainer from './layout-container/ContentContainer.vue' import CardBox from './card-box/index.vue' +import FolderVirtualizedTree from './folder-virtualized-tree/index.vue' import FolderTree from './folder-tree/index.vue' import CommonList from './common-list/index.vue' import BackButton from './back-button/index.vue' @@ -59,5 +60,6 @@ export default { app.component('TagGroup', TagGroup) app.component('WorkspaceDropdown', WorkspaceDropdown) app.component('FolderBreadcrumb', FolderBreadcrumb) + app.component('FolderVirtualizedTree', FolderVirtualizedTree) }, } diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss index f203477fef0..4164fc5ad85 100644 --- a/ui/src/styles/app.scss +++ b/ui/src/styles/app.scss @@ -540,6 +540,9 @@ h5 { /* 图标旋转90度 */ +.arrow-icon { + transition: transform 0.2s ease-in-out; +} .rotate-90 { transform: rotateZ(90deg); } @@ -566,9 +569,6 @@ h5 { background-size: cover; } -.arrow-icon { - transition: 0.2s; -} .sup-popover { display: none; position: absolute; diff --git a/ui/src/styles/index.scss b/ui/src/styles/index.scss index e1476a3e7c3..c1fea2e4044 100644 --- a/ui/src/styles/index.scss +++ b/ui/src/styles/index.scss @@ -6,4 +6,3 @@ @use './md-editor.scss'; @import 'nprogress/nprogress.css'; @import 'md-editor-v3/lib/style.css'; - diff --git a/ui/src/views/application/index.vue b/ui/src/views/application/index.vue index 9f14cf52086..2efd0fd0c89 100644 --- a/ui/src/views/application/index.vue +++ b/ui/src/views/application/index.vue @@ -3,7 +3,7 @@