mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-13 09:28:14 +08:00
84 lines
2.2 KiB
Vue
84 lines
2.2 KiB
Vue
<template>
|
||
<!-- todo 侧边栏宽度调整 -->
|
||
<v-navigation-drawer permanent :rail="rail">
|
||
<!-- todo 选中没有高亮 -->
|
||
<v-list class="sideList">
|
||
<!-- 第一个图标，负责返回上一个页面 -->
|
||
<!-- todo 如果没有上一个页面，则灰色不可点击 -->
|
||
<v-list-item @click="back">
|
||
<v-list-item-action>
|
||
<v-icon color="rgb(205, 182, 145)">mdi-arrow-left</v-icon>
|
||
</v-list-item-action>
|
||
</v-list-item>
|
||
<!-- 第二个图标，负责收缩侧边栏 -->
|
||
<v-list-item @click="collapse">
|
||
<v-list-item-action>
|
||
<v-icon color="rgb(205, 182, 145)">mdi-menu</v-icon>
|
||
</v-list-item-action>
|
||
</v-list-item>
|
||
<!-- 菜单项 -->
|
||
<v-list-item link href="/" title="首页">
|
||
<template v-slot:prepend>
|
||
<img src="/source/UI/paimon.webp" alt="homeIcon" class="sideIcon" />
|
||
</template>
|
||
</v-list-item>
|
||
<v-list-item link href="/news" title="咨讯">
|
||
<template v-slot:prepend>
|
||
<img src="../assets/icons/board.svg" alt="newsIcon" class="sideIcon" />
|
||
</template>
|
||
</v-list-item>
|
||
<v-list-item link href="/achievements" title="成就">
|
||
<template v-slot:prepend>
|
||
<img src="../assets/icons/achievements.svg" alt="achievementsIcon" class="sideIcon" />
|
||
</template>
|
||
</v-list-item>
|
||
<v-list-item link href="/GCG" title="GCG">
|
||
<template v-slot:prepend>
|
||
<img src="../assets/icons/GCG.svg" alt="gcgIcon" class="sideIcon" />
|
||
</template>
|
||
</v-list-item>
|
||
<v-list-item link href="/config" title="设置">
|
||
<template v-slot:prepend>
|
||
<img src="../assets/icons/setting.svg" alt="setting" class="sideIcon" />
|
||
</template>
|
||
</v-list-item>
|
||
</v-list>
|
||
</v-navigation-drawer>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref } from "vue";
|
||
import { useRouter } from "vue-router";
|
||
import useAppStore from "../store/modules/app";
|
||
|
||
const router = useRouter();
|
||
const appStore = useAppStore();
|
||
|
||
const rail = ref(appStore.sidebar);
|
||
|
||
const back = () => {
|
||
try {
|
||
router.back();
|
||
} catch (e) {
|
||
console.error(e);
|
||
}
|
||
};
|
||
function collapse() {
|
||
rail.value = !rail.value;
|
||
appStore.sidebar = rail.value;
|
||
}
|
||
</script>
|
||
|
||
<style lang="css">
|
||
.sideList {
|
||
font-family: "Genshin", serif;
|
||
/* 磨砂 */
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
.sideIcon {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin-right: 32px;
|
||
}
|
||
</style>
|