From 53b2d317989daddbe30a936df0974f76aee87361 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Sat, 22 Aug 2026 21:32:16 +0800
Subject: [PATCH] feat: folder

---
 ui/src/api/admin/workspace/folder.ts          |  12 +-
 ui/src/api/types/folder.ts                    |   2 +-
 .../business/folder-tree/FolderFormDialog.vue | 104 +++++----
 ...{MoveFolderDialog.vue => MoveToDialog.vue} |  39 ++--
 .../business/folder-tree/VirtualizedTree.vue  |   5 +-
 .../components/business/folder-tree/index.vue | 205 ++++++++++--------
 ui/src/components/global/mk-icon/ToolIcon.vue |  10 +-
 .../global/mk-infinite-scroll/index.vue       |   5 +-
 ui/src/layout/avatar-dropdown/index.vue       |   4 +-
 ui/src/styles/STYLE_README.md                 |   1 +
 ui/src/views/application/ApplicationView.vue  |  14 +-
 ui/src/views/tool/ToolView.vue                |   5 +-
 12 files changed, 230 insertions(+), 176 deletions(-)
 rename ui/src/components/business/folder-tree/{MoveFolderDialog.vue => MoveToDialog.vue} (73%)

diff --git a/ui/src/api/admin/workspace/folder.ts b/ui/src/api/admin/workspace/folder.ts
index c8c9cad1cb7..36d4f6cc9c1 100644
--- a/ui/src/api/admin/workspace/folder.ts
+++ b/ui/src/api/admin/workspace/folder.ts
@@ -1,5 +1,5 @@
 import { del, get, post, put } from '../core/request'
