style: 用户端头部导航改为朴素文本链接，与后台头部统一

src/layout/UserLayout.vue

@@ -6,22 +6,27 @@
           <img :src="metaStore.logo" alt="logo" class="logo">
           <h2 class="title">{{metaStore.title}}</h2>
         </div>
-        <el-menu
-            :default-active="activeIndex"
-            mode="horizontal"
-            router
-            @select="handleSelect"
-            class="nav-menu"
-        >
-          <el-menu-item :index="menu.path" v-for="menu in menus" :key="menu.path">
+        <nav class="nav">
+          <router-link
+              v-for="menu in menus"
+              :key="menu.path"
+              :to="menu.path"
+              class="nav-link"
+              :class="{ active: currentPath.startsWith(menu.path) }"
+          >
             <el-icon><component :is="menu.meta?.icon"/></el-icon>
-            <template #title>{{ menu.meta?.title }}</template>
-          </el-menu-item>
-          <el-menu-item v-if="isStaff" index="/admin">
+            <span>{{ menu.meta?.title }}</span>
+          </router-link>
+          <router-link
+              v-if="isStaff"
+              to="/admin"
+              class="nav-link"
+              :class="{ active: currentPath.startsWith('/admin') }"
+          >
             <el-icon><Tools/></el-icon>
-            <template #title>后台管理</template>
-          </el-menu-item>
-        </el-menu>
+            <span>后台管理</span>
+          </router-link>
+        </nav>
         <div class="header-right">
           <template v-if="login">
             <el-dropdown placement="bottom">
@@ -54,13 +59,15 @@
 </template>
 
 <script setup lang="ts">
-import {computed, ref} from 'vue'
+import {computed} from 'vue'
+import {useRoute} from 'vue-router'
 import {useLoginUserStore, useMetaStore} from "../store";
 import router, {userRoutes} from "../router";
 import {
   Tools,
   UserFilled
 } from '@element-plus/icons-vue'
+const route = useRoute()
 const metaStore = useMetaStore()
 const loginUserStore = useLoginUserStore()
 const login = computed(() => loginUserStore.loginUser.isLogin)
@@ -71,13 +78,10 @@ const isStaff = computed(() => {
 const loginHandler = () => {
   router.push('/login')
 }
-let activeIndex = ref('/problems')
+const currentPath = computed(() => route.path)
 const menus = computed(()=>{
   return userRoutes[0].children?.filter((child) => !String(child.path).includes(':') && child.path !== '/');
 })
-const handleSelect = () => {
-  //todo: 处理菜单选择
-}
 const logoutHandler = () => {
   loginUserStore.logoutUser()
   router.push('/problems')
@@ -112,11 +116,31 @@ el-main{
   margin: 0;
   font-size: 20px;
 }
-.nav-menu {
+.nav {
   flex: 1;
   display: flex;
   justify-content: center;
-  border-bottom: none;
+  align-items: center;
+  gap: 28px;
+}
+.nav-link {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: auto;
+  padding: 2px 4px;
+  font-size: 14px;
+  color: #606266;
+  text-decoration: none;
+  border-bottom: 2px solid transparent;
+  transition: color 0.2s, border-color 0.2s;
+}
+.nav-link:hover {
+  color: #db2777;
+}
+.nav-link.active {
+  color: #db2777;
+  border-bottom-color: #db2777;
 }
 .header-right {
   display: flex;