271 lines
6.9 KiB
Vue
271 lines
6.9 KiB
Vue
<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" />
|
|
<div class="navContent">
|
|
<div class="systemLogoContent">
|
|
<img v-if="homeLogo" :src="homeLogo" class="sidebar-logo" />
|
|
</div>
|
|
<div class="topmenu-container">
|
|
<top-nav v-if="settingsStore.topNav" id="topmenu-container" />
|
|
</div>
|
|
<div class="right-menu">
|
|
<div class="el-dropdown avatar-container right-menu-item hover-effect">
|
|
<div class="avatar-wrapper">
|
|
<div class="feedback_icon">
|
|
<img :src="icon_feedback" class="custom-icon" @click="handleFeedBack" />
|
|
</div>
|
|
<img :src="userStore.avatar ? userStore.avatar : avatar_icon" class="user-avatar" />
|
|
<span class="user-nickname"> {{ userStore.nickName }} admin </span>
|
|
<div class="logout_icon">
|
|
<img :src="logout_icon" class="custom-icon" @click="logout" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right-menu-item hover-effect setting" @click="setLayout" v-if="settingsStore.showSettings">
|
|
<svg-icon icon-class="more-up" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 添加反馈对话框 -->
|
|
<el-dialog title="问题反馈" v-model="openFeedBack" width="800px" align-center class="my_dialog" append-to-body
|
|
:destroy-on-close="true" :close-on-click-modal="false">
|
|
<el-form ref="feedBackRef" :model="form" :rules="rules" label-width="120px" label-position="top"
|
|
class="myFeedBackForm">
|
|
<el-form-item label="输入反馈内容" prop="menuName">
|
|
<el-input v-model="form.menuName" style="width: 100%" :rows="12" type="textarea"
|
|
placeholder="欢迎提出您在使用过程中遇到的问题或宝贵建议" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button class="my-cancel-btn" @click="cancel">取 消</el-button>
|
|
<el-button class="my-confirm-btn" type="primary" @click="submitForm">确 定</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ElMessageBox } from 'element-plus'
|
|
import Breadcrumb from '@/components/Breadcrumb'
|
|
import homeLogo from '@/assets/logo/homeLogo.png'
|
|
import avatar_icon from '@/assets/images/avatar_icon.png'
|
|
import logout_icon from '@/assets/images/logout_icon.png'
|
|
import icon_feedback from '@/assets/images/icon_feedback.png'
|
|
import TopNav from '@/components/TopNav'
|
|
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()
|
|
const { proxy } = getCurrentInstance()
|
|
console.log('settingsStore.topNav', settingsStore.topNav)
|
|
|
|
function toggleSideBar() {
|
|
appStore.toggleSideBar()
|
|
}
|
|
|
|
// 退出系统
|
|
const logout = () => {
|
|
ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
confirmButtonClass: 'custom-confirm-btn',
|
|
cancelButtonClass: 'custom-cancel-btn',
|
|
closeOnClickModal: false, // 禁止点击遮罩层关闭
|
|
type: 'warning'
|
|
}).then(() => {
|
|
userStore.logOut().then(() => {
|
|
location.href = '/index'
|
|
})
|
|
}).catch(() => { })
|
|
}
|
|
|
|
const emits = defineEmits(['setLayout'])
|
|
function setLayout() {
|
|
emits('setLayout')
|
|
}
|
|
|
|
function toggleTheme() {
|
|
settingsStore.toggleTheme()
|
|
}
|
|
|
|
const openFeedBack = ref(false)
|
|
const data = reactive({
|
|
form: {},
|
|
rules: {
|
|
menuName: [{ required: true, message: "反馈内容不能为空", trigger: "blur" }]
|
|
},
|
|
})
|
|
|
|
const { queryParams, form, rules } = toRefs(data)
|
|
const handleFeedBack = () => {
|
|
openFeedBack.value = true
|
|
}
|
|
const cancel = () => {
|
|
openFeedBack.value = false
|
|
form.value = {}
|
|
}
|
|
const submitForm = () => {
|
|
proxy.$refs["feedBackRef"].validate(valid => {
|
|
if (valid) {
|
|
openFeedBack.value = false
|
|
// addMenu(form.value).then(response => {
|
|
// proxy.$modal.msgSuccess("新增成功")
|
|
// open.value = false
|
|
// getList()
|
|
// })
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
.myRow {
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
.navbar {
|
|
height: 80px;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
position: fixed;
|
|
background-image: url(../../assets/images/bg_top.png);
|
|
background-size: cover;
|
|
// background: transparent;
|
|
box-shadow: none;
|
|
padding: 0 36px;
|
|
|
|
.navContent {
|
|
height: 43px;
|
|
margin: 19px 0px 18px 0px;
|
|
display: flex; // 添加flex布局
|
|
justify-content: space-between; // 使子元素平均分布
|
|
align-items: center; // 垂直居中
|
|
}
|
|
|
|
.systemLogoContent {
|
|
width: 220px;
|
|
}
|
|
|
|
.topmenu-container {
|
|
flex: 1; // 占据剩余空间
|
|
padding-left: 284px; // 替代原来的padding-left
|
|
}
|
|
|
|
.right-menu {
|
|
height: 100%;
|
|
width: 220px;
|
|
text-align: right;
|
|
line-height: normal; // 覆盖原来的line-height
|
|
display: flex; // 内部也使用flex
|
|
align-items: center; // 垂直居中
|
|
justify-content: flex-end; // 内容靠右
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.right-menu-item {
|
|
height: 100%;
|
|
font-size: 18px;
|
|
color: #5a5e66;
|
|
vertical-align: text-bottom;
|
|
|
|
&.hover-effect {
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.avatar-container {
|
|
margin-right: 0px;
|
|
padding-right: 0px;
|
|
|
|
.avatar-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.user-avatar {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.user-nickname {
|
|
bottom: 0 !important; // 移除原来的bottom定位
|
|
margin-left: 8px;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: 400;
|
|
font-size: 18px;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
i {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
right: -20px;
|
|
top: 25px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.feedback_icon {
|
|
margin-right: 34px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.logout_icon {
|
|
margin-left: 30px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.hamburger-container {
|
|
line-height: 46px;
|
|
height: 100%;
|
|
float: left;
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
-webkit-tap-highlight-color: transparent;
|
|
|
|
&:hover {
|
|
background: rgba(0, 0, 0, 0.025);
|
|
}
|
|
}
|
|
|
|
.breadcrumb-container {
|
|
float: left;
|
|
}
|
|
|
|
.errLog-container {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
</style>
|