57 lines
1.1 KiB
Vue
57 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import type { PlayerTreeNode } from '@engine/types'
|
|
|
|
defineProps<{
|
|
node: PlayerTreeNode
|
|
depth: number
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="tree-row" :style="{ paddingLeft: depth * 16 + 'px' }">
|
|
<span class="tree-icon">{{ node.visited ? '✅' : node.locked ? '🔒' : '⬜' }}</span>
|
|
<span class="tree-label" :class="{ visited: node.visited }">{{ node.label }}</span>
|
|
<span v-if="node.locked && node.lockHint" class="tree-hint">{{ node.lockHint }}</span>
|
|
</div>
|
|
<TreeNode
|
|
v-for="child in node.children"
|
|
:key="node.sceneId + '-' + child.sceneId"
|
|
:node="child"
|
|
:depth="depth + 1"
|
|
/>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.tree-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 3px 6px;
|
|
font-size: 11px;
|
|
border-left: 1px solid rgba(255, 255, 255, 0.1);
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.tree-icon {
|
|
font-size: 11px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tree-label {
|
|
color: #aaa;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.tree-label.visited {
|
|
color: #ddd;
|
|
}
|
|
|
|
.tree-hint {
|
|
font-size: 10px;
|
|
color: #ff9800;
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|