From f08b755cd2db76f99b96355e8e1f60dda50fffdb Mon Sep 17 00:00:00 2001
From: WXL (wul) <wl_5969728@163.com>
Date: 星期二, 02 十二月 2025 15:22:38 +0800
Subject: [PATCH] 测试完成
---
src/layout/components/Navbar.vue | 138 +++++++++++++++++++++++++++------------------
1 files changed, 82 insertions(+), 56 deletions(-)
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 9aa306e..77c84b1 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,14 +1,23 @@
<template>
<div class="navbar">
- <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+ <hamburger
+ id="hamburger-container"
+ :is-active="sidebar.opened"
+ class="hamburger-container"
+ @toggleClick="toggleSideBar"
+ />
- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
- <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
+ <breadcrumb
+ id="breadcrumb-container"
+ class="breadcrumb-container"
+ v-if="!topNav"
+ />
+ <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />
<div class="right-menu">
- <template v-if="device!=='mobile'">
+ <template v-if="device !== 'mobile'">
<search id="header-search" class="right-menu-item" />
-
+
<!-- <el-tooltip content="婧愮爜鍦板潃" effect="dark" placement="bottom">
<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
</el-tooltip> -->
@@ -19,15 +28,18 @@
<screenfull id="screenfull" class="right-menu-item hover-effect" />
- <el-tooltip content="甯冨眬澶у皬" effect="dark" placement="bottom">
+ <!-- <el-tooltip content="甯冨眬澶у皬" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" />
- </el-tooltip>
-
+ </el-tooltip> -->
+ <span class="username">{{ username }}</span>
</template>
- <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
+ <el-dropdown
+ class="avatar-container right-menu-item hover-effect"
+ trigger="click"
+ >
<div class="avatar-wrapper">
- <img :src="avatar" class="user-avatar">
+ <img :src="avatar" class="user-avatar" />
<i class="el-icon-caret-bottom" />
</div>
<el-dropdown-menu slot="dropdown">
@@ -47,15 +59,15 @@
</template>
<script>
-import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import TopNav from '@/components/TopNav'
-import Hamburger from '@/components/Hamburger'
-import Screenfull from '@/components/Screenfull'
-import SizeSelect from '@/components/SizeSelect'
-import Search from '@/components/HeaderSearch'
-import RuoYiGit from '@/components/RuoYi/Git'
-import RuoYiDoc from '@/components/RuoYi/Doc'
+import { mapGetters } from "vuex";
+import Breadcrumb from "@/components/Breadcrumb";
+import TopNav from "@/components/TopNav";
+import Hamburger from "@/components/Hamburger";
+import Screenfull from "@/components/Screenfull";
+import SizeSelect from "@/components/SizeSelect";
+import Search from "@/components/HeaderSearch";
+import RuoYiGit from "@/components/RuoYi/Git";
+import RuoYiDoc from "@/components/RuoYi/Doc";
export default {
components: {
@@ -66,48 +78,51 @@
SizeSelect,
Search,
RuoYiGit,
- RuoYiDoc
+ RuoYiDoc,
},
computed: {
- ...mapGetters([
- 'sidebar',
- 'avatar',
- 'device'
- ]),
+ ...mapGetters(["sidebar", "avatar", "device"]),
setting: {
get() {
- return this.$store.state.settings.showSettings
+ return this.$store.state.settings.showSettings;
},
set(val) {
- this.$store.dispatch('settings/changeSetting', {
- key: 'showSettings',
- value: val
- })
- }
+ this.$store.dispatch("settings/changeSetting", {
+ key: "showSettings",
+ value: val,
+ });
+ },
},
topNav: {
get() {
- return this.$store.state.settings.topNav
- }
- }
+ return this.$store.state.settings.topNav;
+ },
+ },
+ username: {
+ get() {
+ return this.$store.state.user.name;
+ },
+ },
},
methods: {
toggleSideBar() {
- this.$store.dispatch('app/toggleSideBar')
+ this.$store.dispatch("app/toggleSideBar");
},
async logout() {
- this.$confirm('纭畾娉ㄩ攢骞堕��鍑虹郴缁熷悧锛�', '鎻愮ず', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning'
- }).then(() => {
- this.$store.dispatch('LogOut').then(() => {
- location.href = '/index';
+ this.$confirm("纭畾娉ㄩ攢骞堕��鍑虹郴缁熷悧锛�", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ this.$store.dispatch("LogOut").then(() => {
+ location.href = "/index";
+ });
})
- }).catch(() => {});
- }
- }
-}
+ .catch(() => {});
+ },
+ },
+};
</script>
<style lang="scss" scoped>
@@ -116,21 +131,20 @@
overflow: hidden;
position: relative;
background: #fff;
- box-shadow: 0 1px 4px rgba(0,21,41,.08);
+ box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
.hamburger-container {
line-height: 46px;
height: 100%;
float: left;
cursor: pointer;
- transition: background .3s;
- -webkit-tap-highlight-color:transparent;
+ transition: background 0.3s;
+ -webkit-tap-highlight-color: transparent;
&:hover {
- background: rgba(0, 0, 0, .025)
+ background: rgba(0, 0, 0, 0.025);
}
}
-
.breadcrumb-container {
float: left;
}
@@ -149,13 +163,17 @@
float: right;
height: 100%;
line-height: 50px;
+ display: flex; // 鏂板
+ align-items: center; // 鏂板锛氬瀭鐩村眳涓�
+ justify-content: center; // 鍙�夛細姘村钩灞呬腑
&:focus {
outline: none;
}
.right-menu-item {
- display: inline-block;
+ display: inline-flex; // 淇敼涓篿nline-flex
+ align-items: center; // 纭繚鍐呭鍨傜洿灞呬腑
padding: 0 8px;
height: 100%;
font-size: 18px;
@@ -164,17 +182,25 @@
&.hover-effect {
cursor: pointer;
- transition: background .3s;
+ transition: background 0.3s;
&:hover {
- background: rgba(0, 0, 0, .025)
+ background: rgba(0, 0, 0, 0.025);
}
}
}
-
+ .username {
+ // 鍒犻櫎鍘熸潵鐨� margin-bottom: 20px;
+ display: flex;
+ align-items: center;
+ color: #1789fa;
+ height: 100%;
+ padding: 0 12px;
+ white-space: nowrap; // 闃叉鏂囧瓧鎹㈣
+ }
.avatar-container {
margin-right: 30px;
-
+ margin-top: 10px;
.avatar-wrapper {
margin-top: 5px;
position: relative;
--
Gitblit v1.9.3