mirror of
https://github.com/linux-odyssey/linux-odyssey.git
synced 2026-11-08 03:20:12 +08:00
feat: add box shadow to pwd node
This commit is contained in:
1 parent
54592831ee
commit
6c70a6eaea
2 files changed
+17
-3
No files matched your search
@@ -2,7 +2,7 @@
|
|||||||
<a href="#" :class="nodeClass()">{{ node.discovered ? node.name : '???' }}</a>
|
<a href="#" :class="nodeClass()">{{ node.discovered ? node.name : '???' }}</a>
|
||||||
<ul :class="nodeClass()" v-if="node.children && node.children.length > 0">
|
<ul :class="nodeClass()" v-if="node.children && node.children.length > 0">
|
||||||
<li :class="nodeClass()" v-for="child in node.children" :key="child.path">
|
<li :class="nodeClass()" v-for="child in node.children" :key="child.path">
|
||||||
<FileNode :node="child" />
|
<FileNode :node="child" :pwd="pwd" />
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</template>
|
</template>
|
||||||
@@ -13,9 +13,17 @@ const props = defineProps({
|
|||||||
type: Object,
|
type: Object,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
|
pwd: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
function nodeClass() {
|
function nodeClass() {
|
||||||
return props.node.discovered ? 'discovered' : ''
|
const classes = []
|
||||||
|
if (props.node.discovered) classes.push('discovered')
|
||||||
|
if (props.node.path === props.pwd) classes.push('pwd')
|
||||||
|
return classes
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -3,6 +3,8 @@ import { onMounted, ref } from 'vue'
|
|||||||
import FileNode from './FileNode.vue'
|
import FileNode from './FileNode.vue'
|
||||||
import socket from '../utils/socket.js'
|
import socket from '../utils/socket.js'
|
||||||
|
|
||||||
|
const pwd = ref('/home/rudeus')
|
||||||
|
|
||||||
const graph = ref({
|
const graph = ref({
|
||||||
path: '/',
|
path: '/',
|
||||||
name: '/',
|
name: '/',
|
||||||
@@ -66,7 +68,7 @@ onMounted(() => {
|
|||||||
<div class="tree w-max h-max">
|
<div class="tree w-max h-max">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<FileNode :node="graph" />
|
<FileNode :node="graph" :pwd="pwd" />
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
@@ -175,4 +177,8 @@ ul.discovered,
|
|||||||
li.discovered {
|
li.discovered {
|
||||||
border-color: #94a0b4;
|
border-color: #94a0b4;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a.pwd {
|
||||||
|
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* 水平偏移、垂直偏移、模糊半徑、顏色 */
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in new issue
Block a user