From cc9b67d4676dd51a6b2d88e92607aca2629ee54d Mon Sep 17 00:00:00 2001 From: 疯狂的狮子Li <15040126243@163.com> Date: 星期五, 22 十二月 2023 13:26:26 +0800 Subject: [PATCH] !72 发布 vue 版本 5.1.2 与 cloud 版本 2.1.2 Merge pull request !72 from 疯狂的狮子Li/temp --- src/layout/components/Navbar.vue | 34 +++++++++++++++++++++++++++++++--- 1 files changed, 31 insertions(+), 3 deletions(-) diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 960bc2d..7818fd4 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -27,6 +27,21 @@ <svg-icon class-name="search-icon" icon-class="search" /> </div> </el-tooltip> + <!-- 娑堟伅 --> + <el-tooltip :content="$t('navbar.message')" effect="dark" placement="bottom"> + <div> + <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="Github" effect="dark" placement="bottom"> <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" /> </el-tooltip> @@ -58,7 +73,7 @@ <router-link to="/user/profile" v-if="!dynamic"> <el-dropdown-item>{{ $t('navbar.personalCenter') }}</el-dropdown-item> </router-link> - <el-dropdown-item command="setLayout"> + <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings"> <span>{{ $t('navbar.layoutSetting') }}</span> </el-dropdown-item> <el-dropdown-item divided command="logout"> @@ -73,7 +88,7 @@ </template> <script setup lang="ts"> -import SearchMenu from './topBar/search.vue'; +import SearchMenu from './TopBar/search.vue'; import useAppStore from '@/store/modules/app'; import useUserStore from '@/store/modules/user'; import useSettingsStore from '@/store/modules/settings'; @@ -81,10 +96,14 @@ import { dynamicClear, dynamicTenant } from "@/api/system/tenant"; import { ComponentInternalInstance } from "vue"; import { TenantVO } from "@/api/types"; +import notice from './notice/index.vue'; +import useNoticeStore from '@/store/modules/notice'; const appStore = useAppStore(); const userStore = useUserStore(); const settingsStore = useSettingsStore(); +const noticeStore = storeToRefs(useNoticeStore()); +const newNotice = ref(<number>0); const { proxy } = getCurrentInstance() as ComponentInternalInstance; @@ -161,12 +180,21 @@ commandMap[command](); } } + +//鐢ㄦ繁搴︾洃鍚� 娑堟伅 +watch(() => noticeStore.state.value.notices, (newVal, oldVal) => { + newNotice.value = newVal.filter((item: any) => !item.read).length; +}, { deep: true }); </script> <style lang="scss" scoped> :deep(.el-select .el-input__wrapper) { height:30px; +} + +:deep(.el-badge__content.is-fixed){ + top: 12px; } .flex { @@ -181,7 +209,7 @@ height: 50px; overflow: hidden; position: relative; - background: #fff; + //background: #fff; box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); .hamburger-container { -- Gitblit v1.9.3