wancat/linux-odyssey
1
0 Fork 0
mirror of https://github.com/linux-odyssey/linux-odyssey.git synced 2026-11-08 03:20:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: display tree by data

Browse Source 
+ show discovered as highlight
+ BREAKING: cannot hightlight lines
This commit is contained in:
wancat committed 2023-08-28 19:36:38 +08:00
1 parent 9da4d4edaa
commit 45813ebbc0
2 files changed
+80 -54
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/src/components/FileNode.vue
+21
View File
@@ -0,0 +1,21 @@
<template>
<a href="#" :class="nodeClass()">{{ node.discovered ? node.name : '???' }}</a>
<ul :class="nodeClass()" v-if="node.children && node.children.length > 0">
<li :class="nodeClass()" v-for="child in node.children" :key="child.path">
<FileNode :node="child" />
</li>
</ul>
</template>
<script setup>
const props = defineProps({
node: {
type: Object,
required: true,
},
})
function nodeClass() {
return props.node.discovered ? 'discovered' : ''
}
</script>
app/src/components/TreeChart.vue
+59 -54
View File
@@ -1,56 +1,64 @@
<script setup></script> <script setup>
import { ref } from 'vue'
import FileNode from './FileNode.vue'
const graph = ref({
path: '/',
name: '/',
type: 'folder',
discovered: false,
children: [
{
path: '/home',
name: 'home',
type: 'folder',
discovered: false,
children: [
{
path: '/home/rudeus',
name: 'rudeus',
type: 'folder',
discovered: true,
children: [
{
path: '/home/rudeus/secret',
name: 'secret',
type: 'file',
discovered: true,
},
{
path: '/home/rudeus/box',
name: 'box',
type: 'folder',
discovered: true,
children: [
{
path: '/home/rudeus/box/scroll',
name: 'scroll',
type: 'file',
discovered: false,
},
],
},
],
},
],
},
{
path: '/etc',
name: 'etc',
type: 'folder',
discovered: false,
},
],
})
</script>
<template> <template>
<div class="tree w-max h-max"> <div class="tree w-max h-max">
<ul> <ul>
<li> <li>
<a href="#">Parent</a> <FileNode :node="graph" />
<ul>
<li>
<a href="#">Child</a>
<ul>
<li>
<a href="#">Grand Child</a>
</li>
</ul>
</li>
<li>
<a href="#">Child</a>
<ul>
<li><a href="#">Grand Child</a></li>
<li>
<a href="#">Grand Child</a>
<ul>
<li>
<a href="#">Great Grand Child</a>
</li>
<li>
<a href="#">Great Grand Child</a>
</li>
<li>
<a href="#">Great Grand Child</a>
<ul>
<li><a>Grand Child</a></li>
<li>
<a>Grand Child</a>
<ul>
<li>
<a>Great Grand Child</a>
</li>
<li>
<a>Great Grand Child</a>
</li>
</ul>
</li>
<li><a>Grand Child</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Grand Child</a></li>
</ul>
</li>
</ul>
</li> </li>
</ul> </ul>
</div> </div>
@@ -149,17 +157,14 @@
-moz-transition: all 0.5s; -moz-transition: all 0.5s;
} }
.tree li a:hover, a.discovered {
.tree li a:hover + ul li a {
background: #c8e4f8; background: #c8e4f8;
color: #000; color: #000;
border: 1px solid #94a0b4; border: 1px solid #94a0b4;
} }
.tree li a:hover + ul li::after, ul.discovered,
.tree li a:hover + ul li::before, li.discovered {
.tree li a:hover + ul::before,
.tree li a:hover + ul ul::before {
border-color: #94a0b4; border-color: #94a0b4;
} }
</style> </style>