refactor: ♻️ 导航栏重构

src/layout/components/NavBar/components/NavbarRight.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="navbar__right">
-    <!-- 非手机设备（窄屏）才显示 -->
+    <!-- 桌面端显示 -->
-    <template v-if="!isMobile">
+    <template v-if="isDesktop">
       <!-- 搜索 -->
       <MenuSearch />
 
@@ -19,7 +19,22 @@
     </template>
 
     <!-- 用户头像（个人中心、注销登录等） -->
-    <UserProfile />
+    <el-dropdown trigger="click">
+      <div class="user-profile">
+        <img class="user-profile__avatar" :src="userStore.userInfo.avatar" />
+        <span class="user-profile__name">{{ userStore.userInfo.username }}</span>
+      </div>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item @click="handleProfileClick">
+            {{ $t("navbar.profile") }}
+          </el-dropdown-item>
+          <el-dropdown-item divided @click="logout">
+            {{ $t("navbar.logout") }}
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
 
     <!-- 设置面板 -->
     <div v-if="defaultSettings.showSettings" @click="settingStore.settingsVisible = true">
@@ -30,16 +45,43 @@
 <script setup lang="ts">
 import defaultSettings from "@/settings";
 import { DeviceEnum } from "@/enums/DeviceEnum";
+import { useAppStore, useSettingsStore, useUserStore, useTagsViewStore } from "@/store";
 
-import { useAppStore, useSettingsStore } from "@/store";
-
-import UserProfile from "./UserProfile.vue";
 import Notification from "./Notification.vue";
 
 const appStore = useAppStore();
 const settingStore = useSettingsStore();
+const userStore = useUserStore();
 
-const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
+const isDesktop = computed(() => appStore.device === DeviceEnum.DESKTOP);
+
+/**
+ * 打开个人中心页面
+ */
+function handleProfileClick() {
+  useRouter().push({ name: "Profile" });
+}
+
+/**
+ * 注销登出
+ */
+function logout() {
+  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+    lockScroll: false,
+  }).then(() => {
+    userStore
+      .logout()
+      .then(() => {
+        useTagsViewStore().delAllViews();
+      })
+      .then(() => {
+        useRouter().push(`/login?redirect=${useRoute().fullPath}`);
+      });
+  });
+}
 </script>
 
 <style lang="scss" scoped>
@@ -61,10 +103,23 @@ const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
       background: rgb(0 0 0 / 10%);
     }
   }
-}
+  .user-profile {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 0 13px;
 
-:deep(.el-divider--horizontal) {
+    &__avatar {
-  margin: 10px 0;
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+    }
+
+    &__name {
+      margin-left: 10px;
+    }
+  }
 }
 
 .layout-top .navbar__right > *,

src/layout/components/NavBar/components/UserProfile.vue

@@ -1,62 +0,0 @@
-<template>
-  <el-dropdown trigger="click">
-    <div class="flex-center h100% p13px">
-      <img :src="userStore.userInfo.avatar" class="rounded-full mr10px w24px h24px" />
-      <span>{{ userStore.userInfo.username }}</span>
-    </div>
-    <template #dropdown>
-      <el-dropdown-menu>
-        <el-dropdown-item @click="handleOpenUserProfile">
-          {{ $t("navbar.profile") }}
-        </el-dropdown-item>
-        <el-dropdown-item divided @click="logout">
-          {{ $t("navbar.logout") }}
-        </el-dropdown-item>
-      </el-dropdown-menu>
-    </template>
-  </el-dropdown>
-</template>
-
-<script setup lang="ts">
-defineOptions({
-  name: "UserProfile",
-});
-
-import { useTagsViewStore, useUserStore } from "@/store";
-
-const tagsViewStore = useTagsViewStore();
-const userStore = useUserStore();
-
-const route = useRoute();
-const router = useRouter();
-
-/**
- * 打开个人中心页面
- */
-function handleOpenUserProfile() {
-  router.push({ name: "Profile" });
-}
-
-/**
- * 注销登出
- */
-function logout() {
-  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-    lockScroll: false,
-  }).then(() => {
-    userStore
-      .logout()
-      .then(() => {
-        tagsViewStore.delAllViews();
-      })
-      .then(() => {
-        router.push(`/login?redirect=${route.fullPath}`);
-      });
-  });
-}
-</script>
-
-<style lang="scss" scoped></style>

src/layout/components/Sidebar/index.vue

@@ -24,7 +24,7 @@
 import { LayoutEnum } from "@/enums/LayoutEnum";
 import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
 
-import NavbarRight from "../NavBar/components/NavbarRight.vue";
+import NavbarRight from "../Navbar/components/NavbarRight.vue";
 
 const appStore = useAppStore();
 const settingsStore = useSettingsStore();

src/layout/index.vue

@@ -34,7 +34,7 @@
 
     <!-- 左侧和顶部布局 -->
     <div v-else :class="{ hasTagsView: isShowTagsView }" class="main-container">
-      <NavBar v-if="layout === LayoutEnum.LEFT" />
+      <Navbar v-if="layout === LayoutEnum.LEFT" />
       <TagsView v-if="isShowTagsView" />
       <AppMain />
       <Settings v-if="defaultSettings.showSettings" />
@@ -52,7 +52,7 @@ import defaultSettings from "@/settings";
 import { DeviceEnum } from "@/enums/DeviceEnum";
 import { LayoutEnum } from "@/enums/LayoutEnum";
 
-import NavBar from "./components/NavBar/index.vue";
+import Navbar from "./components/Navbar/index.vue";
 
 const appStore = useAppStore();
 const settingsStore = useSettingsStore();