From 1c829f9177eab675b22be4d20ef2761ed1bbb423 Mon Sep 17 00:00:00 2001
From: 云 <2163098428@qq.com>
Date: 星期二, 15 九月 2026 16:15:48 +0800
Subject: [PATCH] refactor(layout): 调整布局样式并优化轮播卡片组件
---
src/layout/components/Navbar.vue | 181 ++++++++++++++++++--------------------------
1 files changed, 75 insertions(+), 106 deletions(-)
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index d4e938d..f774699 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,11 +1,10 @@
<template>
<div class="navbar">
- <div>
+ <div class="left-menu">
<hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container"
@toggleClick="toggleSideBar" />
<breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />
</div>
- <!-- <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />-->
<div class="right-menu">
<!-- 娑堟伅閫氱煡 -->
<el-popover
@@ -19,7 +18,7 @@
<template #reference>
<div class="notification-container right-menu-item hover-effect">
<el-badge :value="unreadCount" :hidden="unreadCount === 0" class="notification-badge">
- <el-icon :size="20" style="cursor: pointer;">
+ <el-icon :size="20">
<Bell />
</el-icon>
</el-badge>
@@ -30,27 +29,26 @@
ref="notificationCenterRef"
/>
</el-popover>
- <div class="avatar-container">
- <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
- <div class="avatar-wrapper">
- <img :src="userStore.avatar" class="user-avatar" />
- <el-icon><caret-bottom /></el-icon>
- </div>
- <template #dropdown>
- <el-dropdown-menu>
- <router-link to="/user/profile">
- <el-dropdown-item>涓汉涓績</el-dropdown-item>
- </router-link>
- <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">
- <span>甯冨眬璁剧疆</span>
- </el-dropdown-item>
- <el-dropdown-item divided command="logout">
- <span>閫�鍑虹櫥褰�</span>
- </el-dropdown-item>
- </el-dropdown-menu>
- </template>
- </el-dropdown>
- </div>
+ <el-dropdown @command="handleCommand" trigger="click">
+ <div class="avatar-container right-menu-item hover-effect">
+ <img :src="userStore.avatar" class="user-avatar" />
+ <span class="user-name">{{ userStore.nickName || userStore.name }}</span>
+ <el-icon class="user-caret"><caret-bottom /></el-icon>
+ </div>
+ <template #dropdown>
+ <el-dropdown-menu>
+ <router-link to="/user/profile">
+ <el-dropdown-item>涓汉涓績</el-dropdown-item>
+ </router-link>
+ <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">
+ <span>甯冨眬璁剧疆</span>
+ </el-dropdown-item>
+ <el-dropdown-item divided command="logout">
+ <span>閫�鍑虹櫥褰�</span>
+ </el-dropdown-item>
+ </el-dropdown-menu>
+ </template>
+ </el-dropdown>
</div>
</div>
</template>
@@ -59,13 +57,7 @@
import { ElMessageBox } from 'element-plus'
import { Bell } from '@element-plus/icons-vue'
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 HeaderSearch from '@/components/HeaderSearch'
-import RuoYiGit from '@/components/RuoYi/Git'
-import RuoYiDoc from '@/components/RuoYi/Doc'
import NotificationCenter from './NotificationCenter/index.vue'
import useAppStore from '@/store/modules/app'
import useUserStore from '@/store/modules/user'
@@ -115,10 +107,6 @@
emits('setLayout')
}
-function toggleTheme() {
- settingsStore.toggleTheme()
-}
-
// 娑堟伅閫氱煡鐩稿叧
function handleUnreadCountChange(count) {
unreadCount.value = count
@@ -159,114 +147,95 @@
<style lang='scss' scoped>
.navbar {
- height: 50px;
- overflow: hidden;
+ height: 60px;
position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding-right: 16px;
background: var(--navbar-bg);
- box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+ border-bottom: 1px solid var(--navbar-border);
+
+ .left-menu {
+ display: flex;
+ align-items: center;
+ height: 100%;
+ }
.hamburger-container {
- line-height: 46px;
+ display: flex;
+ align-items: center;
height: 100%;
- float: left;
+ padding: 0 14px;
cursor: pointer;
- transition: background 0.3s;
+ transition: background 0.2s;
-webkit-tap-highlight-color: transparent;
&:hover {
- background: rgba(0, 0, 0, 0.025);
+ background: var(--app-surface-hover);
}
}
- .breadcrumb-container {
- float: left;
- }
-
- .topmenu-container {
- position: absolute;
- left: 50px;
- }
-
- .errLog-container {
- display: inline-block;
- vertical-align: top;
- }
-
.right-menu {
- float: right;
- height: 100%;
- line-height: 50px;
display: flex;
+ align-items: center;
+ gap: 6px;
+ height: 100%;
&:focus {
outline: none;
}
+ // 姣忎釜鎸夐挳缁熶竴鐨勫渾瑙掓偓鍋滃簳
.right-menu-item {
- display: inline-block;
- padding: 0 8px;
- height: 100%;
+ display: flex;
+ align-items: center;
+ height: 40px;
+ padding: 0 12px;
font-size: 18px;
color: var(--navbar-text);
- vertical-align: text-bottom;
+ border-radius: 10px;
+ cursor: pointer;
+ transition: background 0.2s;
- &.hover-effect {
- cursor: pointer;
- transition: background 0.3s;
-
- &:hover {
- background: rgba(0, 0, 0, 0.025);
- }
- }
-
- &.theme-switch-wrapper {
- display: flex;
- align-items: center;
-
- svg {
- transition: transform 0.3s;
-
- &:hover {
- transform: scale(1.15);
- }
- }
+ &.hover-effect:hover {
+ background: var(--app-surface-hover);
}
}
- .notification-container {
- margin-right: 20px;
+ .notification-badge {
display: flex;
align-items: center;
- cursor: pointer;
- .notification-badge {
- :deep(.el-badge__content) {
- border: none;
- }
+ :deep(.el-badge__content) {
+ border: none;
}
}
.avatar-container {
- margin-right: 40px;
+ gap: 8px;
- .avatar-wrapper {
- margin-top: 5px;
- position: relative;
+ .user-avatar {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ object-fit: cover;
+ background: var(--app-surface-hover);
+ }
- .user-avatar {
- cursor: pointer;
- width: 40px;
- height: 40px;
- border-radius: 50px;
- }
+ .user-name {
+ font-size: 14px;
+ font-weight: 500;
+ color: var(--app-text);
+ max-width: 120px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
- i {
- cursor: pointer;
- position: absolute;
- right: -20px;
- top: 14px;
- font-size: 12px;
- }
+ .user-caret {
+ font-size: 12px;
+ color: var(--app-text-tertiary);
}
}
}
--
Gitblit v1.9.3