admin/TaskPool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
duorameng
2026-06-10 17:33:23 +08:00
parent bf2cc7da0e
commit b1509a3afb
8 changed files with 225 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/api/index.ts
+1
View File
@@ -377,6 +377,7 @@ export interface FileNode {
name: string
path: string
isDir: boolean
modTime: number
children?: FileNode[]
}
web/src/components/DirTreeSelect.vue
+36 -20
View File
@@ -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 (默认)'
// 如果是绝对路径，只显示最后部分
const parts = props.modelValue.split('/')
const lastPart = parts[parts.length - 1]
// 如果是 scripts 目录本身
if (lastPart === 'scripts') return 'scripts (默认)'
return lastPart || props.modelValue
if (!props.modelValue || props.modelValue === '/') return props.placeholder || getRootLabel()
if (isDefaultSelected() && !props.rootLabel) return 'scripts (默认)'
return props.modelValue
})
</script>
<template>
<Popover v-model:open="open">
<PopoverTrigger as-child>
<Button variant="outline" class="w-full justify-start text-sm h-9">
<Folder class="h-4 w-4 mr-2 text-yellow-500 shrink-0" />
<Button variant="outline" class="w-full justify-start text-xs h-8 font-normal">
<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" />
<span>scripts (默认)</span>
<FolderOpen class="h-3.5 w-3.5 text-yellow-500" />
<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
+52 -19
View File
@@ -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
-104
View File
@@ -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
+2 -2
View File
@@ -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
+34 -1
View File
@@ -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
+89 -5
View File
@@ -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">
位置: {{ selectedDir }}/
<div class="space-y-1">
<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" />