From 88e29ed5854ed9e62b719e4804958206c5fd9db1 Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期五, 22 十一月 2024 19:30:38 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/layout/components/Navbar.vue | 409 ++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 244 insertions(+), 165 deletions(-)
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 466cd98..9a5141b 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,49 +1,75 @@
<template>
- <div class="navbar">
- <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-
- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
- <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
-
- <div class="right-menu">
- <template v-if="device!=='mobile'">
- <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">
- <size-select id="size-select" class="right-menu-item hover-effect" />
- </el-tooltip>
-
- </template>
-
- <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
- <div class="avatar-wrapper">
- <img :src="avatar" class="user-avatar">
- <i class="el-icon-caret-bottom" />
+ <div class="navbar">
+ <div class="ruoyi-logo">
+ <img src="@/assets/logo/logo.png" alt="" />
+ <span>灏勬椽椤圭洰绠＄悊绯荤粺</span>
</div>
- <el-dropdown-menu slot="dropdown">
- <router-link to="/user/profile">
- <el-dropdown-item>涓汉涓績</el-dropdown-item>
- </router-link>
- <el-dropdown-item @click.native="setting = true">
- <span>甯冨眬璁剧疆</span>
- </el-dropdown-item>
- <el-dropdown-item divided @click.native="logout">
- <span>閫�鍑虹櫥褰�</span>
- </el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
+ <div class="right-menu flex align-center">
+ <template>
+ <search-menu ref="searchMenuRef" />
+ <el-tooltip content="鎼滅储" effect="dark" placement="bottom">
+ <div
+ class="right-menu-item hover-effect"
+ @click="openSearchMenu"
+ >
+ <svg-icon
+ class-name="search-icon"
+ icon-class="search"
+ />
+ </div>
+ </el-tooltip>
+ <!-- 娑堟伅 -->
+ <el-tooltip content="娑堟伅" effect="dark" placement="bottom">
+ <div class="right-menu-item hover-effect">
+ <el-popover
+ placement="bottom"
+ trigger="click"
+ transition="el-zoom-in-top"
+ :width="300"
+ :persistent="false"
+ >
+ <template #reference>
+ <el-badge
+ :value="newNotice > 0 ? newNotice : ''"
+ :max="99"
+ >
+ <svg-icon icon-class="message" />
+ </el-badge>
+ </template>
+ <template #default>
+ <notice></notice>
+ </template>
+ </el-popover>
+ </div>
+ </el-tooltip>
+ <el-tooltip content="鍏ㄥ睆" effect="dark" placement="bottom">
+ <screenfull
+ id="screenfull"
+ class="right-menu-item hover-effect"
+ />
+ </el-tooltip>
+ </template>
+ <div class="avatar-container">
+ <el-dropdown
+ class="avatar-container right-menu-item hover-effect"
+ trigger="click"
+ >
+ <div class="avatar-wrapper">
+ <img :src="avatar" class="user-avatar" />
+ <i class="el-icon-caret-bottom" />
+ </div>
+ <el-dropdown-menu slot="dropdown">
+ <router-link to="/user/profile">
+ <el-dropdown-item>涓汉涓績</el-dropdown-item>
+ </router-link>
+ <el-dropdown-item divided @click.native="logout">
+ <span>閫�鍑虹櫥褰�</span>
+ </el-dropdown-item>
+ </el-dropdown-menu>
+ </el-dropdown>
+ </div>
+ </div>
</div>
- </div>
</template>
<script>
@@ -56,145 +82,198 @@
import Search from '@/components/HeaderSearch'
import RuoYiGit from '@/components/RuoYi/Git'
import RuoYiDoc from '@/components/RuoYi/Doc'
+import SearchMenu from './TopBar/search.vue';
+import Notice from './Notice/index.vue';
export default {
- components: {
- Breadcrumb,
- TopNav,
- Hamburger,
- Screenfull,
- SizeSelect,
- Search,
- RuoYiGit,
- RuoYiDoc
- },
- computed: {
- ...mapGetters([
- 'sidebar',
- 'avatar',
- 'device'
- ]),
- setting: {
- get() {
- return this.$store.state.settings.showSettings
- },
- set(val) {
- this.$store.dispatch('settings/changeSetting', {
- key: 'showSettings',
- value: val
- })
- }
+ data() {
+ return {
+ newNotice: 0
+ }
},
- topNav: {
- get() {
- return this.$store.state.settings.topNav
- }
- }
- },
- methods: {
- toggleSideBar() {
- this.$store.dispatch('app/toggleSideBar')
+ components: {
+ Breadcrumb,
+ TopNav,
+ Hamburger,
+ Screenfull,
+ SizeSelect,
+ Search,
+ RuoYiGit,
+ RuoYiDoc,
+ SearchMenu,
+ Notice
},
- async logout() {
- this.$confirm('纭畾娉ㄩ攢骞堕��鍑虹郴缁熷悧锛�', '鎻愮ず', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning'
- }).then(() => {
- this.$store.dispatch('LogOut').then(() => {
- location.href = '/index';
- })
- }).catch(() => {});
+ computed: {
+ ...mapGetters([
+ 'sidebar',
+ 'avatar',
+ 'device'
+ ]),
+ setting: {
+ get() {
+ return this.$store.state.settings.showSettings
+ },
+ set(val) {
+ this.$store.dispatch('settings/changeSetting', {
+ key: 'showSettings',
+ value: val
+ })
+ }
+ },
+ topNav: {
+ get() {
+ return this.$store.state.settings.topNav
+ }
+ }
+ },
+ methods: {
+ toggleSideBar() {
+ this.$store.dispatch('app/toggleSideBar')
+ },
+ async logout() {
+ this.$confirm('纭畾娉ㄩ攢骞堕��鍑虹郴缁熷悧锛�', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }).then(() => {
+ this.$store.dispatch('LogOut').then(() => {
+ location.href = '/index';
+ })
+ }).catch(() => { });
+ },
+ openSearchMenu() {
+ this.searchMenuRef.value?.openSearch();
+ },
}
- }
}
</script>
<style lang="scss" scoped>
+::v-deep.el-select .el-input__wrapper {
+ height: 30px;
+}
+
+::v-deep .el-badge__content.is-fixed {
+ top: 12px;
+}
+
+.flex {
+ display: flex;
+}
+
+.align-center {
+ align-items: center;
+}
+
+.ruoyi-logo {
+ float: left;
+ line-height: 54px;
+ font-weight: 400;
+ font-size: 24px;
+ font-style: italic;
+ font-family: PangMenZhengDao;
+ // color: #ffffff;
+ // width: 220px;
+ display: flex;
+ align-items: center;
+ > img {
+ margin: 0 10px 0 21px;
+ }
+ > div {
+ margin: 0 0 0 21px;
+ }
+ .down {
+ margin-top: 22px;
+ color: #ffffff;
+ }
+}
.navbar {
- height: 50px;
- overflow: hidden;
- position: relative;
- background: #fff;
- box-shadow: 0 1px 4px rgba(0,21,41,.08);
+ height: 50px;
+ overflow: hidden;
+ position: relative;
+ //background: #fff;
+ box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
- .hamburger-container {
- line-height: 46px;
- height: 100%;
- float: left;
- cursor: pointer;
- transition: background .3s;
- -webkit-tap-highlight-color:transparent;
-
- &:hover {
- background: rgba(0, 0, 0, .025)
- }
- }
-
- .breadcrumb-container {
- float: left;
- }
-
- .topmenu-container {
- position: absolute;
- left: 50px;
- }
-
- .errLog-container {
- display: inline-block;
- vertical-align: top;
- }
-
- .right-menu {
- float: right;
- height: 100%;
- line-height: 50px;
-
- &:focus {
- outline: none;
- }
-
- .right-menu-item {
- display: inline-block;
- padding: 0 8px;
- height: 100%;
- font-size: 18px;
- color: #5a5e66;
- vertical-align: text-bottom;
-
- &.hover-effect {
+ .hamburger-container {
+ line-height: 46px;
+ height: 100%;
+ float: left;
cursor: pointer;
- transition: background .3s;
+ transition: background 0.3s;
+ -webkit-tap-highlight-color: transparent;
&:hover {
- background: rgba(0, 0, 0, .025)
+ background: rgba(0, 0, 0, 0.025);
}
- }
}
- .avatar-container {
- margin-right: 30px;
-
- .avatar-wrapper {
- margin-top: 5px;
- position: relative;
-
- .user-avatar {
- cursor: pointer;
- width: 40px;
- height: 40px;
- border-radius: 10px;
- }
-
- .el-icon-caret-bottom {
- cursor: pointer;
- position: absolute;
- right: -20px;
- top: 25px;
- font-size: 12px;
- }
- }
+ .breadcrumb-container {
+ float: left;
}
- }
+
+ .topmenu-container {
+ position: absolute;
+ left: 50px;
+ }
+
+ .errLog-container {
+ display: inline-block;
+ vertical-align: top;
+ }
+
+ .right-menu {
+ float: right;
+ height: 100%;
+ line-height: 50px;
+ display: flex;
+
+ &:focus {
+ outline: none;
+ }
+
+ .right-menu-item {
+ display: inline-block;
+ padding: 0 8px;
+ height: 100%;
+ font-size: 18px;
+ color: #5a5e66;
+ vertical-align: text-bottom;
+
+ &.hover-effect {
+ cursor: pointer;
+ transition: background 0.3s;
+
+ &:hover {
+ background: rgba(0, 0, 0, 0.025);
+ }
+ }
+ }
+
+ .avatar-container {
+ margin-right: 40px;
+ margin-top: 10px;
+
+ .avatar-wrapper {
+ margin-top: 5px;
+ position: relative;
+
+ .user-avatar {
+ cursor: pointer;
+ width: 40px;
+ height: 40px;
+ border-radius: 10px;
+ margin-top: 10px;
+ }
+
+ i {
+ cursor: pointer;
+ position: absolute;
+ right: -20px;
+ top: 25px;
+ font-size: 12px;
+ }
+ }
+ }
+ }
}
</style>
--
Gitblit v1.8.0