From f8fcd9c130f384051427c86da3c7600169e0bafd Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Thu, 23 Mar 2023 21:54:18 +0800
Subject: [PATCH] =?UTF-8?q?fix(sidebar):=20=E5=88=A0=E9=99=A4=E5=9B=9E?=
 =?UTF-8?q?=E9=80=80=E9=94=AE=EF=BC=8C=E4=BF=AE=E5=A4=8D=E9=80=89=E4=B8=AD?=
 =?UTF-8?q?=E6=9C=AA=E9=AB=98=E4=BA=AE=E7=9A=84=E9=97=AE=E9=A2=98=20#1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/t-sidebar.vue | 67 ++++++++++++++++++++----------------
 1 file changed, 37 insertions(+), 30 deletions(-)

diff --git a/src/components/t-sidebar.vue b/src/components/t-sidebar.vue
index 29d7e3cc..9d235363 100644
--- a/src/components/t-sidebar.vue
+++ b/src/components/t-sidebar.vue
@@ -1,43 +1,53 @@
 <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 class="sideList" density="compact" v-model:opened="open" nav>
+			<!-- 负责收缩侧边栏 -->
 			<v-list-item @click="collapse">
-				<v-list-item-action>
-					<v-icon color="rgb(205, 182, 145)">mdi-menu</v-icon>
-				</v-list-item-action>
+				<template v-slot:prepend v-if="rail">
+					<v-list-item-action>
+						<v-icon color="rgb(205, 182, 145)">mdi-chevron-right</v-icon>
+					</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 link href="/" title="首页">
+			<v-list-item value="home" title="首页" @click="toPage('home')">
 				<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="咨讯">
+			<v-list-item title="咨讯" value="news" @click="toPage('news')">
 				<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="成就">
+			<v-list-item title="成就" value="achievements" @click="toPage('achievements')">
 				<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" />
+			<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>
-			<v-list-item link href="/config" title="设置">
+				<v-list-item title="GCG" value="GCG" @click="toPage('GCG')">
+					<template v-slot:prepend>
+						<img src="../assets/icons/GCG.svg" alt="gcgIcon" class="sideIcon" />
+					</template>
+				</v-list-item>
+			</v-list-group>
+			<v-divider></v-divider>
+			<v-list-item title="设置" value="config" @click="toPage('config')">
 				<template v-slot:prepend>
 					<img src="../assets/icons/setting.svg" alt="setting" class="sideIcon" />
 				</template>
@@ -55,26 +65,23 @@ const router = useRouter();
 const appStore = useAppStore();
 
 const rail = ref(appStore.sidebar);
+const open = ref(["database"]);
 
-const back = () => {
-	try {
-		router.back();
-	} catch (e) {
-		console.error(e);
-	}
-};
 function collapse() {
 	rail.value = !rail.value;
 	appStore.sidebar = rail.value;
 }
+
+function toPage(link: string) {
+	router.push(link);
+}
 </script>
 
 <style lang="css">
 .sideList {
 	font-family: "Genshin", serif;
-	/* 磨砂 */
-	backdrop-filter: blur(10px);
 }
+
 .sideIcon {
 	width: 24px;
 	height: 24px;