-import type { FolderSource, FolderItem, RequestParams, FolderRequest } from '@/api/types'
+import type { FolderSource, FolderItem, RequestParams, FolderPayload } from '@/api/types'
 import { getWorkspaceId } from '@/utils/workspace-context'
 
 const getPrefix = (source: FolderSource) => {
@@ -13,17 +13,17 @@ const getFolderTree = (source: FolderSource, query?: RequestParams) => {
 }
 
 /** 更新 Workspace 的文件夹。 */
-const putFolder = (folderId: string, source: FolderSource, payload?: FolderRequest) => {
-  return put<FolderRequest, FolderItem>(`${getPrefix(source)}/${folderId}`, payload)
+const putFolder = (folderId: string, source: FolderSource, payload?: FolderPayload) => {
+  return put<FolderPayload, FolderItem>(`${getPrefix(source)}/${folderId}`, payload)
 }
 
 /** 在指定资源模块中创建 Workspace 文件夹。 */
-const postFolder = (source: FolderSource, payload: FolderRequest) => {
-  return post<FolderRequest, FolderItem>(getPrefix(source), payload)
+const postFolder = (source: FolderSource, payload: FolderPayload) => {
+  return post<FolderPayload, FolderItem>(getPrefix(source), payload)
 }
 
 /** 删除指定 Workspace 文件夹及其中的资源。 */
-const deleteFolder = (source: FolderSource, folderId: string) => {
+const deleteFolder = (folderId: string, source: FolderSource) => {
   return del<boolean>(`${getPrefix(source)}/${folderId}`)
 }
 
diff --git a/ui/src/api/types/folder.ts b/ui/src/api/types/folder.ts
index 4978b6a17a6..f390593839f 100644
--- a/ui/src/api/types/folder.ts
+++ b/ui/src/api/types/folder.ts
@@ -16,7 +16,7 @@ export interface FolderItem {
   workspace_id?: string
 }
 
-export interface FolderRequest {
+export interface FolderPayload {
   desc?: string | null
   name?: string
   parent_id?: string | null
diff --git a/ui/src/components/business/folder-tree/FolderFormDialog.vue b/ui/src/components/business/folder-tree/FolderFormDialog.vue
index f60e5fa9611..094af40f13f 100644
--- a/ui/src/components/business/folder-tree/FolderFormDialog.vue
+++ b/ui/src/components/business/folder-tree/FolderFormDialog.vue
@@ -1,93 +1,101 @@
 <script setup lang="ts">
-import { computed, nextTick, reactive, ref, useTemplateRef } from 'vue'
+import { reactive, ref, useTemplateRef } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
-import type { WorkspaceFolder } from '@/api/types'
-import type { FolderFormSubmit } from './types'
+import FolderApi from '@/api/admin/workspace/folder'
+import type { FolderItem, FolderSource } from '@/api/types'
+import { MsgSuccess } from '@/utils/message'
 
 defineOptions({ name: 'FolderFormDialog' })
 
-defineProps<{
-  loading: boolean
+const props = defineProps<{
+  title: string
+  source: FolderSource
 }>()
 
 const emit = defineEmits<{
-  submit: [form: FolderFormSubmit]
+  refresh: [folder: FolderItem, isEdit: boolean]
 }>()
 
-interface FolderForm {
-  desc: string
-  name: string
-  parent_id: string
-}
-
 const folderFormRef = useTemplateRef<FormInstance>('folderFormRef')
 const visible = ref(false)
-const editingFolderId = ref('')
-const folderForm = reactive<FolderForm>({
+const editId = ref('')
+const folderForm = reactive({
   desc: '',
   name: '',
   parent_id: '',
 })
 
-const dialogTitle = computed(() => (editingFolderId.value ? '编辑文件夹' : '创建文件夹'))
-const rules: FormRules<FolderForm> = {
+const rules: FormRules<typeof folderForm> = {
   name: [{ message: '请输入文件夹名称', required: true, trigger: 'blur' }],
 }
 
-function resetData() {
-  editingFolderId.value = ''
-  folderForm.desc = ''
-  folderForm.name = ''
-  folderForm.parent_id = ''
-  folderFormRef.value?.clearValidate()
+const loading = ref(false)
+function handleSubmit() {
+  folderFormRef.value?.validate((valid) => {
+    if (!valid) return
+    loading.value = true
+    const isEdit = Boolean(editId.value)
+    const request = isEdit
+      ? FolderApi.putFolder(editId.value, props.source, folderForm)
+      : FolderApi.postFolder(props.source, folderForm)
+
+    return request
+      .then((folder) => {
+        MsgSuccess(isEdit ? '保存成功' : '创建成功')
+        visible.value = false
+        emit('refresh', folder, isEdit)
+      })
+      .finally(() => {
+        loading.value = false
+      })
+  })
 }
 
-function open(parentId: string, folder?: WorkspaceFolder) {
-  resetData()
-  editingFolderId.value = folder?.id ?? ''
-  folderForm.desc = folder?.desc ?? ''
-  folderForm.name = folder?.name ?? ''
-  folderForm.parent_id = folder?.parent_id ?? parentId
+function open(id: string, folder?: FolderItem) {
+  if (folder) {
+    //  编辑当前id
+    editId.value = folder?.id
+    folderForm.name = folder?.name ?? ''
+    folderForm.desc = folder?.desc ?? ''
+    folderForm.parent_id = folder.parent_id ?? ''
+  } else {
+    //  给当前id添加子id
+    folderForm.parent_id = id
+  }
+
   visible.value = true
-  nextTick(() => folderFormRef.value?.clearValidate())
 }
 
 function close() {
   visible.value = false
   resetData()
 }
-
-function handleSubmit() {
-  folderFormRef.value?.validate((valid) => {
-    if (!valid) return
-    emit('submit', {
-      folderId: editingFolderId.value || undefined,
-      payload: {
-        desc: folderForm.desc.trim(),
-        name: folderForm.name.trim(),
-        parent_id: folderForm.parent_id,
-      },
-    })
-  })
+function resetData() {
+  editId.value = ''
+  folderForm.desc = ''
+  folderForm.name = ''
+  folderForm.parent_id = ''
+  folderFormRef.value?.clearValidate()
 }
 
 defineExpose({ close, open })
 </script>
 
 <template>
-  <MkDialog v-model="visible" :title="dialogTitle" width="600" @closed="resetData">
+  <MkDialog v-model="visible" :title="title" @closed="resetData">
     <el-form
       ref="folderFormRef"
       :model="folderForm"
       :rules="rules"
       label-position="top"
+      require-asterisk-position="right"
       @submit.prevent
     >
       <el-form-item label="名称" prop="name">
         <el-input
           v-model="folderForm.name"
           maxlength="64"
-          placeholder="请输入文件夹名称"
+          placeholder="请输入名称"
           show-word-limit
           @blur="folderForm.name = folderForm.name.trim()"
         />
@@ -95,10 +103,10 @@ defineExpose({ close, open })
       <el-form-item label="描述" prop="desc">
         <el-input
           v-model="folderForm.desc"
-          :autosize="{ minRows: 3 }"
-          maxlength="200"
-          placeholder="请输入文件夹描述"
+          placeholder="请输入描述"
+          maxlength="128"
           show-word-limit
+          :autosize="{ minRows: 3 }"
           type="textarea"
           @blur="folderForm.desc = folderForm.desc.trim()"
         />
@@ -108,7 +116,7 @@ defineExpose({ close, open })
     <template #footer>
       <el-button :disabled="loading" @click="close">取消</el-button>
       <el-button type="primary" :loading="loading" @click="handleSubmit">
-        {{ editingFolderId ? '保存' : '创建' }}
+        {{ editId ? '保存' : '创建' }}
       </el-button>
     </template>
   </MkDialog>
diff --git a/ui/src/components/business/folder-tree/MoveFolderDialog.vue b/ui/src/components/business/folder-tree/MoveToDialog.vue
similarity index 73%
rename from ui/src/components/business/folder-tree/MoveFolderDialog.vue
rename to ui/src/components/business/folder-tree/MoveToDialog.vue
index f3b063c214d..1a9b2ea5c35 100644
--- a/ui/src/components/business/folder-tree/MoveFolderDialog.vue
+++ b/ui/src/components/business/folder-tree/MoveToDialog.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import type { WorkspaceFolder } from '@/api/types'
-import type { FolderMoveSubmit } from './types'
-import FolderVirtualizedTree from './VirtualizedTree.vue'
+import type { FolderMoveSubmit } from './types.ts'
+import FolderTree from './index.vue'
 
 defineOptions({ name: 'MoveFolderDialog' })
 
@@ -79,24 +79,31 @@ function handleSubmit() {
   })
 }
 
+// function handleMoveFolder({ folder, targetFolderId }: FolderMoveSubmit) {
+//   submiting.value = true
+//   return FolderApi.putFolder(workspaceId, props.source, folder.id, {
+//     parent_id: targetFolderId,
+//   })
+//     .then((updatedFolder) => {
+//       MsgSuccess('移动成功')
+//       moveFolderDialogRef.value?.close()
+//       return loadFolders().then(() => emit('moved', updatedFolder))
+//     })
+//     .finally(() => {
+//       submiting.value = false
+//     })
+// }
+
 defineExpose({ close, open })
 </script>
 
 <template>
-  <MkDialog v-model="visible" title="移动到" width="600" @closed="resetData">
-    <div class="flex h-100 flex-col gap-3">
-      <MkSearchInput v-model="searchKeyword" class="shrink-0" />
-      <div class="min-h-0 flex-1 rounded-md border p-2">
-        <FolderVirtualizedTree
-          :can-manage="false"
-          :current-node-key="selectedTargetId"
-          :data="moveFolders"
-          :filter-text="searchKeyword"
-          @select="handleTargetSelect"
-        />
-      </div>
-    </div>
-
+  <MkDialog v-model="visible" title="移动到" @closed="resetData">
+    <FolderTree
+      :current-node-key="selectedTargetId"
+      :data="moveFolders"
+      @select="handleTargetSelect"
+    />
     <template #footer>
       <el-button :disabled="loading" @click="close">取消</el-button>
       <el-button type="primary" :disabled="!canSubmit" :loading="loading" @click="handleSubmit">
diff --git a/ui/src/components/business/folder-tree/VirtualizedTree.vue b/ui/src/components/business/folder-tree/VirtualizedTree.vue
index 598c1d07629..1bd36ca65b8 100644
--- a/ui/src/components/business/folder-tree/VirtualizedTree.vue
+++ b/ui/src/components/business/folder-tree/VirtualizedTree.vue
@@ -87,7 +87,6 @@ function containsCurrentFolder(folder: FolderTreeNode): boolean {
 }
 
 function handleStat<T extends FolderStat>(stat: T): T {
-  stat.open = stat.level === 1
   if (props.filterText || containsCurrentFolder(stat.data)) stat.open = true
   return stat
 }
@@ -157,8 +156,8 @@ function handleAfterDrop() {
           </slot>
         </template>
 
-        <template #action-dropdown="{ row }">
-          <slot name="action-dropdown" :row="row"></slot>
+        <template #action-dropdown>
+          <slot name="action-dropdown" :row="node"></slot>
         </template>
       </MkListItem>
     </template>
diff --git a/ui/src/components/business/folder-tree/index.vue b/ui/src/components/business/folder-tree/index.vue
index 9db5bb8842e..238bf2f48b4 100644
--- a/ui/src/components/business/folder-tree/index.vue
+++ b/ui/src/components/business/folder-tree/index.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, useTemplateRef } from 'vue'
 import FolderApi from '@/api/admin/workspace/folder'
 import type { FolderSource, FolderItem } from '@/api/types'
 import { FOLDER_SOURCE } from '@/api/enums'
 import { FOLDER_SORT, type FolderSort } from './types'
 import { FOLDER_ENTRIES, FOLDER_ENTRY_ID } from '@/constants'
-import { MsgSuccess } from '@/utils/message'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
 import MkListItem from '@/components/mk-search-list/mk-list-item.vue'
 import VirtualizedTree from './VirtualizedTree.vue'
+import FolderFormDialog from './FolderFormDialog.vue'
 import { useStore } from '@/stores'
 import { getWorkspaceId } from '@/utils/workspace-context'
 
@@ -25,18 +26,12 @@ const props = withDefaults(
 )
 
 const emit = defineEmits<{
-  created: [folder: FolderItem]
-  deleted: [folder: FolderItem, selectionAffected: boolean]
-  loaded: [folders: FolderItem[]]
-  moved: [folder: FolderItem]
   select: [folder: FolderItem]
-  updated: [folder: FolderItem]
 }>()
 
 const folderEntries = computed(() => FOLDER_ENTRIES[props.source])
 const currentNodeKey = ref<string>(FOLDER_ENTRY_ID.ALL)
 
-const workspaceId = getWorkspaceId()
 const loading = ref(false)
 const folderTreeData = ref<FolderItem[]>([])
 const searchKeyword = ref('')
@@ -49,7 +44,6 @@ function loadFolders() {
       const rootFolder = folders[0]
       folderTreeData.value = rootFolder?.children ?? []
       if (currentSort.value === FOLDER_SORT.CUSTOM) syncCustomPositions()
-      emit('loaded', folders)
     })
     .finally(() => {
       loading.value = false
@@ -61,8 +55,9 @@ function handleFolderClick(folder: FolderItem) {
   emit('select', folder)
 }
 
-// 排序
+/* 排序 */
 const { user } = useStore()
+const workspaceId = getWorkspaceId()
 const CUSTOM_FOLDER_SORT = `${user.userInfo?.id}-${workspaceId}-${props.source}-folder-custom-sort`
 const FOLDER_SORT_TYPE = `${user.userInfo?.id}-${workspaceId}-${props.source}-folder-sort-type`
 
@@ -147,7 +142,7 @@ function handleSortSelect(sort: FolderSort) {
   if (sort === FOLDER_SORT.CUSTOM) syncCustomPositions()
 }
 
-// 拖拽
+/* 拖拽 */
 function findSiblingFolders(
   parentId: string,
   folders = folderTreeData.value,
@@ -209,80 +204,108 @@ function handleFolderDrop(
 }
 
 /* 文件夹表单 */
-// const folderFormDialogRef =
-//   useTemplateRef<InstanceType<typeof FolderFormDialog>>('folderFormDialogRef')
-// const moveFolderDialogRef =
-//   useTemplateRef<InstanceType<typeof MoveFolderDialog>>('moveFolderDialogRef')
+const folderFormDialogRef =
+  useTemplateRef<InstanceType<typeof FolderFormDialog>>('folderFormDialogRef')
+const formTitle = ref('')
 
-// const submiting = ref(false)
-// function handleOpenCreateFolder(parentId = workspaceId) {
-//   folderFormDialogRef.value?.open(parentId)
-// }
+function handleOpenCreateFolder() {
+  formTitle.value = '创建文件夹'
+  folderFormDialogRef.value?.open(folderEntries.value.all.id)
+}
 
-// function handleOpenCreateChildFolder(folder: FolderItem) {
-//   folderFormDialogRef.value?.open(folder.id)
-// }
+function handleOpenCreateChildFolder(folder: FolderItem) {
+  formTitle.value = '创建子文件夹'
+  folderFormDialogRef.value?.open(folder.id)
+}
 
-// function handleOpenEditFolder(folder: FolderItem) {
-//   folderFormDialogRef.value?.open(folder.parent_id ?? workspaceId, folder)
-// }
+function handleOpenEditFolder(folder: FolderItem) {
+  formTitle.value = '编辑文件夹'
+  folderFormDialogRef.value?.open(folder.id, folder)
+}
 
-// function handleFolderSubmit({ folderId, payload }: FolderFormSubmit) {
-//   submiting.value = true
-//   const request = folderId
-//     ? FolderApi.putFolder(workspaceId, props.source, folderId, payload)
-//     : FolderApi.postFolder(workspaceId, props.source, {
-//         ...payload,
-//         name: payload.name ?? '',
-//       })
-
-//   return request
-//     .then((folder) => {
-//       MsgSuccess(folderId ? '保存成功' : '创建成功')
-//       folderFormDialogRef.value?.close()
-//       return loadFolders().then(() => {
-//         if (folderId) emit('updated', folder)
-//         else emit('created', folder)
-//       })
-//     })
-//     .finally(() => {
-//       submiting.value = false
-//     })
-// }
+// 创建后选中新文件夹；编辑当前文件夹时同步最新信息。
+function handleFolderRefresh(folder: FolderItem, isEdit: boolean) {
+  return loadFolders().then(() => {
+    if (!isEdit || folder.id === currentNodeKey.value) {
+      handleFolderClick(folder)
+    }
+  })
+}
 
-// /* 文件夹移动与删除 */
-// function handleOpenMoveFolder(folder: FolderItem) {
-//   moveFolderDialogRef.value?.open(folder)
-// }
+/* 删除文件夹：当前选择不受影响时只刷新树。 */
 
-// function handleMoveFolder({ folder, targetFolderId }: FolderMoveSubmit) {
-//   submiting.value = true
-//   return FolderApi.putFolder(workspaceId, props.source, folder.id, {
-//     parent_id: targetFolderId,
-//   })
-//     .then((updatedFolder) => {
-//       MsgSuccess('移动成功')
-//       moveFolderDialogRef.value?.close()
-//       return loadFolders().then(() => emit('moved', updatedFolder))
-//     })
-//     .finally(() => {
-//       submiting.value = false
-//     })
-// }
+function handleDeleteFolder(folder: FolderItem) {
+  MsgConfirm(`确认删除文件夹：${folder.name}？`, '文件夹下的资源会被删除，请谨慎操作。')
+    .then(() => {
+      loading.value = true
+      const { positionCache, targetFolder } = getFolderDeleteContext(folder)
+      return FolderApi.deleteFolder(folder.id, props.source).then(() => {
+        writeCustomPositions(positionCache)
+        MsgSuccess('删除成功')
+
+        // 树重建前先更新激活 ID，让 statHandler 展开目标文件夹的祖先链。
+        if (targetFolder) currentNodeKey.value = targetFolder.id
+        return loadFolders().then(() => {
+          if (targetFolder) {
+            handleFolderClick(findFolderById(folderTreeData.value, targetFolder.id) ?? targetFolder)
+          }
+        })
+      })
+    })
+    .catch(() => {})
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+function findFolderById(folders: FolderItem[], folderId: string): FolderItem | undefined {
+  for (const folder of folders) {
+    if (folder.id === folderId) return folder
+
+    const matchedFolder = findFolderById(folder.children ?? [], folderId)
+    if (matchedFolder) return matchedFolder
+  }
+}
+
+function getFolderDeleteContext(folder: FolderItem) {
+  const deletedFolder = findFolderById(folderTreeData.value, folder.id) ?? folder
+  const positionCache = readCustomPositions()
+  const parentId = deletedFolder.parent_id ?? FOLDER_ENTRY_ID.ALL
+  delete positionCache[parentId]?.[deletedFolder.id]
+
+  // 同时清理父级引用和整棵被删子树的缓存分组。
+  const subtreeFolders = [deletedFolder]
+  while (subtreeFolders.length) {
+    const currentFolder = subtreeFolders.pop()
+    if (!currentFolder) break
+    delete positionCache[currentFolder.id]
+    subtreeFolders.push(...(currentFolder.children ?? []))
+  }
+
+  if (!findFolderById([deletedFolder], currentNodeKey.value)) return { positionCache }
+  if (parentId !== FOLDER_ENTRY_ID.ALL) {
+    const targetFolder = findFolderById(folderTreeData.value, parentId) ?? folderEntries.value.all
+    return { positionCache, targetFolder }
+  }
 
-// function handleDeleteFolder(folder: FolderItem) {
-//   MsgConfirm(`确认删除文件夹“${folder.name}”？`, '文件夹内的资源也会被删除，请谨慎操作。')
-//     .then(() => {
-//       submiting.value = true
-//       return FolderApi.deleteFolder(props.source, folder.id).then(() => {
-//         MsgSuccess('删除成功')
-//         return loadFolders().then(() => emit('deleted', folder))
-//       })
-//     })
-//     .catch(() => {})
-//     .finally(() => {
-//       submiting.value = false
-//     })
+  // 顶级文件夹按当前展示顺序回退到下一个、上一个或“全部”。
+  const siblingFolders = sortTreeData.value
+  const folderIndex = siblingFolders.findIndex(({ id }) => id === deletedFolder.id)
+  const targetFolder =
+    folderIndex < 0
+      ? folderEntries.value.all
+      : (siblingFolders[folderIndex + 1] ??
+        siblingFolders[folderIndex - 1] ??
+        folderEntries.value.all)
+  return { positionCache, targetFolder }
+}
+
+// /* 文件夹移动 */
+// const moveFolderDialogRef =
+//   useTemplateRef<InstanceType<typeof MoveFolderDialog>>('moveFolderDialogRef')
+
+// function handleOpenMoveFolder(folder: FolderItem) {
+//   moveFolderDialogRef.value?.open(folder)
 // }
 
 onMounted(() => {
@@ -293,7 +316,7 @@ onMounted(() => {
   loadFolders()
 })
 
-defineExpose({ refresh: loadFolders })
+defineExpose({ refresh: loadFolders, openCreate: handleOpenCreateFolder })
 </script>
 
 <template>
@@ -365,7 +388,7 @@ defineExpose({ refresh: loadFolders })
         @node-drop="handleFolderDrop"
         @node-click="handleFolderClick"
         :draggable="draggable"
-        class="pl-4 pr-1"
+        class="pl-4 pr-1 pb-4"
       >
         <template #default="{ node }">
           <MkIcon name="icon_file-folder_colorful" class="mr-2" :size="18" />
@@ -374,30 +397,36 @@ defineExpose({ refresh: loadFolders })
           </span>
         </template>
 
-        <template v-if="canEdit" #action-dropdown>
-          <!-- <MkDropdownMenu>
-            <MkDropdownItem @click="handleOpenEditFolder(row)">
-              <template #icon><MkIcon name="icon_add_outlined" /></template>
+        <template v-if="canEdit" #action-dropdown="{ row }">
+          <MkDropdownMenu>
+            <MkDropdownItem @click="handleOpenCreateChildFolder(row)">
+              <template #icon><MkIcon name="icon_add-folder_outlined" /></template>
               <span>创建子文件夹</span>
             </MkDropdownItem>
             <MkDropdownItem @click="handleOpenEditFolder(row)">
               <template #icon><MkIcon name="icon_edit_outlined" /></template>
               <span>编辑</span>
             </MkDropdownItem>
-            <MkDropdownItem @click="handleOpenEditFolder(row)">
-              <template #icon><MkIcon name="icon_right_outlined" /></template>
+            <MkDropdownItem>
+              <template #icon><MkIcon name="a-icon_move2_outlined" /></template>
               <span>移动到</span>
             </MkDropdownItem>
             <MkDropdownItem divided @click="handleDeleteFolder(row)">
               <template #icon><MkIcon name="icon_delete-trash_outlined" /></template>
               <span>删除</span>
             </MkDropdownItem>
-          </MkDropdownMenu> -->
+          </MkDropdownMenu>
         </template>
       </VirtualizedTree>
     </div>
 
-    <!-- <FolderFormDialog ref="folderFormDialogRef" :loading="loading" @submit="handleFolderSubmit" />
+    <FolderFormDialog
+      ref="folderFormDialogRef"
+      :title="formTitle"
+      :source="props.source"
+      @refresh="handleFolderRefresh"
+    />
+    <!--
     <MoveFolderDialog
       ref="moveFolderDialogRef"
       :folders="folderTree"
diff --git a/ui/src/components/global/mk-icon/ToolIcon.vue b/ui/src/components/global/mk-icon/ToolIcon.vue
index 224ccd69f0e..2ff5054fd98 100644
--- a/ui/src/components/global/mk-icon/ToolIcon.vue
+++ b/ui/src/components/global/mk-icon/ToolIcon.vue
@@ -22,10 +22,10 @@ withDefaults(
     <img :src="resetUrl(icon)" alt="" />
   </el-avatar>
   <el-avatar v-else-if="type === TOOL_TYPE.MCP" shape="square" :size="size">
-    <img class="w-[73%]" src="@/assets/tool/icon_mcp.svg" alt="" />
+    <img style="width: 73%" src="@/assets/tool/icon_mcp.svg" alt="" />
   </el-avatar>
   <el-avatar v-else-if="type === TOOL_TYPE.SKILL" shape="square" :size="size">
-    <img class="w-[63%]" src="@/assets/tool/icon_skill.svg" alt="" />
+    <img style="width: 60%" src="@/assets/tool/icon_skill.svg" alt="" />
   </el-avatar>
   <el-avatar
     v-else-if="type === TOOL_TYPE.DATA_SOURCE"
@@ -33,7 +33,7 @@ withDefaults(
     shape="square"
     :size="size"
   >
-    <img class="w-[58%]" src="@/assets/tool/icon_datasource.svg" alt="" />
+    <img style="width: 58%" src="@/assets/tool/icon_datasource.svg" alt="" />
   </el-avatar>
   <el-avatar
     v-else-if="type === TOOL_TYPE.WORKFLOW"
@@ -41,9 +41,9 @@ withDefaults(
     shape="square"
     :size="size"
   >
-    <img class="w-[62%]" src="@/assets/workflow/logo_workflow.svg" alt="" />
+    <img style="width: 62%" src="@/assets/workflow/logo_workflow.svg" alt="" />
   </el-avatar>
   <el-avatar v-else class="bg-success!" shape="square" :size="size">
-    <img class="w-[63%]" src="@/assets/tool/icon_tool.svg" alt="" />
+    <img style="width: 63%" src="@/assets/tool/icon_tool.svg" alt="" />
   </el-avatar>
 </template>
diff --git a/ui/src/components/global/mk-infinite-scroll/index.vue b/ui/src/components/global/mk-infinite-scroll/index.vue
index 6a077f055dd..ed2c480dcda 100644
--- a/ui/src/components/global/mk-infinite-scroll/index.vue
+++ b/ui/src/components/global/mk-infinite-scroll/index.vue
@@ -39,6 +39,9 @@ const finished = computed(
     pagination.value.currentPage > 0 &&
     pagination.value.currentPage * pagination.value.pageSize >= pagination.value.total,
 )
+const showFinishedText = computed(
+  () => finished.value && pagination.value.total > pagination.value.pageSize,
+)
 // 查询条件快速变化时可能并发 reset，只有最新版本的请求可以更新列表。
 let requestVersion = 0
 let infiniteScrollObserver: IntersectionObserver | undefined
@@ -110,7 +113,7 @@ defineExpose({ reset })
     <slot />
     <div ref="triggerRef" aria-live="polite" class="flex-center py-4 shrink-0 text-sm text-N600">
       <span v-if="loading">加载中...</span>
-      <span v-else-if="finished">没有更多了</span>
+      <span v-else-if="showFinishedText">没有更多了</span>
     </div>
   </div>
 </template>
diff --git a/ui/src/layout/avatar-dropdown/index.vue b/ui/src/layout/avatar-dropdown/index.vue
index 6733162687c..6d6f67d0e44 100644
--- a/ui/src/layout/avatar-dropdown/index.vue
+++ b/ui/src/layout/avatar-dropdown/index.vue
@@ -36,14 +36,14 @@ function handleLogout() {
 <template>
   <MkDropdown ref="dropdownRef" trigger="click" placement="bottom-end">
     <el-avatar :size="32" class="cursor-pointer bg-primary-gradient!">
-      <img src="@/assets/mk-icon-user-gradient.svg" alt="" class="w-[54%]!" />
+      <img src="@/assets/mk-icon-user-gradient.svg" alt="" style="width: 54%" />
     </el-avatar>
 
     <template #dropdown>
       <div class="w-52">
         <div class="flex items-center gap-2 p-3">
           <el-avatar :size="40" class="bg-primary-gradient!">
-            <img src="@/assets/mk-icon-user-gradient.svg" alt="" class="w-[54%]!" />
+            <img src="@/assets/mk-icon-user-gradient.svg" alt="" style="width: 54%" />
           </el-avatar>
           <div>
             <div class="font-medium text-lg">{{ user.userInfo?.nick_name }}</div>
diff --git a/ui/src/styles/STYLE_README.md b/ui/src/styles/STYLE_README.md
index e175ddadc52..3c5b3c44891 100644
--- a/ui/src/styles/STYLE_README.md
+++ b/ui/src/styles/STYLE_README.md
@@ -96,6 +96,7 @@ Tailwind 在 `tailwind.css` 中显式重写了项目字号及对应行高：
 - 业务组件的布局、间距、尺寸、排版、颜色和常见交互状态优先使用 Tailwind 工具类。
 - 能直接组合工具类表达时，不要新增仅供单个元素使用的自定义 class，也不要为其新增 `<style>` 规则。
 - Element Plus 组件可通过 `class`、`popper-class` 等属性直接传入 Tailwind 工具类；覆盖组件默认样式时按需使用 Tailwind 的 `!` important 修饰符。
+- `el-avatar` 内部图片默认宽度为 `100%`；需要改变图片宽度时，统一在 `img` 上使用行内 `style="width: ..."`。
 - 仅在 Tailwind 无法清晰表达、必须使用复杂选择器、需要深层穿透，或样式确实会被多处共享时编写 Sass/CSS。此时 class 应使用有业务含义的名称，组件样式默认保持 `scoped`。
 - 运行时主题颜色仍以 `variables.scss` 的 `--mk-*` 变量为唯一数据源，并优先使用已映射的 `text-N900`、`text-N600`、`bg-primary` 等语义工具类。
 - 只添加会实际改变当前布局、样式或交互的 class。不要习惯性追加无效或重复的工具类；添加前应结合元素默认样式、父级布局和现有 class 判断其是否必要。
diff --git a/ui/src/views/application/ApplicationView.vue b/ui/src/views/application/ApplicationView.vue
index b0546557c9b..2b4bc623368 100644
--- a/ui/src/views/application/ApplicationView.vue
+++ b/ui/src/views/application/ApplicationView.vue
@@ -10,9 +10,11 @@ import ApplicationCard from './components/ApplicationCard.vue'
 
 /* 当前文件夹 */
 const currentFolder = ref<FolderItem>({ ...FOLDER_ENTRIES[FOLDER_SOURCE.APPLICATION].all })
+
 function handleFolderSelect(folder: FolderItem) {
+  const folderChanged = folder.id !== currentFolder.value.id
   currentFolder.value = folder
-  infiniteScrollRef.value?.reset()
+  if (folderChanged) infiniteScrollRef.value?.reset()
 }
 // 新建文件夹
 const folderTreeRef = useTemplateRef<InstanceType<typeof FolderTree>>('folderTreeRef')
@@ -68,13 +70,19 @@ function loadApplicationPage(pagination: { currentPage: number; pageSize: number
       <component :is="Header">
         <h4>{{ title }}</h4>
         <el-tooltip content="创建文件夹" placement="top">
-          <el-button @click="handleCreateFolder" text type="primary" class="-mr-1" disabled>
+          <el-button @click="handleCreateFolder" text type="primary" class="-mr-1">
             <MkIcon name="icon_add-folder_outlined" :size="18" />
           </el-button>
         </el-tooltip>
       </component>
 
-      <FolderTree :source="FOLDER_SOURCE.APPLICATION" draggable @select="handleFolderSelect" />
+      <FolderTree
+        ref="folderTreeRef"
+        :source="FOLDER_SOURCE.APPLICATION"
+        @select="handleFolderSelect"
+        draggable
+      >
+      </FolderTree>
     </template>
 
     <template #default="{ Header }">
diff --git a/ui/src/views/tool/ToolView.vue b/ui/src/views/tool/ToolView.vue
index 84f32da67ac..e3f409a033d 100644
--- a/ui/src/views/tool/ToolView.vue
+++ b/ui/src/views/tool/ToolView.vue
@@ -15,8 +15,9 @@ const currentFolder = ref<FolderItem>({ ...FOLDER_ENTRIES[FOLDER_SOURCE.TOOL].al
 const isShared = computed(() => currentFolder.value.id === FOLDER_ENTRY_ID.SHARED)
 
 function handleFolderSelect(folder: FolderItem) {
+  const folderChanged = folder.id !== currentFolder.value.id
   currentFolder.value = folder
-  infiniteScrollRef.value?.reset()
+  if (folderChanged) infiniteScrollRef.value?.reset()
 }
 // 新建文件夹
 const folderTreeRef = useTemplateRef<InstanceType<typeof FolderTree>>('folderTreeRef')
@@ -64,8 +65,6 @@ function loadToolsPage(pagination: { currentPage: number; pageSize: number }) {
   })
 }
 
-
-
 /* 工具维护 */
 const loading = ref(false)
 function handleToolStatusChange(tool: ToolItem, active: boolean) {