FileNode.vue
3.19 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<template>
<div>
<div
class="tree-node"
:style="{ paddingLeft: depth * 14 + 6 + 'px' }"
:class="{ 'is-dir': node.type === 'dir', 'is-file': node.type === 'file', active: selected === node.path }"
@click="handleClick"
>
<span class="tree-icon">{{ node.type === 'dir' ? (expanded ? '๐' : '๐') : fileIcon }}</span>
<span class="tree-name">{{ node.name }}</span>
<span v-if="node.type === 'file'" class="tree-size">{{ formatSize(node.size) }}</span>
<span v-if="node.type === 'dir'" class="tree-count">{{ node.count }}</span>
<button class="tree-delete-btn" title="ๅ ้ค" @click.stop="handleDelete">๐</button>
</div>
<template v-if="node.type === 'dir' && expanded && node.children">
<FileNode
v-for="child in node.children"
:key="child.path"
:node="child"
:depth="depth + 1"
:selected="selected"
@select="(p) => $emit('select', p)"
@delete="(p) => $emit('delete', p)"
/>
</template>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const props = defineProps({
node: { type: Object, required: true },
depth: { type: Number, default: 0 },
selected: { type: String, default: null },
})
const emit = defineEmits(['select', 'delete'])
const expanded = ref(props.depth < 1)
const fileIcon = computed(() => {
const ext = props.node.name.split('.').pop()?.toLowerCase()
const icons = { md: '๐', json: 'โ๏ธ', js: '๐', py: '๐', yml: '๐', yaml: '๐', log: '๐', txt: '๐' }
return icons[ext] || '๐'
})
function handleClick() {
if (props.node.type === 'dir') {
expanded.value = !expanded.value
} else {
emit('select', props.node.path)
}
}
function handleDelete() {
const label = props.node.type === 'dir' ? `ๆไปถๅคน "${props.node.name}" ๅๅ
ถๆๆๅ
ๅฎน` : `ๆไปถ "${props.node.name}"`
if (confirm(`็กฎๅฎๅ ้ค${label}๏ผๆญคๆไฝไธๅฏๆค้ใ`)) {
emit('delete', props.node.path)
}
}
function formatSize(bytes) {
if (!bytes) return ''
if (bytes < 1024) return `${bytes}B`
return `${(bytes / 1024).toFixed(1)}K`
}
</script>
<style scoped>
.tree-node {
display: flex; align-items: center; gap: 4px;
padding: 3px 6px; cursor: pointer; border-radius: 4px;
transition: background 0.1s; user-select: none;
}
.tree-node:hover { background: var(--bg-surface-hover); }
.tree-node:hover .tree-delete-btn { opacity: 1; }
.tree-node.active { background: var(--bg-surface-active); }
.tree-icon { font-size: 12px; flex-shrink: 0; width: 16px; text-align: center; }
.tree-name {
font-size: 11px; color: var(--text-secondary); flex: 1;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.is-dir .tree-name { font-weight: 600; color: var(--text-primary); }
.tree-size { font-size: 9px; color: var(--text-faint); font-family: 'JetBrains Mono', monospace; }
.tree-count { font-size: 9px; color: var(--text-faint); }
.tree-delete-btn {
opacity: 0; border: none; background: transparent; cursor: pointer;
font-size: 10px; padding: 1px 3px; border-radius: 3px;
transition: all 0.15s; flex-shrink: 0; line-height: 1;
}
.tree-delete-btn:hover { background: rgba(239,68,68,0.15); transform: scale(1.15); }
</style>