change

zhangwencui

9 小时以前 ed36047f6ce0b91dad25efc10c8a0e83dd533a68

 src/layout/components/Navbar.vue

@@ -1,39 +1,45 @@
<template>

  <div class="navbar">

    <div>

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

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

    <!--    <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />-->

    <div class="right-menu">

      <!-- 消息通知 -->

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

      >

      <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="20" style="cursor: pointer;">

            <el-badge :value="unreadCount"

                      :hidden="unreadCount === 0"

                      class="notification-badge">

              <el-icon :size="20"

                       style="cursor: pointer;">

                <Bell />

              </el-icon>

            </el-badge>

          </div>

        </template>

        <NotificationCenter

          @unreadCountChange="handleUnreadCountChange"

          ref="notificationCenterRef"

        />

        <NotificationCenter @unreadCountChange="handleUnreadCountChange"

                            ref="notificationCenterRef" />

      </el-popover>

      <div class="avatar-container">

        <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">

        <el-dropdown @command="handleCommand"

                     class="right-menu-item hover-effect"

                     trigger="click">

          <div class="avatar-wrapper">

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

            <img :src="userStore.avatar"

                 class="user-avatar" />

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

          </div>

          <template #dropdown>

@@ -41,10 +47,12 @@
              <router-link to="/user/profile">

                <el-dropdown-item>个人中心</el-dropdown-item>

              </router-link>

              <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">

              <el-dropdown-item command="setLayout"

                                v-if="settingsStore.showSettings">

                <span>布局设置</span>

              </el-dropdown-item>

              <el-dropdown-item divided command="logout">

              <el-dropdown-item divided

                                command="logout">

                <span>退出登录</span>

              </el-dropdown-item>

            </el-dropdown-menu>

@@ -56,237 +64,238 @@
</template>



<script setup>

import { ElMessageBox } from 'element-plus'

import { Bell } from '@element-plus/icons-vue'

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 NotificationCenter from './NotificationCenter/index.vue'

import useAppStore from '@/store/modules/app'

import useUserStore from '@/store/modules/user'

import useSettingsStore from '@/store/modules/settings'

  import { ElMessageBox } from "element-plus";

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

  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 NotificationCenter from "./NotificationCenter/index.vue";

  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 notificationVisible = ref(false)

const notificationCenterRef = ref(null)

const unreadCount = ref(0)

function toggleSideBar() {

  appStore.toggleSideBar()

}

// const redirect = ref(undefined)

// watch(route, (newRoute) => {

//   redirect.value = newRoute.query && newRoute.query.redirect

// }, { immediate: true })



function handleCommand(command) {

  switch (command) {

    case "setLayout":

      setLayout()

      break

    case "logout":

      logout()

      break

    default:

      break

  const appStore = useAppStore();

  const userStore = useUserStore();

  const settingsStore = useSettingsStore();

  const notificationVisible = ref(false);

  const notificationCenterRef = ref(null);

  const unreadCount = ref(0);

  function toggleSideBar() {

    appStore.toggleSideBar();

  }

}

  // const redirect = ref(undefined)

  // watch(route, (newRoute) => {

  //   redirect.value = newRoute.query && newRoute.query.redirect

  // }, { immediate: true })



function logout() {

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

    confirmButtonText: '确定',

    cancelButtonText: '取消',

    type: 'warning'

  }).then(() => {

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

      location.href = '/index'

  function handleCommand(command) {

    switch (command) {

      case "setLayout":

        setLayout();

        break;

      case "logout":

        logout();

        break;

      default:

        break;

    }

  }



  function logout() {

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

      confirmButtonText: "确定",

      cancelButtonText: "取消",

      type: "warning",

    })

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

}

      .then(() => {

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

          location.href = "/index";

        });

      })

      .catch(() => {});

  }



const emits = defineEmits(['setLayout'])

function setLayout() {

  emits('setLayout')

}

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

  function setLayout() {

    emits("setLayout");

  }



function toggleTheme() {

  settingsStore.toggleTheme()

}

  function toggleTheme() {

    settingsStore.toggleTheme();

  }



// 消息通知相关

function handleUnreadCountChange(count) {

  unreadCount.value = count

}

  // 消息通知相关

  function handleUnreadCountChange(count) {

    unreadCount.value = count;

  }



// 组件挂载时加载未读数量和定时刷新

let unreadCountTimer = null

