FileNode.vue
2.45 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
<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>
</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)"
/>
</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'])
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 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.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); }
</style>