From 2bd5b4f32d19abf1ef1cbbcba2b4686486ffcf0f Mon Sep 17 00:00:00 2001
From: liujie <1793218484@qq.com>
Date: 星期六, 10 十月 2026 11:59:34 +0800
Subject: [PATCH] 风格替换
---
hugray-admin/src/layout/components/Navbar.vue | 112 +++++++++++++++++++++++++++++++------------------------
1 files changed, 63 insertions(+), 49 deletions(-)
diff --git a/hugray-admin/src/layout/components/Navbar.vue b/hugray-admin/src/layout/components/Navbar.vue
index 20221b5..281156b 100644
--- a/hugray-admin/src/layout/components/Navbar.vue
+++ b/hugray-admin/src/layout/components/Navbar.vue
@@ -10,15 +10,7 @@
<div class="right-menu">
<template v-if="appStore.device !== 'mobile'">
- <header-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>
-
- <el-tooltip content="文档地址" effect="dark" placement="bottom">
- <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
- </el-tooltip>
+ <header-search id="header-search" class="right-menu-item hover-effect" />
<screenfull id="screenfull" class="right-menu-item hover-effect" />
@@ -40,8 +32,7 @@
<el-dropdown @command="handleCommand" class="avatar-container right-menu-item hover-effect" trigger="hover">
<div class="avatar-wrapper">
- <img :src="userStore.avatar" class="user-avatar" />
- <span class="user-nickname"> {{ userStore.nickName }} </span>
+ <div class="avatar-initial">{{ avatarLetter }}</div>
</div>
<template #dropdown>
<el-dropdown-menu>
@@ -74,8 +65,6 @@
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import HeaderSearch from '@/components/HeaderSearch'
-import RuoYiGit from '@/components/RuoYi/Git'
-import RuoYiDoc from '@/components/RuoYi/Doc'
import useAppStore from '@/store/modules/app'
import useUserStore from '@/store/modules/user'
import useLockStore from '@/store/modules/lock'
@@ -88,6 +77,9 @@
const userStore = useUserStore()
const lockStore = useLockStore()
const settingsStore = useSettingsStore()
+
+// 顶栏头像为设计稿的绿色首字母圆，取昵称首字母（无昵称时兜底 A）
+const avatarLetter = computed(() => (userStore.nickName || 'A').charAt(0).toUpperCase())
function toggleSideBar() {
appStore.toggleSideBar()
@@ -190,6 +182,8 @@
align-items: center;
// padding: 0 8px;
box-sizing: border-box;
+ /* 品牌深蓝顶栏：hamburger 等用 fill="currentColor" 的图标继承白字 */
+ color: #ffffff;
.hamburger-container {
line-height: 46px;
@@ -203,12 +197,24 @@
margin-right: 8px;
&:hover {
- background: rgba(0, 0, 0, 0.025);
+ background: rgba(255, 255, 255, 0.12);
}
}
.breadcrumb-container {
flex-shrink: 0;
+ }
+
+ /* 面包屑在深蓝底上改白系（#breadcrumb-container 提权以盖过 Breadcrumb 组件内 .no-redirect 的灰字） */
+ #breadcrumb-container {
+ :deep(.el-breadcrumb__inner),
+ :deep(.el-breadcrumb__separator) {
+ color: rgba(255, 255, 255, 0.85);
+ }
+
+ :deep(.el-breadcrumb__inner.is-link:hover) {
+ color: #ffffff;
+ }
}
.topmenu-container {
@@ -236,30 +242,46 @@
outline: none;
}
+ /* 设计稿顶栏右侧为一排白色描边的圆形图标按钮 */
.right-menu-item {
- display: inline-block;
- padding: 0 8px;
- height: 100%;
- font-size: 18px;
- color: #5a5e66;
- vertical-align: text-bottom;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 30px;
+ height: 30px;
+ padding: 0;
+ margin: 0 5px;
+ font-size: 15px;
+ color: #ffffff;
+ border: 1px solid rgba(255, 255, 255, 0.35);
+ border-radius: 50%;
+ flex-shrink: 0;
&.hover-effect {
cursor: pointer;
- transition: background 0.3s;
+ transition: background 0.3s, border-color 0.3s;
&:hover {
- background: rgba(0, 0, 0, 0.025);
+ background: rgba(255, 255, 255, 0.12);
+ border-color: rgba(255, 255, 255, 0.6);
}
}
- &.theme-switch-wrapper {
- display: flex;
- align-items: center;
+ /* 子组件自带的行高/内边距会在圆形按钮里偏心，归零让图标居中 */
+ :deep(.size-icon--style) {
+ line-height: 1;
+ padding-right: 0;
+ }
+ :deep(.size-icon),
+ :deep(.search-icon) {
+ font-size: 15px;
+ }
+
+ &.theme-switch-wrapper {
svg {
transition: transform 0.3s;
-
+
&:hover {
transform: scale(1.15);
}
@@ -267,37 +289,29 @@
}
}
- .avatar-container {
- margin-right: 0px;
- padding-right: 0px;
+ /* 头像容器不参与描边圆按钮：内层是设计稿的绿色首字母实心圆 */
+ .avatar-container,
+ .avatar-container.hover-effect:hover {
+ border: none;
+ background: transparent;
.avatar-wrapper {
- margin-top: 10px;
- right: 8px;
- position: relative;
+ display: flex;
+ align-items: center;
- .user-avatar {
- cursor: pointer;
+ .avatar-initial {
+ display: flex;
+ align-items: center;
+ justify-content: center;
width: 30px;
height: 30px;
- margin-right: 8px;
border-radius: 50%;
- }
-
- .user-nickname{
- position: relative;
- left: 0px;
- bottom: 10px;
+ background-color: #80BF40;
+ color: #ffffff;
font-size: 14px;
- font-weight: bold;
- }
-
- i {
+ font-weight: 600;
cursor: pointer;
- position: absolute;
- right: -20px;
- top: 25px;
- font-size: 12px;
+ user-select: none;
}
}
}
--
Gitblit v1.7.1