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

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(() => {
-  initFromUrl(); fetchPaths(); fetchInstalledLangs()
+onMounted(async () => {
+  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>