Merge remote-tracking branch 'origin/dev_宁夏_英泽防锈' into dev_宁夏_英泽防锈

gaoluyang

4 天以前 6e173210a874ff7601aa68eab56e912f5619c79c

 src/layout/components/Navbar.vue

@@ -1,31 +1,67 @@
<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" />

    <div class="left-zone">

      <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>



    <div class="center-zone">

      <el-icon class="search-icon" @click="openHeaderSearch"><Search /></el-icon>

      <el-input

        v-model="topSearchKeyword"

        placeholder="搜索菜单 / 功能 / 数据"

        clearable

        @keyup.enter="openHeaderSearch"

      />

      <header-search

        ref="headerSearchRef"

        :keyword="topSearchKeyword"

        class="search-popup-trigger"

      />

    </div>



    <div class="right-menu">

      <template v-if="getters.device !== 'mobile'">

        <header-search id="header-search" class="right-menu-item" />

      <el-popover

        v-model:visible="notificationVisible"

        :width="500"

        placement="bottom-end"

        trigger="click"

        :popper-options="{ modifiers: [{ name: 'offset', options: { offset: [0, 10] } }] }"

        popper-class="notification-popover"

      >

        <template #reference>

          <div class="notification-container right-menu-item hover-effect">

            <el-badge :value="unreadCount" :hidden="unreadCount === 0" class="notification-badge">

              <el-icon :size="18">

                <Bell />

              </el-icon>

            </el-badge>

          </div>

        </template>

        <NotificationCenter @unreadCountChange="handleUnreadCountChange" ref="notificationCenterRef" />

      </el-popover>



        <el-tooltip content="源码地址" effect="dark" placement="bottom">

          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />

        </el-tooltip>

      <div class="right-menu-item hover-effect screenfull-container">

        <screenfull />

      </div>



        <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>

      <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" />

            <div class="user-summary">

              <div class="user-name">{{ userStore.nickName || userStore.name || "管理员" }}</div>

              <div class="user-role">{{ userStore.roleName || "系统用户" }}</div>

            </div>

            <img :src="userStore.avatar" class="user-avatar" />

            <el-icon><caret-bottom /></el-icon>

          </div>

          <template #dropdown>

@@ -33,7 +69,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">

@@ -48,21 +84,33 @@
</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 { ElMessageBox } from "element-plus";

import { Bell, Search } from "@element-plus/icons-vue";

import Breadcrumb from "@/components/Breadcrumb";

import Hamburger from "@/components/Hamburger";

import Screenfull from "@/components/Screenfull";

import HeaderSearch from "@/components/HeaderSearch";

import NotificationCenter from "./NotificationCenter/index.vue";

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();



const topSearchKeyword = ref("");

const headerSearchRef = ref(null);

const notificationVisible = ref(false);

const notificationCenterRef = ref(null);

const unreadCount = ref(0);



function toggleSideBar() {

  store.dispatch('app/toggleSideBar')

  appStore.toggleSideBar();

}



function openHeaderSearch() {

  headerSearchRef.value?.open(topSearchKeyword.value);

}



function handleCommand(command) {

@@ -79,109 +127,256 @@
}



function logout() {

  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {

    confirmButtonText: '确定',

    cancelButtonText: '取消',

    type: 'warning'

  }).then(() => {

    store.dispatch('LogOut').then(() => {

      location.href = '/index';

  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {

    confirmButtonText: "确定",

    cancelButtonText: "取消",

    type: "warning",

  })

    .then(() => {

      userStore.logOut().then(() => {

        location.href = "/index";

      });

    })

  }).catch(() => { });

    .catch(() => {});

}



const emits = defineEmits(['setLayout'])

const emits = defineEmits(["setLayout"]);

function setLayout() {

  emits('setLayout');

  emits("setLayout");

}



function handleUnreadCountChange(count) {

  unreadCount.value = count;

}



let unreadCountTimer = null;

onMounted(() => {

  nextTick(() => {

    if (notificationCenterRef.value) {

      notificationCenterRef.value.loadUnreadCount();

    }

  });



  unreadCountTimer = setInterval(() => {

    if (notificationCenterRef.value) {

      notificationCenterRef.value.loadUnreadCount();

    }

  }, 30000);

});



watch(notificationVisible, (val) => {

  if (val && notificationCenterRef.value) {

    nextTick(() => {

      notificationCenterRef.value.loadMessages();

    });

  }

});



onUnmounted(() => {

  if (unreadCountTimer) {

    clearInterval(unreadCountTimer);

  }

});

