From 05bbda05d93a74ad42e45e653fc4a663838b91d3 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期四, 09 四月 2026 14:20:00 +0800
Subject: [PATCH] 升级app 1.logo切换
---
src/layout/components/Navbar.vue | 189 +++++++++++++++++-----------------------------
1 files changed, 70 insertions(+), 119 deletions(-)
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 03e2101..cb08221 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -6,23 +6,6 @@
<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="center-menu">
- <span class="label">{{ userStore.currentFactoryName }}</span>
- <el-dropdown @command="handleFactoryChange" class="right-menu-item hover-effect" trigger="click">
- <div>
- <el-icon size="20">
- <Switch />
- </el-icon>
- </div>
- <template #dropdown>
- <el-dropdown-menu>
- <el-dropdown-item v-for="item in factoryList" :key="item.deptId" :command="item">
- {{ item.deptName }}
- </el-dropdown-item>
- </el-dropdown-menu>
- </template>
- </el-dropdown>
- </div>
<div class="right-menu">
<!-- 娑堟伅閫氱煡 -->
<el-popover
@@ -87,14 +70,10 @@
import useAppStore from '@/store/modules/app'
import useUserStore from '@/store/modules/user'
import useSettingsStore from '@/store/modules/settings'
-import { userLoginFacotryList } from "@/api/system/user.js"
-import Cookies from "js-cookie";
-import { decrypt } from "@/utils/jsencrypt"
const appStore = useAppStore()
const userStore = useUserStore()
const settingsStore = useSettingsStore()
-const factoryList = ref([])
const notificationVisible = ref(false)
const notificationCenterRef = ref(null)
const unreadCount = ref(0)
@@ -140,42 +119,6 @@
settingsStore.toggleTheme()
}
-function getUserLoginFacotryList() {
- if (userStore.id) {
- userLoginFacotryList({ userId: userStore.id }).then(res => {
- console.log('res', res)
- factoryList.value = res.data
- })
- } else {
- factoryList.value = []
- }
-}
-
-function handleFactoryChange(command) {
- console.log('command', command)
- handleLogin(command.deptId);
-}
-
-function handleLogin(currentFatoryId) {
- const loginForm = {
- username: Cookies.get("username"),
- password: Cookies.get("password") === undefined ? null : decrypt(Cookies.get("password")),
- currentFatoryId: currentFatoryId
- }
- userStore.loginCheckFactory(loginForm).then(res => {
- forceReload();
- }).catch((err) => {
- console.log(err)
- })
-}
-function forceReload() {
- const currentUrl = window.location.origin + window.location.pathname;
- const timestamp = new Date().getTime();
- window.location.href = `${currentUrl}?reload=${timestamp}`;
-}
-
-getUserLoginFacotryList();
-
// 娑堟伅閫氱煡鐩稿叧
function handleUnreadCountChange(count) {
unreadCount.value = count
@@ -215,31 +158,19 @@
</script>
<style lang='scss' scoped>
-.navbar {
- height: 50px;
- overflow: hidden;
- position: relative;
- background: var(--navbar-bg);
- box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-
- .center-menu {
- line-height: 50px;
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- display: flex;
- align-items: center;
-
- .label {
- font-weight: bold;
- font-size: 18px;
- color: #333333;
- margin-right: 10px;
- }
- }
+.navbar {
+ height: 56px;
+ overflow: hidden;
+ position: relative;
+ background: var(--navbar-bg);
+ border: 1px solid rgba(216, 225, 219, 0.9);
+ border-radius: 22px;
+ backdrop-filter: blur(18px);
+ box-shadow: var(--shadow-sm);
+ padding: 0 18px;
.hamburger-container {
- line-height: 46px;
+ line-height: 52px;
height: 100%;
float: left;
cursor: pointer;
@@ -247,7 +178,7 @@
-webkit-tap-highlight-color: transparent;
&:hover {
- background: rgba(0, 0, 0, 0.025);
+ background: var(--navbar-hover);
}
}
@@ -265,30 +196,32 @@
vertical-align: top;
}
- .right-menu {
- float: right;
- height: 100%;
- line-height: 50px;
- display: flex;
+ .right-menu {
+ float: right;
+ height: 100%;
+ align-items: center;
+ display: flex;
&:focus {
outline: none;
}
- .right-menu-item {
- display: inline-block;
- padding: 0 8px;
- height: 100%;
- font-size: 18px;
- color: var(--navbar-text);
- vertical-align: text-bottom;
+ .right-menu-item {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0 8px;
+ height: 100%;
+ font-size: 18px;
+ color: var(--navbar-text);
+ border-radius: 14px;
&.hover-effect {
cursor: pointer;
transition: background 0.3s;
&:hover {
- background: rgba(0, 0, 0, 0.025);
+ background: var(--navbar-hover);
}
}
@@ -307,7 +240,7 @@
}
.notification-container {
- margin-right: 20px;
+ margin-right: 12px;
display: flex;
align-items: center;
cursor: pointer;
@@ -319,28 +252,43 @@
}
}
- .avatar-container {
- margin-right: 40px;
-
- .avatar-wrapper {
- margin-top: 5px;
- position: relative;
-
- .user-avatar {
- cursor: pointer;
- width: 40px;
- height: 40px;
- border-radius: 50px;
- }
-
- i {
- cursor: pointer;
- position: absolute;
- right: -20px;
- top: 14px;
- font-size: 12px;
- }
- }
+ .avatar-container {
+ margin-right: 4px;
+ height: 100%;
+ display: flex;
+ align-items: center;
+
+ :deep(.el-dropdown) {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ }
+
+ .avatar-wrapper {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ padding: 6px 10px 6px 6px;
+ height: 44px;
+ border-radius: 999px;
+ background: rgba(247, 250, 248, 0.92);
+ border: 1px solid var(--surface-border);
+
+ .user-avatar {
+ cursor: pointer;
+ width: 34px;
+ height: 34px;
+ border-radius: 50px;
+ }
+
+ i {
+ cursor: pointer;
+ position: static;
+ font-size: 12px;
+ }
+ }
}
}
}
@@ -348,8 +296,11 @@
</style>
<style lang="scss">
-.notification-popover {
- padding: 0 !important;
+.notification-popover {
+ padding: 0 !important;
+ border-radius: 20px !important;
+ border: 1px solid var(--surface-border) !important;
+ box-shadow: var(--shadow-md) !important;
.el-popover__title {
display: none;
--
Gitblit v1.9.3