change

zhangwencui

14 小时以前 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"

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

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

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

      >

                  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,29 +64,29 @@
</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)

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

    appStore.toggleSideBar();

}

// const redirect = ref(undefined)

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

@@ -88,73 +96,75 @@
function handleCommand(command) {

  switch (command) {

    case "setLayout":

      setLayout()

      break

        setLayout();

        break;

    case "logout":

      logout()

      break

        logout();

        break;

    default:

      break

        break;

  }

}



function logout() {

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

    confirmButtonText: '确定',

    cancelButtonText: '取消',

    type: 'warning'

  }).then(() => {

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

      location.href = '/index'

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

      confirmButtonText: "确定",

      cancelButtonText: "取消",

      type: "warning",

    })

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

      .then(() => {

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

          location.href = "/index";

        });

      })

      .catch(() => {});

}



const emits = defineEmits(['setLayout'])

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

function setLayout() {

  emits('setLayout')

    emits("setLayout");

}



function toggleTheme() {

  settingsStore.toggleTheme()

    settingsStore.toggleTheme();

}



// 消息通知相关

function handleUnreadCountChange(count) {

  unreadCount.value = count

    unreadCount.value = count;

}



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

let unreadCountTimer = null

  let unreadCountTimer = null;

onMounted(() => {

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

  nextTick(() => {

    if (notificationCenterRef.value) {

      notificationCenterRef.value.loadUnreadCount()

        notificationCenterRef.value.loadUnreadCount();

    }

  })

    });

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

  unreadCountTimer = setInterval(() => {

    if (notificationCenterRef.value) {

      notificationCenterRef.value.loadUnreadCount()

    }

  }, 30000)

})

    // unreadCountTimer = setInterval(() => {

    //   if (notificationCenterRef.value) {

    //     notificationCenterRef.value.loadUnreadCount()

    //   }

    // }, 30000)

  });



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

watch(notificationVisible, (val) => {

  watch(notificationVisible, val => {

  if (val && notificationCenterRef.value) {

    nextTick(() => {

      notificationCenterRef.value.loadMessages()

    })

        notificationCenterRef.value.loadMessages();

      });

  }

})

  });



onUnmounted(() => {

  if (unreadCountTimer) {

    clearInterval(unreadCountTimer)

      clearInterval(unreadCountTimer);

  }

})

  });

</script>



<style lang='scss' scoped>

@@ -271,7 +281,6 @@
    }

  }

}



</style>



<style lang="scss">