feat: unify directory tree select component and support file sorting (#110)

internal/controllers/file_controller.go

@@ -35,6 +35,7 @@ type FileNode struct {
 	Name     string      `json:"name"`
 	Path     string      `json:"path"`
 	IsDir    bool        `json:"isDir"`
+	ModTime  int64       `json:"modTime"`
 	Children []*FileNode `json:"children,omitempty"`
 }
 
@@ -84,6 +85,12 @@ func (fc *FileController) GetFileTree(c *gin.Context) {
 		relPath, _ := filepath.Rel(fc.workDir, path)
 		parts := strings.Split(relPath, string(filepath.Separator))
 
+		info, err := d.Info()
+		var modTime int64
+		if err == nil {
+			modTime = info.ModTime().UnixMilli()
+		}
+
 		current := root
 		for i, part := range parts {
 			found := false
@@ -98,9 +105,10 @@ func (fc *FileController) GetFileTree(c *gin.Context) {
 				isLast := i == len(parts)-1
 				isDir := !isLast || d.IsDir()
 				node := &FileNode{
-					Name:  part,
+					Name:    part,
-					Path:  strings.Join(parts[:i+1], "/"),
+					Path:    strings.Join(parts[:i+1], "/"),
-					IsDir: isDir,
+					IsDir:   isDir,
+					ModTime: modTime,
 				}
 				if isDir {
 					node.Children = []*FileNode{}

web/src/api/index.ts

@@ -377,6 +377,7 @@ export interface FileNode {
   name: string
   path: string
   isDir: boolean
+  modTime: number
   children?: FileNode[]
 }
 

web/src/components/DirTreeSelect.vue

@@ -6,8 +6,11 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
 import { api, type FileNode } from '@/api'
 
 const props = defineProps<{
-  modelValue?: string
+  modelValue?: string | null
   placeholder?: string
+  fileTree?: FileNode[]
+  defaultExpand?: string
+  rootLabel?: string
 }>()
 
 const emit = defineEmits<{
@@ -16,9 +19,21 @@ const emit = defineEmits<{
 
 const open = ref(false)
 const loading = ref(false)
-const fileTree = ref<FileNode[]>([])
+const internalFileTree = ref<FileNode[]>([])
+const fileTree = computed(() => props.fileTree || internalFileTree.value)
 const expandedDirs = ref<Set<string>>(new Set())
 
+watch(() => props.defaultExpand, (newVal) => {
+  if (newVal) {
+    const parts = newVal.split('/')
+    let current = ''
+    for (const part of parts) {
+      current = current ? `${current}/${part}` : part
+      expandedDirs.value.add(current)
+    }
+  }
+}, { immediate: true })
+
 interface FlatDir {
   path: string
   name: string
@@ -48,12 +63,13 @@ function flattenDirs(nodes: FileNode[], depth = 0): FlatDir[] {
 const flatDirs = computed(() => flattenDirs(fileTree.value))
 
 async function loadTree() {
-  if (fileTree.value.length > 0) return
+  if (props.fileTree) return
+  if (internalFileTree.value.length > 0) return
   loading.value = true
   try {
-    fileTree.value = await api.files.tree()
+    internalFileTree.value = await api.files.tree()
   } catch {
-    fileTree.value = []
+    internalFileTree.value = []
   } finally {
     loading.value = false
   }
@@ -88,9 +104,13 @@ function isSelected(dirPath: string): boolean {
   return false
 }
 
+function getRootLabel() {
+  return props.rootLabel || 'scripts (默认)'
+}
+
 // 检查是否是默认目录
 function isDefaultSelected(): boolean {
-  if (!props.modelValue) return true
+  if (!props.modelValue || props.modelValue === '/') return true
   // 绝对路径以 /scripts 结尾且没有子目录
   if (props.modelValue.endsWith('/scripts') || props.modelValue.endsWith('/data/scripts')) return true
   return false
@@ -101,21 +121,17 @@ watch(open, (val) => {
 })
 
 const displayValue = computed(() => {
-  if (!props.modelValue) return props.placeholder || 'scripts (默认)'
+  if (!props.modelValue || props.modelValue === '/') return props.placeholder || getRootLabel()
-  // 如果是绝对路径，只显示最后部分
+  if (isDefaultSelected() && !props.rootLabel) return 'scripts (默认)'
-  const parts = props.modelValue.split('/')
+  return props.modelValue
-  const lastPart = parts[parts.length - 1]
-  // 如果是 scripts 目录本身
-  if (lastPart === 'scripts') return 'scripts (默认)'
-  return lastPart || props.modelValue
 })
 </script>
 
 <template>
   <Popover v-model:open="open">
     <PopoverTrigger as-child>
-      <Button variant="outline" class="w-full justify-start text-sm h-9">
+      <Button variant="outline" class="w-full justify-start text-xs h-8 font-normal">
-        <Folder class="h-4 w-4 mr-2 text-yellow-500 shrink-0" />
+        <Folder class="h-3.5 w-3.5 mr-2 text-yellow-500 shrink-0" />
         <span class="truncate">{{ displayValue }}</span>
       </Button>
     </PopoverTrigger>
@@ -125,13 +141,13 @@ const displayValue = computed(() => {
         <!-- 根目录选项 -->
         <div
           :class="[
-            'flex items-center gap-1.5 py-1 px-2 rounded cursor-pointer text-sm',
+            'flex items-center gap-1.5 py-1 px-2 rounded cursor-pointer text-xs',
             isDefaultSelected() ? 'bg-primary/10 text-primary' : 'hover:bg-muted'
           ]"
           @click="selectRoot"
         >
-          <FolderOpen class="h-4 w-4 text-yellow-500" />
+          <FolderOpen class="h-3.5 w-3.5 text-yellow-500" />
-          <span>scripts (默认)</span>
+          <span>{{ getRootLabel() }}</span>
         </div>
         
         <!-- 扁平化的目录列表 -->
@@ -139,7 +155,7 @@ const displayValue = computed(() => {
           v-for="dir in flatDirs"
           :key="dir.path"
           :class="[
-            'flex items-center gap-1 py-1 px-2 rounded cursor-pointer text-sm',
+            'flex items-center gap-1 py-1 px-2 rounded cursor-pointer text-xs',
             isSelected(dir.path) ? 'bg-primary/10 text-primary' : 'hover:bg-muted'
           ]"
           :style="{ paddingLeft: (dir.depth * 12 + 8) + 'px' }"
@@ -154,7 +170,7 @@ const displayValue = computed(() => {
             <ChevronRight v-else class="h-3 w-3" />
           </span>
           <span v-else class="w-3 shrink-0" />
-          <Folder class="h-4 w-4 text-yellow-500 shrink-0" />
+          <Folder class="h-3.5 w-3.5 text-yellow-500 shrink-0" />
           <span class="truncate">{{ dir.name }}</span>
         </div>
         

web/src/views/editor/Editor.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, computed, onUnmounted, nextTick, shallowRef } from 'vue'
+import { ref, onMounted, computed, onUnmounted, nextTick, shallowRef, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { Button } from '@/components/ui/button'
 import { Dialog, DialogContent } from '@/components/ui/dialog'
@@ -24,21 +24,6 @@ const fileTree = ref<FileNode[]>([])
 const expandedDirs = ref<Set<string>>(new Set())
 const selectedPath = ref<string | null>(null)
 
-const allDirs = computed(() => {
-  const dirs: string[] = []
-  function traverse(nodes: FileNode[]) {
-    for (const node of nodes) {
-      if (node.isDir) {
-        dirs.push(node.path)
-        if (node.children) traverse(node.children)
-      }
-    }
-  }
-  traverse(fileTree.value)
-  return dirs
-})
-
-
 // State for Editor
 const selectedFile = ref<string | null>(null)
 const fileContent = ref('')
@@ -131,10 +116,54 @@ function handleResize() {
   isSmallScreen.value = window.innerWidth < 1024
 }
 
+// Sorting state
+type SortMethod = 'name_asc' | 'name_desc' | 'time_desc' | 'time_asc'
+const sortMethod = ref<SortMethod>('name_asc')
+
+function sortTree(nodes: FileNode[]) {
+  nodes.sort((a, b) => {
+    if (a.isDir && !b.isDir) return -1
+    if (!a.isDir && b.isDir) return 1
+    
+    switch (sortMethod.value) {
+      case 'name_asc':
+        return a.name.localeCompare(b.name)
+      case 'name_desc':
+        return b.name.localeCompare(a.name)
+      case 'time_desc':
+        return (b.modTime || 0) - (a.modTime || 0)
+      case 'time_asc':
+        return (a.modTime || 0) - (b.modTime || 0)
+      default:
+        return 0
+    }
+  })
+  
+  for (const node of nodes) {
+    if (node.children) sortTree(node.children)
+  }
+}
+
+watch(sortMethod, (newVal) => {
+  sortTree(fileTree.value)
+  api.settings.setSection('ui', { file_sort_method: newVal }).catch(() => {})
+})
+
+async function initSortMethod() {
+  try {
+    const val = await api.settings.get('ui', 'file_sort_method')
+    if (val && ['name_asc', 'name_desc', 'time_desc', 'time_asc'].includes(val)) {
+      sortMethod.value = val as SortMethod
+    }
+  } catch {}
+}
+
 async function loadTree() {
   isRefreshing.value = true
   try {
-    fileTree.value = await api.files.tree()
+    const nodes = await api.files.tree()
+    sortTree(nodes)
+    fileTree.value = nodes
   } catch {
     toast.error('加载文件树失败')
   } finally {
@@ -415,8 +444,11 @@ function handleGlobalKeydown(e: KeyboardEvent) {
   }
 }
 
-onMounted(() => {
+onMounted(async () => {
-  initFromUrl(); fetchPaths(); fetchInstalledLangs()
+  await initSortMethod()
+  initFromUrl()
+  fetchPaths()
+  fetchInstalledLangs()
   window.addEventListener('resize', handleResize)
   window.addEventListener('keydown', handleGlobalKeydown)
 })
@@ -434,6 +466,7 @@ onUnmounted(() => {
       :expanded-dirs="expandedDirs"
       :selected-path="selectedPath"
       :is-refreshing="isRefreshing"
+      v-model:sortMethod="sortMethod"
       @refresh="loadTree"
       @select="handleSelect"
       @delete="(path: string) => dialogsRef?.openDelete(path)"

web/src/views/editor/components/DirSelect.vue

@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-import { Button } from '@/components/ui/button'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { Folder, ChevronsUpDown, ChevronDown, ChevronRight } from 'lucide-vue-next'
-import type { FileNode } from '@/api'
-
-const props = defineProps<{
-  fileTree?: FileNode[]
-  modelValue: string
-  defaultExpand?: string
-}>()
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string]
-}>()
-
-const isPopoverOpen = ref(false)
-const expandedDirs = ref<Set<string>>(new Set())
-
-watch(() => props.defaultExpand, (newVal) => {
-  if (newVal) {
-    const parts = newVal.split('/')
-    let current = ''
-    for (const part of parts) {
-      current = current ? `${current}/${part}` : part
-      expandedDirs.value.add(current)
-    }
-  }
-}, { immediate: true })
-
-function toggleExpand(path: string) {
-  if (expandedDirs.value.has(path)) {
-    expandedDirs.value.delete(path)
-  } else {
-    expandedDirs.value.add(path)
-  }
-}
-
-const visibleDirs = computed(() => {
-  const result: { path: string; name: string; depth: number; hasChildren: boolean }[] = []
-  
-  function traverse(nodes: FileNode[], depth: number) {
-    for (const node of nodes) {
-      if (node.isDir) {
-        const hasChildren = !!node.children && node.children.some(c => c.isDir)
-        result.push({ path: node.path, name: node.name, depth, hasChildren })
-        if (expandedDirs.value.has(node.path) && node.children) {
-          traverse(node.children, depth + 1)
-        }
-      }
-    }
-  }
-  
-  if (props.fileTree) {
-    traverse(props.fileTree, 0)
-  }
-  return result
-})
-
-function selectDir(path: string) {
-  emit('update:modelValue', path)
-  isPopoverOpen.value = false
-}
-</script>
-
-<template>
-  <Popover v-model:open="isPopoverOpen">
-    <PopoverTrigger as-child>
-      <Button variant="outline" role="combobox" class="w-full justify-between h-8 text-xs font-normal">
-        {{ modelValue || '根目录' }}
-        <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
-      </Button>
-    </PopoverTrigger>
-    <PopoverContent class="w-[280px] p-0" align="start">
-      <div class="max-h-[300px] overflow-auto py-1">
-        <div 
-          class="flex items-center gap-1 py-1.5 px-2 hover:bg-muted cursor-pointer text-xs" 
-          :class="{ 'bg-accent text-accent-foreground': modelValue === '/' || modelValue === '' }"
-          @click="selectDir('/')"
-        >
-          <Folder class="h-3 w-3 text-yellow-500" />
-          根目录
-        </div>
-        <div 
-          v-for="item in visibleDirs" 
-          :key="item.path"
-          class="flex items-center gap-1 py-1.5 px-2 hover:bg-muted cursor-pointer text-xs group"
-          :class="{ 'bg-accent text-accent-foreground': modelValue === item.path }"
-          :style="{ paddingLeft: (item.depth * 12 + 8) + 'px' }"
-          @click="selectDir(item.path)"
-        >
-          <div @click.stop="toggleExpand(item.path)" class="w-4 h-4 flex items-center justify-center -ml-1 rounded hover:bg-muted-foreground/20">
-            <ChevronDown v-if="expandedDirs.has(item.path)" class="h-3 w-3 shrink-0" />
-            <ChevronRight v-else-if="item.hasChildren" class="h-3 w-3 shrink-0" />
-            <span v-else class="w-3 h-3"></span>
-          </div>
-          <Folder class="h-3 w-3 text-yellow-500 shrink-0" />
-          <span class="truncate">{{ item.name }}</span>
-        </div>
-      </div>
-    </PopoverContent>
-  </Popover>
-</template>

web/src/views/editor/components/FileActionDialogs.vue

@@ -6,7 +6,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog'
 import { Label } from '@/components/ui/label'
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
-import DirSelect from './DirSelect.vue'
+import DirTreeSelect from '@/components/DirTreeSelect.vue'
 import type { FileNode } from '@/api'
 
 const props = defineProps<{
@@ -67,7 +67,7 @@ defineExpose({ openCreate, openDelete, openRename, closeCreate: () => showCreate
       <div class="space-y-3 py-2">
         <div class="space-y-1">
           <Label class="text-xs">位置</Label>
-          <DirSelect v-model="createInDir" :file-tree="fileTree" :default-expand="createParent" />
+          <DirTreeSelect v-model="createInDir" :file-tree="fileTree" :default-expand="createParent" root-label="根目录" />
         </div>
         <RadioGroup v-model="newItemType" class="flex gap-4">
           <div class="flex items-center gap-2">

web/src/views/editor/components/FileSidebar.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { Button } from '@/components/ui/button'
-import { RefreshCw, FileUp, FileArchive, Plus, AlertCircle } from 'lucide-vue-next'
+import { RefreshCw, FileUp, FileArchive, Plus, ArrowDownAZ, ArrowUpZA, Clock, AlertCircle } from 'lucide-vue-next'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 import FileTreeNode from '@/components/FileTreeNode.vue'
 import BaihuDialog from '@/components/ui/BaihuDialog.vue'
 import { type FileNode } from '@/api'
@@ -11,9 +12,11 @@ const props = defineProps<{
   expandedDirs: Set<string>
   selectedPath: string | null
   isRefreshing?: boolean
+  sortMethod: 'name_asc' | 'name_desc' | 'time_desc' | 'time_asc'
 }>()
 
 const emit = defineEmits<{
+  'update:sortMethod': [method: 'name_asc' | 'name_desc' | 'time_desc' | 'time_asc']
   refresh: []
   create: [path: string]
   select: [node: FileNode]
@@ -133,6 +136,36 @@ function handleFilesUpload(e: Event) {
     <div class="flex items-center justify-between p-2 border-b">
       <span class="text-xs font-medium">脚本文件</span>
       <div class="flex gap-1">
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <Button variant="ghost" size="icon" class="h-6 w-6" title="排序">
+              <ArrowDownAZ class="h-3 w-3" v-if="sortMethod === 'name_asc'" />
+              <ArrowUpZA class="h-3 w-3" v-else-if="sortMethod === 'name_desc'" />
+              <Clock class="h-3 w-3" v-else-if="sortMethod === 'time_desc'" />
+              <Clock class="h-3 w-3 rotate-180" v-else />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" class="w-auto min-w-[8rem]">
+            <DropdownMenuRadioGroup :model-value="sortMethod" @update:model-value="v => emit('update:sortMethod', v as any)">
+              <DropdownMenuRadioItem value="name_asc" class="text-xs">
+                <ArrowDownAZ class="h-3.5 w-3.5 mr-2" />
+                名称 (A-Z)
+              </DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="name_desc" class="text-xs">
+                <ArrowUpZA class="h-3.5 w-3.5 mr-2" />
+                名称 (Z-A)
+              </DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="time_desc" class="text-xs">
+                <Clock class="h-3.5 w-3.5 mr-2" />
+                修改时间 (最新)
+              </DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="time_asc" class="text-xs">
+                <Clock class="h-3.5 w-3.5 mr-2 rotate-180" />
+                修改时间 (最旧)
+              </DropdownMenuRadioItem>
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
         <Button variant="ghost" size="icon" class="h-6 w-6" @click="emit('refresh')" :disabled="isRefreshing" title="刷新">
           <RefreshCw class="h-3 w-3" :class="{ 'animate-spin': isRefreshing }" />
         </Button>

web/src/views/scripts/Scripts.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, computed, shallowRef } from 'vue'
+import { ref, onMounted, computed, shallowRef, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -9,6 +9,9 @@ import { RefreshCw, FolderPlus, FilePlus, Save } from 'lucide-vue-next'
 import { api, type FileNode } from '@/api'
 import { VueMonacoEditor } from '@guolao/vue-monaco-editor'
 import FileTreeNode from '@/components/FileTreeNode.vue'
+import DirTreeSelect from '@/components/DirTreeSelect.vue'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
+import { ArrowDownAZ, ArrowUpZA, Clock } from 'lucide-vue-next'
 import { toast } from 'vue-sonner'
 
 const route = useRoute()
@@ -78,10 +81,57 @@ function expandParentDirs(filePath: string) {
   }
 }
 
+// Sorting state
+type SortMethod = 'name_asc' | 'name_desc' | 'time_desc' | 'time_asc'
+const sortMethod = ref<SortMethod>('name_asc')
+
+function sortTree(nodes: FileNode[]) {
+  nodes.sort((a, b) => {
+    // 文件夹始终排在前面
+    if (a.isDir && !b.isDir) return -1
+    if (!a.isDir && b.isDir) return 1
+    
+    switch (sortMethod.value) {
+      case 'name_asc':
+        return a.name.localeCompare(b.name)
+      case 'name_desc':
+        return b.name.localeCompare(a.name)
+      case 'time_desc':
+        return (b.modTime || 0) - (a.modTime || 0)
+      case 'time_asc':
+        return (a.modTime || 0) - (b.modTime || 0)
+      default:
+        return 0
+    }
+  })
+  
+  for (const node of nodes) {
+    if (node.children) {
+      sortTree(node.children)
+    }
+  }
+}
+
+watch(sortMethod, (newVal) => {
+  sortTree(fileTree.value)
+  api.settings.setSection('ui', { file_sort_method: newVal }).catch(() => {})
+})
+
+async function initSortMethod() {
+  try {
+    const val = await api.settings.get('ui', 'file_sort_method')
+    if (val && ['name_asc', 'name_desc', 'time_desc', 'time_asc'].includes(val)) {
+      sortMethod.value = val as SortMethod
+    }
+  } catch {}
+}
+
 async function loadTree() {
   loading.value = true
   try {
-    fileTree.value = await api.files.tree()
+    const nodes = await api.files.tree()
+    sortTree(nodes)
+    fileTree.value = nodes
 
     // 仅在首次加载时从 URL 恢复状态
     if (expandedDirs.value.size === 0 && selectedFile.value === null && selectedDir.value === null) {
@@ -307,7 +357,10 @@ async function handleCopyFile(path: string) {
   }
 }
 
-onMounted(loadTree)
+onMounted(async () => {
+  await initSortMethod()
+  loadTree()
+})
 </script>
 
 <template>
@@ -317,6 +370,36 @@ onMounted(loadTree)
       <div class="p-2 border-b flex items-center justify-between">
         <span class="text-sm font-medium pl-1">脚本文件</span>
         <div class="flex gap-0.5">
+          <DropdownMenu>
+            <DropdownMenuTrigger as-child>
+              <Button variant="ghost" size="icon" class="h-6 w-6" title="排序">
+                <ArrowDownAZ class="h-3 w-3" v-if="sortMethod === 'name_asc'" />
+                <ArrowUpZA class="h-3 w-3" v-else-if="sortMethod === 'name_desc'" />
+                <Clock class="h-3 w-3" v-else-if="sortMethod === 'time_desc'" />
+                <Clock class="h-3 w-3 rotate-180" v-else />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" class="w-auto min-w-[8rem]">
+              <DropdownMenuRadioGroup v-model="sortMethod">
+                <DropdownMenuRadioItem value="name_asc" class="text-xs">
+                  <ArrowDownAZ class="h-3.5 w-3.5 mr-2" />
+                  名称 (A-Z)
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="name_desc" class="text-xs">
+                  <ArrowUpZA class="h-3.5 w-3.5 mr-2" />
+                  名称 (Z-A)
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="time_desc" class="text-xs">
+                  <Clock class="h-3.5 w-3.5 mr-2" />
+                  修改时间 (最新)
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="time_asc" class="text-xs">
+                  <Clock class="h-3.5 w-3.5 mr-2 rotate-180" />
+                  修改时间 (最旧)
+                </DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
           <Button variant="ghost" size="icon" class="h-6 w-6" title="新建文件" @click="openCreateDialog('file')">
             <FilePlus class="h-3 w-3" />
           </Button>
@@ -379,8 +462,9 @@ onMounted(loadTree)
           </DialogTitle>
         </DialogHeader>
         <div class="py-2 space-y-2">
-          <div v-if="selectedDir" class="text-xs text-muted-foreground">
+          <div class="space-y-1">
-            位置: {{ selectedDir }}/
+            <div class="text-xs text-muted-foreground mb-1">选择目录</div>
+            <DirTreeSelect v-model="selectedDir" :file-tree="fileTree" :default-expand="selectedDir || ''" root-label="根目录" />
           </div>
           <Input v-model="createName" class="h-9 text-sm"
             :placeholder="createType === 'file' ? 'example.js' : 'folder-name'" @keyup.enter="createItem" />