From 4319f540d91e2e42cb64f2565673fdf1c9f2305a Mon Sep 17 00:00:00 2001
From: Kisechan <kisechan_@outlook.com>
Date: Thu, 6 Mar 2025 22:38:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=AF=BC=E8=88=AA=E6=A0=8F?=
 =?UTF-8?q?=EF=BC=8C=E6=B7=BB=E5=8A=A0=20Font=20Awesome=20=E5=9B=BE?=
 =?UTF-8?q?=E6=A0=87=EF=BC=8C=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F=E4=BB=A5?=
 =?UTF-8?q?=E6=8F=90=E5=8D=87=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NavBar.vue | 34 ++++++++++++++++++++++------------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 0c9a2e8..4c6f54a 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -7,9 +7,18 @@
 
     <!-- 右侧导航选项 -->
     <div class="menu-items">
-      <el-menu-item @click="openLink('/')">首页</el-menu-item>
-      <el-menu-item @click="goToBlog">博客</el-menu-item>
-      <el-menu-item @click="openLink('/links')">友链</el-menu-item>
+      <el-menu-item @click="openLink('/')">
+        <i class="fa-solid fa-house"></i>
+        首页
+      </el-menu-item>
+      <el-menu-item @click="goToBlog">
+        <i class="fa-solid fa-blog"></i>
+        博客
+      </el-menu-item>
+      <el-menu-item @click="openLink('/links')">
+        <i class="fa-solid fa-link"></i>
+        友链
+      </el-menu-item>
       <el-menu-item @click="toggleDarkMode">
         <div class="flip-container">
           <div :class="['flipper', isDarkMode ? 'flip' : '']">
@@ -27,9 +36,9 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-import { Sunny, Moon } from '@element-plus/icons-vue';
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import { Sunny, Moon } from "@element-plus/icons-vue";
 
 const router = useRouter();
 const isDarkMode = ref(false);
@@ -47,16 +56,16 @@ const openLink = (path) => {
 
 const toggleDarkMode = () => {
   isDarkMode.value = !isDarkMode.value;
-  document.documentElement.classList.toggle('dark', isDarkMode.value);
-  localStorage.setItem('darkMode', isDarkMode.value);
+  document.documentElement.classList.toggle("dark", isDarkMode.value);
+  localStorage.setItem("darkMode", isDarkMode.value);
 };
 
 // 初始化时读取 localStorage 中的模式选择
 const initializeDarkMode = () => {
-  const savedMode = localStorage.getItem('darkMode');
+  const savedMode = localStorage.getItem("darkMode");
   if (savedMode !== null) {
-    isDarkMode.value = savedMode === 'true';
-    document.documentElement.classList.toggle('dark', isDarkMode.value);
+    isDarkMode.value = savedMode === "true";
+    document.documentElement.classList.toggle("dark", isDarkMode.value);
   }
 };
 
@@ -82,6 +91,7 @@ initializeDarkMode();
 
 .el-menu-item {
   font-size: 16px;
+  gap: 7.5px;
   cursor: pointer; /* 添加手型光标 */
 }
 
@@ -125,4 +135,4 @@ initializeDarkMode();
 .back {
   transform: rotateY(180deg);
 }
-</style>
\ No newline at end of file
+</style>