From e38c0656952f70552170fc4ee72420b0c741919e Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期四, 18 六月 2026 10:04:09 +0800
Subject: [PATCH] 样式修改
---
src/layout/components/Navbar.vue | 261 ++++++++++++++++++++++++----------------------------
1 files changed, 120 insertions(+), 141 deletions(-)
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 15de4e1..771c3f3 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,29 +1,33 @@
<template>
<div class="navbar">
- <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 class="navbar-left">
+ <div class="navbar-logo"
+ v-if="appStore.device !== 'mobile'"
+ :style="{ width: logoWidth }">
+ <logo v-if="settingsStore.sidebarLogo"
+ :collapse="logoCollapse" />
+ </div>
+ <div v-if="settingsStore.topNav && appStore.device !== 'mobile'"
+ class="top-nav-wrapper">
+ <top-nav />
+ </div>
+ <div v-else
+ class="left-menu-spacer"></div>
</div>
<div class="right-menu">
- <div class="search-wrapper">
- <el-icon class="search-icon"
- @click="openHeaderSearch">
- <Search />
- </el-icon>
- <el-input v-model="topSearchKeyword"
- placeholder="蹇�熸悳绱�..."
- clearable
- @keyup.enter="openHeaderSearch" />
+ <div class="action-icons">
+ <!-- 鎼滅储鍥炬爣 -->
+ <div class="right-menu-item hover-effect action-icon-btn"
+ @click="openHeaderSearch">
+ <el-icon :size="18">
+ <Search />
+ </el-icon>
+ </div>
<header-search ref="headerSearchRef"
:keyword="topSearchKeyword"
- class="search-popup-trigger" />
- </div>
- <div class="action-icons">
+ class="search-popup-trigger"
+ style="display: none;" />
+ <!-- 閫氱煡鍥炬爣 -->
<el-popover v-model:visible="notificationVisible"
:width="500"
placement="bottom-end"
@@ -31,7 +35,7 @@
:popper-options="{ modifiers: [{ name: 'offset', options: { offset: [0, 10] } }] }"
popper-class="notification-popover">
<template #reference>
- <div class="notification-container right-menu-item hover-effect">
+ <div class="notification-container right-menu-item hover-effect action-icon-btn">
<el-badge :value="unreadCount"
:hidden="unreadCount === 0"
class="notification-badge">
@@ -44,7 +48,8 @@
<NotificationCenter @unreadCountChange="handleUnreadCountChange"
ref="notificationCenterRef" />
</el-popover>
- <div class="right-menu-item hover-effect screenfull-container">
+ <!-- 鍏ㄥ睆鍥炬爣 -->
+ <div class="right-menu-item hover-effect screenfull-container action-icon-btn">
<screenfull />
</div>
</div>
@@ -104,13 +109,21 @@
</template>
<script setup>
+ import { ref, computed, watch, onMounted, onUnmounted, nextTick } from "vue";
import { ElMessageBox } from "element-plus";
- import { Bell, Search } from "@element-plus/icons-vue";
- import Breadcrumb from "@/components/Breadcrumb";
- import Hamburger from "@/components/Hamburger";
+ import {
+ Bell,
+ Search,
+ User,
+ Setting,
+ SwitchButton,
+ CaretBottom,
+ } from "@element-plus/icons-vue";
import Screenfull from "@/components/Screenfull";
import HeaderSearch from "@/components/HeaderSearch";
import NotificationCenter from "./NotificationCenter/index.vue";
+ import Logo from "./Sidebar/Logo.vue";
+ import TopNav from "@/components/TopNav/index.vue";
import useAppStore from "@/store/modules/app";
import useUserStore from "@/store/modules/user";
import useSettingsStore from "@/store/modules/settings";
@@ -119,15 +132,27 @@
const userStore = useUserStore();
const settingsStore = useSettingsStore();
+ const isTopNavLayout = computed(
+ () => settingsStore.topNav && appStore.device !== "mobile"
+ );
+ const logoWidth = computed(() => {
+ if (isTopNavLayout.value) {
+ return "var(--sidebar-width)";
+ }
+ return appStore.sidebar.opened
+ ? "var(--sidebar-width)"
+ : "var(--sidebar-collapsed-width)";
+ });
+ const logoCollapse = computed(() => {
+ if (isTopNavLayout.value) return false;
+ return !appStore.sidebar.opened;
+ });
+
const topSearchKeyword = ref("");
const headerSearchRef = ref(null);
const notificationVisible = ref(false);
const notificationCenterRef = ref(null);
const unreadCount = ref(0);
-
- function toggleSideBar() {
- appStore.toggleSideBar();
- }
function openHeaderSearch() {
headerSearchRef.value?.open(topSearchKeyword.value);
@@ -205,134 +230,91 @@
display: flex;
align-items: center;
justify-content: space-between;
- padding: 0 24px;
- background: var(--navbar-bg);
- border-bottom: 1px solid rgba(255, 255, 255, 0.08);
- backdrop-filter: blur(12px);
+ padding: 0 24px 0 0;
+ background: #fff;
+ border-bottom: 1px solid #d8dce5;
+ box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
z-index: var(--layout-header-z);
}
- .left-menu {
+ .navbar-left {
display: flex;
align-items: center;
- gap: 12px;
- }
-
- .hamburger-container {
- height: 32px;
- width: 32px;
- border-radius: var(--radius-sm);
- display: flex;
- align-items: center;
- justify-content: center;
- color: var(--navbar-text);
- cursor: pointer;
- transition: all 0.2s ease;
-
- &:hover {
- background: var(--navbar-hover);
- color: #fff;
- }
- }
-
- .breadcrumb-container {
+ height: 100%;
+ flex: 1;
min-width: 0;
+ }
- :deep(.el-breadcrumb__inner) {
- color: var(--navbar-text) !important;
- opacity: 0.85;
+ .navbar-logo {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ transition: width 0.25s ease;
+ overflow: hidden;
+ flex-shrink: 0;
+ background-color: #fff; // 寮哄埗璁句负鐧借壊鑳屾櫙
+ // border-right: 1px solid #d8dce5; // 澧炲姞鍙充晶杈规浠ュ尯鍒嗗鑸爮涓讳綋
+ }
- &:hover {
- color: #fff !important;
- opacity: 1;
- }
+ .top-nav-wrapper {
+ display: flex;
+ align-items: center;
+ height: 100%;
+ min-width: 0;
+ flex: 1;
+ padding: 0 12px;
+ overflow: hidden;
+ }
- a {
- color: inherit !important;
- font-weight: 500 !important;
- }
- }
-
- :deep(.no-redirect) {
- color: #fff !important;
- font-weight: 600 !important;
- opacity: 1;
- }
-
- :deep(.el-breadcrumb__separator) {
- color: var(--navbar-text);
- opacity: 0.5;
- }
+ .left-menu-spacer {
+ flex: 1;
+ min-width: 0;
}
.right-menu {
display: flex;
align-items: center;
- gap: 20px; // 澧炲姞澶х粍涔嬮棿鐨勯棿璺�
-
- .search-wrapper {
- display: flex;
- align-items: center;
- gap: 8px;
- height: 34px;
- padding: 0 12px;
- background: var(--navbar-hover);
- border: 1px solid var(--surface-border);
- border-radius: 17px;
- width: 240px; // 鎼滅储妗嗘洿鍔犵簿鑷村皬宸�
- transition: all 0.3s ease;
-
- &:focus-within {
- width: 300px;
- background: rgba(255, 255, 255, 0.1);
- border-color: var(--accent-primary);
- box-shadow: 0 0 0 2px rgba(var(--el-color-primary-rgb), 0.2);
- }
-
- .search-icon {
- color: var(--sidebar-text);
- font-size: 16px;
- cursor: pointer;
- }
-
- :deep(.el-input__wrapper) {
- background: transparent;
- box-shadow: none !important;
- padding: 0;
- }
-
- :deep(.el-input__inner) {
- color: var(--navbar-text);
- font-size: 13px;
- height: 32px;
-
- &::placeholder {
- color: var(--sidebar-text);
- }
- }
- }
+ gap: 16px; // 璋冩暣缁勪箣闂寸殑闂磋窛
.action-icons {
display: flex;
align-items: center;
- gap: 4px;
+ gap: 12px; // 鍥炬爣涔嬮棿鐨勯棿璺�
padding-right: 16px;
- border-right: 1px solid var(--surface-border); // 澧炲姞鍨傜洿鍒嗗壊绾�
+ border-right: 1px solid var(--surface-border);
- .right-menu-item {
- padding: 0 8px;
- height: 34px;
+ .action-icon-btn {
+ width: 36px;
+ height: 36px;
+ padding: 0;
display: flex;
align-items: center;
- color: var(--navbar-text);
- border-radius: var(--radius-sm);
+ justify-content: center;
+ color: var(--text-secondary);
+ border-radius: 50%; // 鍦嗗舰鑳屾櫙
+ background: rgba(0, 0, 0, 0.04); // 娴呮祬鐨勫渾褰㈡搴曡壊
transition: all 0.2s ease;
cursor: pointer;
&:hover {
- background: var(--navbar-hover);
- color: var(--menu-active-text);
+ background: rgba(0, 0, 0, 0.08); // 鎮仠鍔犳繁
+ color: var(--el-color-primary);
}
+
+ :deep(.svg-icon) {
+ width: 18px !important;
+ height: 18px !important;
+ }
+
+ :deep(.el-icon) {
+ font-size: 18px !important;
+ }
+ }
+
+ .notification-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
}
@@ -348,14 +330,12 @@
height: 38px;
padding: 4px 10px 4px 6px;
border-radius: 999px;
- border: 1px solid rgba(var(--el-color-primary-rgb), 0.32);
- background: rgba(0, 0, 0, 0.16);
+ border: 1px solid transparent;
+ background: transparent;
transition: 0.2s ease;
&:hover {
- background: rgba(0, 0, 0, 0.24);
- border-color: rgba(var(--el-color-primary-rgb), 0.58);
- box-shadow: 0 0 0 2px rgba(var(--el-color-primary-rgb), 0.18);
+ background: rgba(0, 0, 0, 0.05);
}
}
@@ -368,8 +348,8 @@
.user-name {
font-size: 13px;
- font-weight: 700;
- color: var(--navbar-text);
+ font-weight: 500;
+ color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -386,8 +366,7 @@
width: 30px;
height: 30px;
border-radius: 999px;
- border: 2px solid rgba(var(--el-color-primary-rgb), 0.28);
- box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
+ border: 1px solid rgba(0, 0, 0, 0.1);
object-fit: cover;
transition: 0.2s ease;
}
@@ -403,12 +382,12 @@
width: 9px;
height: 9px;
background: #10b981;
- border: 2px solid var(--navbar-bg);
+ border: 2px solid #fff;
border-radius: 999px;
}
.caret-icon {
- color: var(--navbar-text);
+ color: var(--text-secondary);
opacity: 0.76;
font-size: 12px;
transition: 0.2s ease;
--
Gitblit v1.9.3