You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
1.4 KiB
59 lines
1.4 KiB
<template>
|
|
<div class="cat-node" :style="{ paddingLeft: depth * 16 + 'px' }">
|
|
<div
|
|
class="nav-item"
|
|
:class="{ active: currentId === category.id }"
|
|
@click="$emit('select', category.id)"
|
|
>
|
|
<span>{{ category.icon || '📁' }}</span>
|
|
{{ category.name }}
|
|
<span v-if="category.itemCount" class="nav-badge">{{ category.itemCount }}</span>
|
|
</div>
|
|
<CategoryTreeNode
|
|
v-for="child in category.children"
|
|
:key="child.id"
|
|
:category="child"
|
|
:depth="depth + 1"
|
|
:current-id="currentId"
|
|
@select="$emit('select', $event)"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
category: any;
|
|
depth: number;
|
|
currentId?: number | null;
|
|
}>();
|
|
|
|
defineEmits<{
|
|
select: [id: number];
|
|
}>();
|
|
</script>
|
|
|
|
<style scoped>
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 7px 8px;
|
|
border-radius: 7px;
|
|
cursor: pointer;
|
|
color: var(--text2);
|
|
font-size: 13px;
|
|
transition: background 0.15s, color 0.15s;
|
|
}
|
|
.nav-item:hover { background: var(--bg3); color: var(--text); }
|
|
.nav-item.active { background: var(--accent-bg); color: var(--accent); }
|
|
.nav-badge {
|
|
margin-left: auto;
|
|
background: var(--bg4);
|
|
color: var(--text3);
|
|
font-size: 10px;
|
|
padding: 1px 6px;
|
|
border-radius: 10px;
|
|
font-family: var(--font-mono);
|
|
}
|
|
.nav-item.active .nav-badge { background: rgba(200, 169, 126, 0.2); color: var(--accent); }
|
|
</style>
|
|
|