onMounted(() => {

  // 延迟加载，确保组件已渲染

  nextTick(() => {

    if (notificationCenterRef.value) {

      notificationCenterRef.value.loadUnreadCount()

    }

  })

  // 定时刷新未读数量（每30秒）

  unreadCountTimer = setInterval(() => {

    if (notificationCenterRef.value) {

      notificationCenterRef.value.loadUnreadCount()

    }

  }, 30000)

})



// 监听 popover 显示状态，打开时加载消息列表

watch(notificationVisible, (val) => {

  if (val && notificationCenterRef.value) {

  // 组件挂载时加载未读数量和定时刷新

  let unreadCountTimer = null;

  onMounted(() => {

    // 延迟加载，确保组件已渲染

    nextTick(() => {

      notificationCenterRef.value.loadMessages()

    })

  }

})

      if (notificationCenterRef.value) {

        notificationCenterRef.value.loadUnreadCount();

      }

    });

    // 定时刷新未读数量（每30秒）

    // unreadCountTimer = setInterval(() => {

    //   if (notificationCenterRef.value) {

    //     notificationCenterRef.value.loadUnreadCount()

    //   }

    // }, 30000)

  });



onUnmounted(() => {

  if (unreadCountTimer) {

    clearInterval(unreadCountTimer)

  }

})

  // 监听 popover 显示状态，打开时加载消息列表

  watch(notificationVisible, val => {

    if (val && notificationCenterRef.value) {

      nextTick(() => {

        notificationCenterRef.value.loadMessages();

      });

    }

  });



  onUnmounted(() => {

    if (unreadCountTimer) {

      clearInterval(unreadCountTimer);

    }

  });

</script>



<style lang='scss' scoped>

.navbar {

  height: 50px;

  overflow: hidden;

  position: relative;

  background: var(--navbar-bg);

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

  .navbar {

    height: 50px;

    overflow: hidden;

    position: relative;

    background: var(--navbar-bg);

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



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

  }



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

    .hamburger-container {

      line-height: 46px;

      height: 100%;

      font-size: 18px;

      color: var(--navbar-text);

      vertical-align: text-bottom;

      float: left;

      cursor: pointer;

      transition: background 0.3s;

      -webkit-tap-highlight-color: transparent;



      &.hover-effect {

        cursor: pointer;

        transition: background 0.3s;

      &:hover {

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

      }

    }



        &:hover {

          background: rgba(0, 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;

      display: flex;



      &:focus {

        outline: none;

      }



      .right-menu-item {

        display: inline-block;

        padding: 0 8px;

        height: 100%;

        font-size: 18px;

        color: var(--navbar-text);

        vertical-align: text-bottom;



        &.hover-effect {

          cursor: pointer;

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

            }

          }

        }

      }



      &.theme-switch-wrapper {

      .notification-container {

        margin-right: 20px;

        display: flex;

        align-items: center;

        cursor: pointer;



        svg {

          transition: transform 0.3s;

        .notification-badge {

          :deep(.el-badge__content) {

            border: none;

          }

        }

      }



          &:hover {

            transform: scale(1.15);

      .avatar-container {

        margin-right: 40px;



        .avatar-wrapper {

          margin-top: 5px;

          position: relative;



          .user-avatar {

            cursor: pointer;

            width: 40px;

            height: 40px;

            border-radius: 50px;

          }



          i {

            cursor: pointer;

            position: absolute;

            right: -20px;

            top: 14px;

            font-size: 12px;

          }

        }

      }

    }



    .notification-container {

      margin-right: 20px;

      display: flex;

      align-items: center;

      cursor: pointer;



      .notification-badge {

        :deep(.el-badge__content) {

          border: none;

        }

      }

    }



    .avatar-container {

      margin-right: 40px;



      .avatar-wrapper {

        margin-top: 5px;

        position: relative;



        .user-avatar {

          cursor: pointer;

          width: 40px;

          height: 40px;

          border-radius: 50px;

        }



        i {

          cursor: pointer;

          position: absolute;

          right: -20px;

          top: 14px;

          font-size: 12px;

        }

      }

    }

  }

}



</style>



<style lang="scss">

.notification-popover {

  padding: 0 !important;

  
  .el-popover__title {

    display: none;

  }

  
  .el-popover__body {

  .notification-popover {

    padding: 0 !important;



    .el-popover__title {

      display: none;

    }



    .el-popover__body {

      padding: 0 !important;

    }

  }

}

.el-badge__content.is-fixed{

  top: 12px;

}

  .el-badge__content.is-fixed {

    top: 12px;

  }

</style>