138 lines
3.3 KiB
Vue
138 lines
3.3 KiB
Vue
<template>
|
|
<div class="vcd-right-nav">
|
|
|
|
<div class="vcd-function-panel">
|
|
<TreeView :topModules="props.topModules"
|
|
v-show="controlPanel.currentIndex === 0"></TreeView>
|
|
<Setting
|
|
v-show="controlPanel.currentIndex === 1"></Setting>
|
|
<About
|
|
v-show="controlPanel.currentIndex === 2"></About>
|
|
</div>
|
|
|
|
<div class="vcd-function-option">
|
|
<div class="vcd-control-panel-wrapper">
|
|
<img class="vcd-control-panel-icon" src="../assets/icon.png" alt="">
|
|
</div>
|
|
<hr>
|
|
<div class="vcd-control-panel-wrapper"
|
|
v-for="(section, index) of controlPanel.sections" :key="index"
|
|
@click="controlPanel.click(index)"
|
|
>
|
|
<div :class="controlPanel.currentIndex === index ? 'vcd-control-panel-active': ''"><span
|
|
class="vcd-control-panel-icon"
|
|
:class="section.iconClass"
|
|
></span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { reactive } from 'vue';
|
|
|
|
import TreeView from '@/components/treeview';
|
|
import Setting from '@/components/setting';
|
|
import About from '@/components/about';
|
|
import { emitter } from '@/hook/global';
|
|
|
|
|
|
export default {
|
|
name: 'right-nav',
|
|
components: {
|
|
TreeView,
|
|
Setting,
|
|
About
|
|
},
|
|
props: {
|
|
topModules: Array
|
|
},
|
|
setup(props) {
|
|
|
|
const controlPanel = reactive({
|
|
sections: [
|
|
{
|
|
iconClass: 'iconfont icon-Collections'
|
|
},
|
|
{
|
|
iconClass: 'iconfont icon-setting'
|
|
},
|
|
{
|
|
iconClass: 'iconfont icon-about'
|
|
}
|
|
],
|
|
currentIndex: -1,
|
|
click(index) {
|
|
if (this.currentIndex === index) {
|
|
this.currentIndex = -1;
|
|
} else {
|
|
this.currentIndex = index;
|
|
}
|
|
|
|
// console.log(this.currentIndex);
|
|
}
|
|
});
|
|
|
|
emitter.on('right-nav', index => {
|
|
if (controlPanel.currentIndex === index) {
|
|
controlPanel.currentIndex = -1;
|
|
} else {
|
|
controlPanel.currentIndex = index;
|
|
}
|
|
})
|
|
|
|
return {
|
|
props,
|
|
controlPanel
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.vcd-right-nav {
|
|
display: flex;
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 60;
|
|
}
|
|
|
|
.vcd-function-panel {
|
|
display: flex;
|
|
background-color: var(--sidebar);
|
|
height: 100vh;
|
|
box-shadow: 0 0 15px 1px rgb(16, 16, 16);
|
|
}
|
|
|
|
.vcd-function-option {
|
|
width: fit-content;
|
|
height: 100vh;
|
|
background-color: var(--sidebar);
|
|
box-shadow: 0 0 15px 1px rgb(16, 16, 16);
|
|
}
|
|
|
|
.vcd-control-panel-wrapper {
|
|
width: var(--right-nav-width);
|
|
height: var(--right-nav-width);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
cursor: pointer;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.vcd-control-panel-wrapper:hover {
|
|
color: var(--vscode-icon-foreground);
|
|
}
|
|
|
|
.vcd-control-panel-icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
font-size: 35px;
|
|
}
|
|
|
|
.vcd-control-panel-active {
|
|
color: var(--main-color);
|
|
}
|
|
</style> |