refactor(explorer): optimize openFolder (#148)

py/manager.py

@@ -138,8 +138,9 @@ class ModelManager:
 
             stat = entry.stat()
             return {
-                "type": folder if is_file else "folder",
+                "type": folder,
                 "subFolder": sub_folder,
+                "isFolder": not is_file,
                 "basename": basename,
                 "extension": extension,
                 "pathIndex": path_index,

src/components/DialogExplorer.vue

@@ -20,7 +20,6 @@
           v-show="!showToolbar"
           class="h-10 flex-1"
           :items="folderPaths"
-          @item-click="(item, index) => openFolder(index, item.name, item.icon)"
         ></ResponseBreadcrumb>
       </div>
 
@@ -211,7 +210,7 @@ const currentDataList = computed(() => {
     const modelItems: ModelTreeNode[] = []
 
     for (const item of renderedList) {
-      if (item.type === 'folder') {
+      if (item.isFolder) {
         folderItems.push(item)
       } else {
         modelItems.push(item)
@@ -281,8 +280,9 @@ const confirmName = ref('')
 
 const openItem = (item: ModelTreeNode, e: Event) => {
   menu.value.hide(e)
-  if (item.type === 'folder') {
+  if (item.isFolder) {
-    openFolder(folderPaths.value.length, item.basename)
+    searchContent.value = undefined
+    openFolder(item)
   } else {
     openModelDetail(item)
   }

src/components/DialogManager.vue

@@ -216,7 +216,7 @@ const cols = computed(() => {
 const list = computed(() => {
   const mergedList = Object.values(data.value).flat()
   const pureModels = mergedList.filter((item) => {
-    return item.type !== 'folder'
+    return !item.isFolder
   })
 
   const filterList = pureModels.filter((model) => {

src/components/ModelCard.vue

@@ -5,7 +5,7 @@
   >
     <div data-card-main class="flex h-full w-full flex-col">
       <div data-card-preview class="flex-1 overflow-hidden">
-        <div v-if="model.type === 'folder'" class="h-full w-full">
+        <div v-if="model.isFolder" class="h-full w-full">
           <svg
             class="icon"
             viewBox="0 0 1024 1024"
@@ -39,7 +39,7 @@
     </div>
 
     <div
-      v-if="model.type !== 'folder'"
+      v-if="!model.isFolder"
       data-draggable-overlay
       class="absolute left-0 top-0 h-full w-full"
       draggable="true"
@@ -47,7 +47,7 @@
     ></div>
 
     <div
-      v-if="model.type !== 'folder'"
+      v-if="!model.isFolder"
       data-mode-type
       class="pointer-events-none absolute left-2 top-2"
       :style="{

src/hooks/explorer.ts

@@ -1,7 +1,7 @@
 import { genModelFullName, useModels } from 'hooks/model'
 import { cloneDeep, filter, find } from 'lodash'
 import { BaseModel, Model, SelectOptions } from 'types/typings'
-import { computed, ref, watchEffect } from 'vue'
+import { computed, ref } from 'vue'
 
 export interface FolderPathItem {
   name: string
@@ -11,7 +11,6 @@ export interface FolderPathItem {
 }
 
 export type ModelFolder = BaseModel & {
-  type: 'folder'
   children: ModelTreeNode[]
 }
 
@@ -31,18 +30,23 @@ export const useModelExplorer = () => {
 
   const folderPaths = ref<FolderPathItem[]>([])
 
-  const genFolderItem = (basename: string, subFolder: string): ModelFolder => {
+  const genFolderItem = (
+    basename: string,
+    folder?: string,
+    subFolder?: string,
+  ): ModelFolder => {
     return {
       id: basename,
       basename: basename,
-      subFolder: subFolder,
+      subFolder: subFolder ?? '',
       pathIndex: 0,
       sizeBytes: 0,
       extension: '',
       description: '',
       metadata: {},
       preview: '',
-      type: 'folder',
+      type: folder ?? '',
+      isFolder: true,
       children: [],
     }
   }
@@ -52,7 +56,7 @@ export const useModelExplorer = () => {
 
     for (const folder in folders.value) {
       if (Object.prototype.hasOwnProperty.call(folders.value, folder)) {
-        const folderItem = genFolderItem(folder, '')
+        const folderItem = genFolderItem(folder)
 
         const folderModels = cloneDeep(data.value[folder]) ?? []
 
@@ -82,59 +86,64 @@ export const useModelExplorer = () => {
       }
     }
 
-    const root: ModelTreeNode = genFolderItem('root', '')
+    const root: ModelTreeNode = genFolderItem('root')
     root.children = rootChildren
     return [root]
   })
 
   function findFolder(list: ModelTreeNode[], name: string) {
-    return find(list, { type: 'folder', basename: name }) as
+    return find(list, { isFolder: true, basename: name }) as
       | ModelFolder
       | undefined
   }
 
   function findFolders(list: ModelTreeNode[]) {
-    return filter(list, { type: 'folder' }) as ModelFolder[]
+    return filter(list, { isFolder: true }) as ModelFolder[]
   }
 
-  async function openFolder(level: number, name: string, icon?: string) {
+  async function openFolder(item: BaseModel) {
-    if (folderPaths.value.length >= level) {
+    const folderItems: FolderPathItem[] = []
-      folderPaths.value.splice(level)
+
+    const folder = item.type
+    const subFolderParts = item.subFolder.split('/').filter(Boolean)
+
+    const pathParts: string[] = []
+    if (folder) {
+      pathParts.push(folder, ...subFolderParts)
+    }
+    pathParts.push(item.basename)
+    if (pathParts[0] !== 'root') {
+      pathParts.unshift('root')
     }
 
-    let currentLevel = dataTreeList.value
+    let levelFolders = findFolders(dataTreeList.value)
-    for (const folderItem of folderPaths.value) {
+    for (const [index, part] of pathParts.entries()) {
-      const found = findFolder(currentLevel, folderItem.name)
+      const currentFolder = findFolder(levelFolders, part)
-      currentLevel = found?.children || []
+      if (!currentFolder) {
+        break
+      }
+
+      levelFolders = findFolders(currentFolder.children ?? [])
+      folderItems.push({
+        name: currentFolder.basename,
+        icon: index === 0 ? 'pi pi-desktop' : '',
+        onClick: () => {
+          openFolder(currentFolder)
+        },
+        children: levelFolders.map((child) => {
+          const name = child.basename
+          return {
+            value: name,
+            label: name,
+            command: () => openFolder(child),
+          }
+        }),
+      })
     }
 
-    const folderItem = findFolder(currentLevel, name)
+    folderPaths.value = folderItems
-    const folderItemChildren = folderItem?.children ?? []
-    const subFolders = findFolders(folderItemChildren)
-
-    folderPaths.value.push({
-      name,
-      icon,
-      onClick: () => {
-        openFolder(level, name, icon)
-      },
-      children: subFolders.map((item) => {
-        const name = item.basename
-        return {
-          value: name,
-          label: name,
-          command: () => openFolder(level + 1, name),
-        }
-      }),
-    })
   }
 
-  watchEffect(() => {
-    if (Object.keys(folders.value).length > 0 && folderPaths.value.length < 2) {
-      openFolder(0, 'root', 'pi pi-desktop')
-    }
-  }, {})
-
   return {
     folders,
     folderPaths,

src/hooks/model.ts

@@ -446,7 +446,7 @@ export const useModelFolder = (
     }
 
     const folderItems = cloneDeep(models.value[type]) ?? []
-    const pureFolders = folderItems.filter((item) => item.type === 'folder')
+    const pureFolders = folderItems.filter((item) => item.isFolder)
     pureFolders.sort((a, b) => a.basename.localeCompare(b.basename))
 
     const folders = modelFolders.value[type] ?? []

src/types/typings.d.ts

@@ -9,6 +9,7 @@ export interface BaseModel {
   type: string
   subFolder: string
   pathIndex: number
+  isFolder: boolean
   preview: string | string[]
   description: string
   metadata: Record<string, string>