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

feat(sidebar): 支持各种游戏咨讯获取

Browse Source 
Signed-off-by: BTMuli <BT-Muli@outlook.com>
This commit is contained in:
BTMuli
2023-04-05 12:20:40 +08:00
parent f8a2343d28
commit 1fafbd4612
8 changed files with 173 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,11 +20,57 @@
<img src="/source/UI/paimon.webp" alt="homeIcon" class="sideIcon" />
</template>
</v-list-item>
<v-list-item title="公告" value="news" link href="/news">
<v-list-item title="公告" value="announcements" link href="/announcements">
<template v-slot:prepend>
<img src="../assets/icons/board.svg" alt="annoIcon" class="sideIcon" />
</template>
</v-list-item>
<v-divider></v-divider>
<v-list-group value="mihoyo" fluid>
<template v-slot:activator="{ props }">
<v-list-item title="米游社" v-bind="props">
<template v-slot:prepend>
<img src="/platforms/mhy/mys.webp" alt="mihoyo" class="sideIcon" />
</template>
</v-list-item>
</template>
<v-list-item title="原神" value="mhy-ys" link href="/news/2">
<template v-slot:prepend>
<img src="/platforms/mhy/ys.webp" alt="ys" class="sideIcon" />
</template>
</v-list-item>
<v-list-item title="崩坏3" value="mhy-bh3" link href="/news/1">
<template v-slot:prepend>
<img src="/platforms/mhy/bh3.webp" alt="bh3" class="sideIcon" />
</template>
</v-list-item>
<v-list-item title="崩坏2" value="mhy-bh2" link href="/news/3">
<template v-slot:prepend>
<img src="/platforms/mhy/bh2.webp" alt="bh2" class="sideIcon" />
</template>
</v-list-item>
<v-list-item title="未定事件簿" value="mhy-wd" link href="/news/4">
<template v-slot:prepend>
<img src="/platforms/mhy/wd.webp" alt="wd" class="sideIcon" />
</template>
</v-list-item>
<v-list-item title="星穹铁道" value="mhy-sr" link href="/news/6">
<template v-slot:prepend>
<img src="/platforms/mhy/sr.webp" alt="sr" class="sideIcon" />
</template>
</v-list-item>
<v-list-item title="绝区零" value="mhy-zzz" link href="/news/8">
<template v-slot:prepend>
<img src="/platforms/mhy/zzz.webp" alt="zzz" class="sideIcon" />
</template>
</v-list-item>
<v-list-item title="大别野" value="mhy-dby" link href="/news/5">
<template v-slot:prepend>
<img src="/platforms/mhy/dby.webp" alt="dby" class="sideIcon" />
</template>
</v-list-item>
</v-list-group>
<v-divider></v-divider>
<v-list-item title="成就" value="achievements" link href="/achievements">
<template v-slot:prepend>
<img src="../assets/icons/achievements.svg" alt="achievementsIcon" class="sideIcon" />
@@ -33,13 +79,13 @@
<v-divider></v-divider>
<v-list-group value="database" fluid>
<template v-slot:activator="{ props }">
<v-list-item title="数据库" v-bind="props" @click="submenu('database')">
<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" link href="/GCG">
<v-list-item title="GCG" value="db-GCG" link href="/GCG">
<template v-slot:prepend>
<img src="../assets/icons/GCG.svg" alt="gcgIcon" class="sideIcon" />
</template>
@@ -57,25 +103,27 @@
<script lang="ts" setup>
// vue
import { ref } from "vue";
import { computed, ref } from "vue";
// store
import useAppStore from "../store/modules/app";
const appStore = useAppStore();
const rail = ref(appStore.sidebar.collapse);
const open = ref(appStore.getSubmenu());
const open = computed({
get() {
return appStore.getSubmenu();
},
set(value: string[]) {
appStore.sidebar.submenu.mihoyo = value.includes("mihoyo");
appStore.sidebar.submenu.database = value.includes("database");
},
});
function collapse() {
rail.value = !rail.value;
appStore.sidebar.collapse = rail.value;
}
function submenu(value: string) {
if (value === "database") {
appStore.sidebar.submenu.database = open.value.includes(value);
}
}
</script>
<style lang="css" scoped>
@@ -87,5 +135,6 @@ function submenu(value: string) {
width: 24px;
height: 24px;
margin-right: 32px;
border-radius: 5px;
}
</style>