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

feat(ui): optimize file tree node hover tooltip with shadcn component

Browse Source
This commit is contained in:
duorameng
2026-06-18 09:52:48 +08:00
parent 562b7a1704
commit 15f9c47cb4
1 changed files with 11 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/FileTreeNode.vue
+11 -1
View File
@@ -2,6 +2,7 @@
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import { Folder, File, ChevronRight, ChevronDown, Trash2, Copy as CopyIcon, Download } from 'lucide-vue-next' import { Folder, File, ChevronRight, ChevronDown, Trash2, Copy as CopyIcon, Download } from 'lucide-vue-next'
import type { FileNode } from '@/api' import type { FileNode } from '@/api'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
defineOptions({ defineOptions({
name: 'FileTreeNode' name: 'FileTreeNode'
@@ -87,7 +88,16 @@ function handleDrop(e: DragEvent) {
<span v-else class="w-3" /> <span v-else class="w-3" />
<Folder v-if="node.isDir" class="h-3 w-3 text-yellow-500 flex-shrink-0" /> <Folder v-if="node.isDir" class="h-3 w-3 text-yellow-500 flex-shrink-0" />
<File v-else class="h-3 w-3 text-blue-500 flex-shrink-0" /> <File v-else class="h-3 w-3 text-blue-500 flex-shrink-0" />
<span class="truncate">{{ node.name }}</span> <TooltipProvider :delay-duration="400">
<Tooltip>
<TooltipTrigger as-child>
<span class="truncate">{{ node.name }}</span>
</TooltipTrigger>
<TooltipContent side="top" :side-offset="5" class="max-w-[300px] break-all px-2 py-1">
<p class="text-xs">{{ node.name }}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<div v-if="!node.isDir" <div v-if="!node.isDir"
class="opacity-0 group-hover:opacity-100 flex items-center gap-1 ml-auto shrink-0 pr-1 transition-opacity"> class="opacity-0 group-hover:opacity-100 flex items-center gap-1 ml-auto shrink-0 pr-1 transition-opacity">
<span @click.stop="$emit('duplicate', node.path)" class="cursor-pointer text-blue-500 hover:text-blue-500/80" <span @click.stop="$emit('duplicate', node.path)" class="cursor-pointer text-blue-500 hover:text-blue-500/80"