去除汉堡菜单,完善顶部导航栏

main
严飞永 1 week ago
parent b9d95fc394
commit f986933d42

@ -1,116 +1,113 @@
<template>
<div class="navbar">
<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" />
<!-- <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="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>
<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>
</template>
<el-dropdown @command="handleCommand" class="avatar-container right-menu-item hover-effect" trigger="hover">
<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" />
<img
:src="userStore.avatar"
class="user-avatar"
/>
<span class="user-nickname"> {{ userStore.nickName }} </span>
<!-- <span > {{ userStore.nickName }} </span> -->
<ArrowDown
class="user-arrowdown"
style="width: 1em; height: 1em; margin-left: 8px"
/>
</div>
<template #dropdown>
<el-dropdown-menu>
<router-link to="/user/profile">
<!-- <router-link to="/user/profile">
<el-dropdown-item>个人中心</el-dropdown-item>
</router-link>
<el-dropdown-item divided command="logout">
</router-link> -->
<el-dropdown-item command="logout">
<span>退出登录</span>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<div class="right-menu-item hover-effect setting" @click="setLayout" v-if="settingsStore.showSettings">
<!-- <div class="right-menu-item hover-effect setting" @click="setLayout" v-if="settingsStore.showSettings">
<svg-icon icon-class="more-up" />
</div>
</div> -->
</div>
</div>
</template>
<script setup>
import { ElMessageBox } from 'element-plus'
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 useAppStore from '@/store/modules/app'
import useUserStore from '@/store/modules/user'
import useSettingsStore from '@/store/modules/settings'
const appStore = useAppStore()
const userStore = useUserStore()
const settingsStore = useSettingsStore()
import { ElMessageBox } from "element-plus";
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 useAppStore from "@/store/modules/app";
import useUserStore from "@/store/modules/user";
import useSettingsStore from "@/store/modules/settings";
const appStore = useAppStore();
const userStore = useUserStore();
const settingsStore = useSettingsStore();
function toggleSideBar() {
appStore.toggleSideBar()
appStore.toggleSideBar();
}
function handleCommand(command) {
switch (command) {
case "setLayout":
setLayout()
break
setLayout();
break;
case "logout":
logout()
break
logout();
break;
default:
break
break;
}
}
function logout() {
ElMessageBox.confirm('确定注销并退出系统吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
ElMessageBox.confirm("确定注销并退出系统吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
userStore.logOut().then(() => {
location.href = '/index'
location.href = "/index";
});
})
}).catch(() => { })
.catch(() => {});
}
const emits = defineEmits(['setLayout'])
const emits = defineEmits(["setLayout"]);
function setLayout() {
emits('setLayout')
emits("setLayout");
}
function toggleTheme() {
settingsStore.toggleTheme()
settingsStore.toggleTheme();
}
</script>
<style lang='scss' scoped>
<style lang="scss" scoped>
.navbar {
height: 50px;
overflow: hidden;
@ -146,7 +143,8 @@ function toggleTheme() {
}
.right-menu {
float: right;
// float: right;
margin-left: 93%;
height: 100%;
line-height: 50px;
display: flex;
@ -201,8 +199,15 @@ function toggleTheme() {
height: 30px;
border-radius: 50%;
}
.user-arrowdown {
position: relative;
left: 5px;
bottom: 8px;
font-size: 14px;
font-weight: bold;
}
.user-nickname{
.user-nickname {
position: relative;
left: 5px;
bottom: 10px;

@ -1,5 +1,8 @@
<template>
<div :class="{ 'has-logo': showLogo }" class="sidebar-container">
<div
:class="{ 'has-logo': showLogo }"
class="sidebar-container"
>
<!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
<div class="sever-TITLE">太仓市网络和数据资产采集管理系统</div>
<el-scrollbar wrap-class="scrollbar-wrapper">
@ -26,52 +29,57 @@
</template>
<script setup>
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/assets/styles/variables.module.scss'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
import Logo from "./Logo";
import SidebarItem from "./SidebarItem";
import variables from "@/assets/styles/variables.module.scss";
import useAppStore from "@/store/modules/app";
import useSettingsStore from "@/store/modules/settings";
import usePermissionStore from "@/store/modules/permission";
const route = useRoute()
const appStore = useAppStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()
const route = useRoute();
const appStore = useAppStore();
const settingsStore = useSettingsStore();
const permissionStore = usePermissionStore();
const sidebarRouters = computed(() => permissionStore.sidebarRouters)
const showLogo = computed(() => settingsStore.sidebarLogo)
const sideTheme = computed(() => settingsStore.sideTheme)
const theme = computed(() => settingsStore.theme)
const isCollapse = computed(() => !appStore.sidebar.opened)
const sidebarRouters = computed(() => permissionStore.sidebarRouters);
const showLogo = computed(() => settingsStore.sidebarLogo);
const sideTheme = computed(() => settingsStore.sideTheme);
const theme = computed(() => settingsStore.theme);
const isCollapse = computed(() => false);
//
const getMenuBackground = computed(() => {
if (settingsStore.isDark) {
return 'var(--sidebar-bg)'
return "var(--sidebar-bg)";
}
return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg
})
return sideTheme.value === "theme-dark"
? variables.menuBg
: variables.menuLightBg;
});
//
const getMenuTextColor = computed(() => {
if (settingsStore.isDark) {
return 'var(--sidebar-text)'
return "var(--sidebar-text)";
}
return sideTheme.value === 'theme-dark' ? variables.menuText : variables.menuLightText
})
return sideTheme.value === "theme-dark"
? variables.menuText
: variables.menuLightText;
});
const activeMenu = computed(() => {
const { meta, path } = route
const { meta, path } = route;
if (meta.activeMenu) {
return meta.activeMenu
return meta.activeMenu;
}
return path
})
return path;
});
</script>
<style lang="scss" scoped>
.sidebar-container {
background-color: v-bind(getMenuBackground);
transition: none !important; //
.scrollbar-wrapper {
background-color: v-bind(getMenuBackground);
@ -82,7 +90,8 @@ const activeMenu = computed(() => {
height: 100%;
width: 100% !important;
.el-menu-item, .el-sub-menu__title {
.el-menu-item,
.el-sub-menu__title {
&:hover {
background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
}

@ -39,18 +39,18 @@ const { width, height } = useWindowSize()
const WIDTH = 992 // refer to Bootstrap's responsive design
watch(() => device.value, () => {
if (device.value === 'mobile' && sidebar.value.opened) {
useAppStore().closeSideBar({ withoutAnimation: false })
}
// if (device.value === 'mobile' && sidebar.value.opened) {
// useAppStore().closeSideBar({ withoutAnimation: false })
// }
})
watchEffect(() => {
if (width.value - 1 < WIDTH) {
useAppStore().toggleDevice('mobile')
useAppStore().closeSideBar({ withoutAnimation: true })
} else {
useAppStore().toggleDevice('desktop')
}
// if (width.value - 1 < WIDTH) {
// useAppStore().toggleDevice('mobile')
// useAppStore().closeSideBar({ withoutAnimation: true })
// } else {
// useAppStore().toggleDevice('desktop')
// }
})
function handleClickOutside() {

@ -1,46 +1,47 @@
import Cookies from 'js-cookie'
import Cookies from "js-cookie";
const useAppStore = defineStore(
'app',
{
const useAppStore = defineStore("app", {
state: () => ({
sidebar: {
opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
opened: true,
withoutAnimation: false,
hide: false
hide: false,
},
device: 'desktop',
size: Cookies.get('size') || 'default'
device: "desktop",
size: Cookies.get("size") || "default",
}),
actions: {
toggleSideBar(withoutAnimation) {
if (this.sidebar.hide) {
return false
}
this.sidebar.opened = !this.sidebar.opened
this.sidebar.withoutAnimation = withoutAnimation
if (this.sidebar.opened) {
Cookies.set('sidebarStatus', 1)
} else {
Cookies.set('sidebarStatus', 0)
}
this.sidebar.opened = true
return
// if (this.sidebar.hide) {
// return false;
// }
// this.sidebar.opened = !this.sidebar.opened;
// this.sidebar.withoutAnimation = withoutAnimation;
// if (this.sidebar.opened) {
// Cookies.set("sidebarStatus", 1);
// } else {
// Cookies.set("sidebarStatus", 0);
// }
},
closeSideBar({ withoutAnimation }) {
Cookies.set('sidebarStatus', 0)
this.sidebar.opened = false
this.sidebar.withoutAnimation = withoutAnimation
Cookies.set("sidebarStatus", 0);
this.sidebar.opened = false;
this.sidebar.withoutAnimation = withoutAnimation;
},
toggleDevice(device) {
this.device = device
this.device = device;
},
setSize(size) {
this.size = size
Cookies.set('size', size)
this.size = size;
Cookies.set("size", size);
},
toggleSideBarHide(status) {
this.sidebar.hide = status
}
}
})
// this.sidebar.hide = status;
this.sidebar.hide = false
},
},
});
export default useAppStore
export default useAppStore;

@ -1,77 +1,86 @@
import { login, logout, getInfo } from '@/api/login'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { isHttp, isEmpty } from "@/utils/validate"
import defAva from '@/assets/images/profile.jpg'
import { login, logout, getInfo } from "@/api/login";
import { getToken, setToken, removeToken } from "@/utils/auth";
import { isHttp, isEmpty } from "@/utils/validate";
import defAva from "@/assets/images/profile.jpg";
import defaultAvatar from "@/assets/images/touxiang.png";
const useUserStore = defineStore(
'user',
{
const useUserStore = defineStore("user", {
state: () => ({
token: getToken(),
id: '',
name: '',
nickName: '',
avatar: '',
id: "",
name: "",
nickName: "",
avatar: "",
roles: [],
permissions: []
permissions: [],
}),
actions: {
// 登录
login(userInfo) {
const username = userInfo.username.trim()
const password = userInfo.password
const code = userInfo.code
const uuid = userInfo.uuid
const username = userInfo.username.trim();
const password = userInfo.password;
const code = userInfo.code;
const uuid = userInfo.uuid;
return new Promise((resolve, reject) => {
login(username, password, code, uuid).then(res => {
setToken(res.token)
this.token = res.token
resolve()
}).catch(error => {
reject(error)
})
login(username, password, code, uuid)
.then((res) => {
setToken(res.token);
this.token = res.token;
resolve();
})
.catch((error) => {
reject(error);
});
});
},
// 获取用户信息
getInfo() {
return new Promise((resolve, reject) => {
getInfo().then(res => {
const user = res.user
let avatar = user.avatar || ""
getInfo()
.then((res) => {
const user = res.user;
let avatar = user.avatar || "";
if (!isHttp(avatar)) {
avatar = (isEmpty(avatar)) ? defAva : import.meta.env.VITE_APP_BASE_API + avatar
avatar = isEmpty(avatar)
? defaultAvatar
: import.meta.env.VITE_APP_BASE_API + avatar;
}
if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
this.roles = res.roles
this.permissions = res.permissions
if (res.roles && res.roles.length > 0) {
// 验证返回的roles是否是一个非空数组
this.roles = res.roles;
this.permissions = res.permissions;
} else {
this.roles = ['ROLE_DEFAULT']
this.roles = ["ROLE_DEFAULT"];
}
this.id = user.userId
this.name = user.userName
this.nickName = user.nickName
this.avatar = avatar
resolve(res)
}).catch(error => {
reject(error)
})
this.id = user.userId;
this.name = user.userName;
this.nickName = user.nickName;
this.avatar = avatar;
resolve(res);
})
.catch((error) => {
reject(error);
});
});
},
// 退出系统
logOut() {
return new Promise((resolve, reject) => {
logout(this.token).then(() => {
this.token = ''
this.roles = []
this.permissions = []
removeToken()
resolve()
}).catch(error => {
reject(error)
})
})
}
}
logout(this.token)
.then(() => {
this.token = "";
this.roles = [];
this.permissions = [];
removeToken();
resolve();
})
.catch((error) => {
reject(error);
});
});
},
},
});
export default useUserStore
export default useUserStore;

Loading…
Cancel
Save