</script>



<style lang='scss' scoped>

<style lang="scss" scoped>

.navbar {

  height: 50px;

  overflow: hidden;

  position: relative;

  background: #fff;

  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

  height: var(--topbar-height);

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

  background: rgba(255, 255, 255, 0.86);

  border: 1px solid rgba(148, 163, 184, 0.18);

  border-radius: var(--content-radius);

  backdrop-filter: blur(16px);

  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);

  padding: 0 18px;

}



  .hamburger-container {

    line-height: 46px;

    height: 100%;

    float: left;

    cursor: pointer;

    transition: background 0.3s;

    -webkit-tap-highlight-color: transparent;

.left-zone {

  flex: 0 1 420px;

  min-width: 0;

  display: flex;

  align-items: center;

  gap: 10px;

}



    &:hover {

      background: rgba(0, 0, 0, 0.025);

    }

.hamburger-container {

  line-height: 36px;

  height: 36px;

  width: 36px;

  border-radius: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--navbar-text);



  &:hover {

    background: var(--navbar-hover);

  }

}



.breadcrumb-container {

  min-width: 0;

}



.center-zone {

  width: clamp(360px, 34vw, 560px);

  min-width: 320px;

  height: 38px;

  border-radius: 999px;

  border: 1px solid rgba(148, 163, 184, 0.24);

  background: rgba(248, 251, 255, 0.92);

  display: flex;

  align-items: center;

  padding: 0 12px;

  gap: 8px;

}



.search-icon {

  color: #5b86c9;

  cursor: pointer;

}



.center-zone :deep(.el-input__wrapper) {

  border: 0;

  box-shadow: none !important;

  background: transparent;

  padding: 0;

}



.center-zone :deep(.el-input__inner) {

  color: #334155;

  font-size: 13px;

}



.search-popup-trigger :deep(.search-icon) {

  color: #5b86c9;

  font-size: 16px;

  cursor: pointer;

}



.right-menu {

  height: 100%;

  align-items: center;

  display: flex;

  gap: 14px;

}



.right-menu-item {

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--navbar-text);

  border-radius: 8px;

}



.hover-effect {

  cursor: pointer;

  transition: background 0.2s;



  &:hover {

    background: var(--navbar-hover);

  }

}



.notification-container,

.screenfull-container {

  width: 36px;

  height: 36px;

}



.notification-badge :deep(.el-badge__content) {

  border: none;

}



.screenfull-container :deep(.svg-icon) {

  width: 16px;

  height: 16px;

  color: var(--navbar-text);

}



.avatar-container {

  height: 100%;

  display: flex;

  align-items: center;

}



.avatar-container :deep(.el-dropdown) {

  height: 100%;

  display: flex;

  align-items: center;

}



.avatar-wrapper {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 4px 10px 4px 8px;

  height: 44px;

  border-radius: 22px;

  background: rgba(255, 255, 255, 0.9);

  border: 1px solid rgba(148, 163, 184, 0.22);

}



.user-summary {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 2px;

}



.user-name {

  color: var(--text-primary);

  font-size: 13px;

  line-height: 1;

}



.user-role {

  color: var(--text-tertiary);

  font-size: 11px;

  line-height: 1;

}



.user-avatar {

  cursor: pointer;

  width: 36px;

  height: 36px;

  border-radius: 50%;

  border: 1px solid rgba(148, 163, 184, 0.3);

}



@media (max-width: 1200px) {

  .center-zone {

    display: none;

  }



  .breadcrumb-container {

    float: left;

  .user-summary {

    display: none;

  }

}

</style>



<style lang="scss">

.notification-popover {

  padding: 0 !important;

  border-radius: 16px !important;

  border: 1px solid rgba(148, 163, 184, 0.22) !important;

  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12) !important;

  background: rgba(255, 255, 255, 0.94) !important;

  backdrop-filter: blur(16px);



  .el-popover__title {

    display: none;

  }



  .topmenu-container {

    position: absolute;

    left: 50px;

  .el-popover__body {

    padding: 0 !important;

  }

}



  .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;



      .avatar-wrapper {

        margin-top: 5px;

        position: relative;



        .user-avatar {

          cursor: pointer;

          width: 40px;

          height: 40px;

          border-radius: 10px;

        }



        i {

          cursor: pointer;

          position: absolute;

          right: -20px;

          top: 25px;

          font-size: 12px;

        }

      }

    }

  }

.el-badge__content.is-fixed {

  top: 8px;

}

</style>