From 2f8a257efd2b64dc40666b0d332edb7824a9768d Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: 星期日, 27 四月 2025 09:58:29 +0800
Subject: [PATCH] remove all semicolons
---
src/layout/components/Navbar.vue | 68 ++++++++++++++++++++++++----------
1 files changed, 48 insertions(+), 20 deletions(-)
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index a4cf784..a7b467a 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,11 +1,11 @@
<template>
<div class="navbar">
- <hamburger id="hamburger-container" :is-active="getters.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!$store.state.settings.topNav" />
- <top-nav id="topmenu-container" class="topmenu-container" v-if="$store.state.settings.topNav" />
+ <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" />
+ <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />
<div class="right-menu">
- <template v-if="getters.device !== 'mobile'">
+ <template v-if="appStore.device !== 'mobile'">
<header-search id="header-search" class="right-menu-item" />
<el-tooltip content="婧愮爜鍦板潃" effect="dark" placement="bottom">
@@ -18,6 +18,13 @@
<screenfull id="screenfull" class="right-menu-item hover-effect" />
+ <el-tooltip content="涓婚妯″紡" effect="dark" placement="bottom">
+ <div class="right-menu-item hover-effect theme-switch-wrapper" @click="toggleTheme">
+ <svg-icon v-if="settingsStore.isDark" icon-class="sunny" />
+ <svg-icon v-if="!settingsStore.isDark" icon-class="moon" />
+ </div>
+ </el-tooltip>
+
<el-tooltip content="甯冨眬澶у皬" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip>
@@ -25,7 +32,7 @@
<div class="avatar-container">
<el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper">
- <img :src="getters.avatar" class="user-avatar" />
+ <img :src="userStore.avatar" class="user-avatar" />
<el-icon><caret-bottom /></el-icon>
</div>
<template #dropdown>
@@ -33,7 +40,7 @@
<router-link to="/user/profile">
<el-dropdown-item>涓汉涓績</el-dropdown-item>
</router-link>
- <el-dropdown-item command="setLayout">
+ <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">
<span>甯冨眬璁剧疆</span>
</el-dropdown-item>
<el-dropdown-item divided command="logout">
@@ -57,24 +64,28 @@
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 useSettingsStore from '@/store/modules/settings'
-const store = useStore();
-const getters = computed(() => store.getters);
+const appStore = useAppStore()
+const userStore = useUserStore()
+const settingsStore = useSettingsStore()
function toggleSideBar() {
- store.dispatch('app/toggleSideBar')
+ appStore.toggleSideBar()
}
function handleCommand(command) {
switch (command) {
case "setLayout":
- setLayout();
- break;
+ setLayout()
+ break
case "logout":
- logout();
- break;
+ logout()
+ break
default:
- break;
+ break
}
}
@@ -84,15 +95,19 @@
cancelButtonText: '鍙栨秷',
type: 'warning'
}).then(() => {
- store.dispatch('LogOut').then(() => {
- location.href = '/index';
+ userStore.logOut().then(() => {
+ location.href = '/index'
})
- }).catch(() => { });
+ }).catch(() => { })
}
const emits = defineEmits(['setLayout'])
function setLayout() {
- emits('setLayout');
+ emits('setLayout')
+}
+
+function toggleTheme() {
+ settingsStore.toggleTheme()
}
</script>
@@ -101,7 +116,7 @@
height: 50px;
overflow: hidden;
position: relative;
- background: #fff;
+ background: var(--navbar-bg);
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
.hamburger-container {
@@ -146,7 +161,7 @@
padding: 0 8px;
height: 100%;
font-size: 18px;
- color: #5a5e66;
+ color: var(--navbar-text);
vertical-align: text-bottom;
&.hover-effect {
@@ -157,6 +172,19 @@
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);
+ }
+ }
+ }
}
.avatar-container {
--
Gitblit v1.9.3