Files
frost-navigation/src/components/AppAside.vue

142 lines
2.3 KiB
Vue

<template>
<!-- 侧边栏 -->
<div class="app-aside">
<div class="app-icon-wrapper">
<div class="app-icon"></div>
</div>
<div class="app-modules">
<div
v-for="item in modules"
:key="item.name"
:title="item.title"
:class="{
'is-active': (currRouteName === item.name),
'module-item': true,
}"
@click="changePage(item.name)"
>
<span :class="item.className"></span>
</div>
</div>
</div>
</template>
<script setup>
import {
computed, shallowRef, onBeforeMount,
} from 'vue';
import {
useRoute, useRouter,
} from 'vue-router';
/** 当前路由名称 */
const currRouteName = computed(() => {
return route.name;
});
/**
* @desc 模块列表
* @type {VueRef<{ className: string; name: string; title: string; }[]>}
*/
const modules = shallowRef([]);
/** 路由 */
const route = useRoute();
/** 路由 */
const router = useRouter();
/** 切换页面 */
function changePage(routeName = '') {
router.push({ name: routeName });
}
/** 初始化数据 */
function initData() {
/** @type {typeof modules.value} */
let list = [];
// 提取路由信息
router.getRoutes().forEach((item) => {
let m = item.meta;
if (m.showInAside) {
list.push({
className: m.iconClass,
name: item.name,
title: m.title,
});
}
});
modules.value = list;
}
onBeforeMount(() => {
initData();
});
</script>
<style lang="less" scoped>
.app-aside {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.app-icon-wrapper {
display: flex;
flex-direction: column;
margin-top: 24px;
}
.app-icon {
margin: auto;
width: 32px;
height: 32px;
background-image: url("/favicon.ico");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.app-modules {
display: flex;
flex-direction: column;
margin-top: 48px;
}
.module-item {
display: flex;
margin: 0 auto;
width: 1.8em;
height: 1.8em;
border-radius: 50%;
color: #808080;
font-size: 24px;
cursor: pointer;
&:not(:first-child) {
margin-top: 10px;
}
&:hover, &.is-active {
background-color: #F2F2F2;
color: var(--color-primary);
}
span {
margin: auto;
}
}
</style>