69 lines
1.5 KiB
Vue
69 lines
1.5 KiB
Vue
<template>
|
|
<!-- treeview -->
|
|
<div class="vcd-treeview">
|
|
<TreeViewSearch></TreeViewSearch>
|
|
<div class="vcd-module-wrapper">
|
|
<div class="vcd-module-info">
|
|
<div class="vcd-signal-title">{{ t('module') }}</div>
|
|
<hr>
|
|
<el-scrollbar height="86vh" style="padding-right: 7px;">
|
|
<Modules v-for="mod of VcdInfo.topModules"
|
|
:key="mod.name"
|
|
:module="mod"
|
|
></Modules>
|
|
</el-scrollbar>
|
|
</div>
|
|
<div class="vcd-module-wires">
|
|
<Signals></Signals>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineComponent } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
import TreeViewSearch from '@/components/treeview/search.vue';
|
|
import Modules from '@/components/treeview/modules.vue';
|
|
import Signals from '@/components/treeview/signals.vue';
|
|
|
|
import { VcdInfo } from '@/hook/global';
|
|
|
|
defineComponent({ name: 'tree-view' });
|
|
const { t } = useI18n();
|
|
|
|
</script>
|
|
|
|
<style>
|
|
.vcd-module-info {
|
|
width: 200px;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.vcd-module-wires {
|
|
width: 220px;
|
|
}
|
|
|
|
|
|
.vcd-treeview {
|
|
background-color: var(--sidebar);
|
|
padding: 10px 10px 10px 10px;
|
|
height: 98vh;
|
|
border-radius: 1.0em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: height .5s ease-in-out;
|
|
user-select: none;
|
|
}
|
|
|
|
.vcd-module-wrapper {
|
|
flex: 1;
|
|
display: flex;
|
|
z-index: 5;
|
|
max-height: 99vh;
|
|
/* overflow: scroll; */
|
|
transition: flex .5s ease-in-out;
|
|
}
|
|
|
|
</style> |