Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-12 09:18:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(sidebar): 删除回退键，修复选中未高亮的问题 #1

Browse Source
This commit is contained in:
BTMuli
2023-03-23 21:54:18 +08:00
parent c5fc2b5676
commit f8fcd9c130
1 changed files with 37 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/t-sidebar.vue
View File

@@ -1,43 +1,53 @@
<template> <template>
<!-- todo 侧边栏宽度调整 --> <!-- todo 侧边栏宽度调整 -->
<v-navigation-drawer permanent :rail="rail"> <v-navigation-drawer permanent :rail="rail">
<!-- todo 选中没有高亮 --> <v-list class="sideList" density="compact" v-model:opened="open" nav>
<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 @click="collapse">
<template v-slot:prepend v-if="rail">
<v-list-item-action> <v-list-item-action>
<v-icon color="rgb(205, 182, 145)">mdi-menu</v-icon> <v-icon color="rgb(205, 182, 145)">mdi-chevron-right</v-icon>
</v-list-item-action> </v-list-item-action>
</template>
<template v-slot:append v-else>
<v-list-item-action>
<v-icon color="rgb(205, 182, 145)">mdi-chevron-left</v-icon>
</v-list-item-action>
</template>
</v-list-item> </v-list-item>
<!-- 菜单项 --> <!-- 菜单项 -->
<v-list-item link href="/" title="首页"> <v-list-item value="home" title="首页" @click="toPage('home')">
<template v-slot:prepend> <template v-slot:prepend>
<img src="/source/UI/paimon.webp" alt="homeIcon" class="sideIcon" /> <img src="/source/UI/paimon.webp" alt="homeIcon" class="sideIcon" />
</template> </template>
</v-list-item> </v-list-item>
<v-list-item link href="/news" title="咨讯"> <v-list-item title="咨讯" value="news" @click="toPage('news')">
<template v-slot:prepend> <template v-slot:prepend>
<img src="../assets/icons/board.svg" alt="newsIcon" class="sideIcon" /> <img src="../assets/icons/board.svg" alt="newsIcon" class="sideIcon" />
</template> </template>
</v-list-item> </v-list-item>
<v-list-item link href="/achievements" title="成就"> <v-list-item title="成就" value="achievements" @click="toPage('achievements')">
<template v-slot:prepend> <template v-slot:prepend>
<img src="../assets/icons/achievements.svg" alt="achievementsIcon" class="sideIcon" /> <img src="../assets/icons/achievements.svg" alt="achievementsIcon" class="sideIcon" />
</template> </template>
</v-list-item> </v-list-item>
<v-list-item link href="/GCG" title="GCG"> <v-divider></v-divider>
<v-list-group value="database" fluid>
<template v-slot:activator="{ props }">
<v-list-item title="数据库" v-bind="props">
<template v-slot:prepend>
<v-icon color="rgb(205, 182, 145)">mdi-database</v-icon>
</template>
</v-list-item>
</template>
<v-list-item title="GCG" value="GCG" @click="toPage('GCG')">
<template v-slot:prepend> <template v-slot:prepend>
<img src="../assets/icons/GCG.svg" alt="gcgIcon" class="sideIcon" /> <img src="../assets/icons/GCG.svg" alt="gcgIcon" class="sideIcon" />
</template> </template>
</v-list-item> </v-list-item>
<v-list-item link href="/config" title="设置"> </v-list-group>
<v-divider></v-divider>
<v-list-item title="设置" value="config" @click="toPage('config')">
<template v-slot:prepend> <template v-slot:prepend>
<img src="../assets/icons/setting.svg" alt="setting" class="sideIcon" /> <img src="../assets/icons/setting.svg" alt="setting" class="sideIcon" />
</template> </template>
@@ -55,26 +65,23 @@ const router = useRouter();
const appStore = useAppStore(); const appStore = useAppStore();
const rail = ref(appStore.sidebar); const rail = ref(appStore.sidebar);
const open = ref(["database"]);
const back = () => {
try {
router.back();
} catch (e) {
console.error(e);
}
};
function collapse() { function collapse() {
rail.value = !rail.value; rail.value = !rail.value;
appStore.sidebar = rail.value; appStore.sidebar = rail.value;
} }
function toPage(link: string) {
router.push(link);
}
</script> </script>
<style lang="css"> <style lang="css">
.sideList { .sideList {
font-family: "Genshin", serif; font-family: "Genshin", serif;
/* 磨砂 */
backdrop-filter: blur(10px);
} }
.sideIcon { .sideIcon {
width: 24px; width: 24px;
height: 24px; height: 24px;