项目名称修改

gaoluyang

2025-05-13 03738cc67002d7feea03d366f42e4bd90eb449d0

 src/layout/components/Navbar.vue

@@ -1,31 +1,18 @@
<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>

      <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="center-menu">

      <span class="label">MIS系统（管理信息系统）</span>

    </div>

    <div class="right-menu">

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

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

      <div class="avatar-container">

        <el-dropdown 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="getters.avatar" class="user-avatar" />

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

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

          </div>

          <template #dropdown>

@@ -33,10 +20,10 @@
              <router-link to="/user/profile">

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

              </router-link>

              <el-dropdown-item @click="setLayout">

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

                <span>布局设置</span>

              </el-dropdown-item>

              <el-dropdown-item divided @click="logout">

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

                <span>退出登录</span>

              </el-dropdown-item>

            </el-dropdown-menu>

@@ -57,12 +44,29 @@
import HeaderSearch from '@/components/HeaderSearch'

import RuoYiGit from '@/components/RuoYi/Git'

import RuoYiDoc from '@/components/RuoYi/Doc'

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



function toggleSideBar() {

  store.dispatch('app/toggleSideBar')

  appStore.toggleSideBar()

}



function handleCommand(command) {

  switch (command) {

    case "setLayout":

      setLayout()

      break

    case "logout":

      logout()

      break

    default:

      break

  }

}



function logout() {

@@ -71,15 +75,19 @@
    cancelButtonText: '取消',

    type: 'warning'

  }).then(() => {

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

      location.href = '/index';

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

      location.href = '/index'

    })

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

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

}



const emits = defineEmits(['setLayout'])

function setLayout() {

  emits('setLayout');

  emits('setLayout')

}



function toggleTheme() {

  settingsStore.toggleTheme()

}

</script>



@@ -88,8 +96,19 @@
  height: 50px;

  overflow: hidden;

  position: relative;

  background: #fff;

  background: var(--navbar-bg);

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

  .center-menu {

    line-height: 50px;

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    .label {

      font-weight: bold;

      font-size: 18px;

      color: #333333;

    }

  }



  .hamburger-container {

    line-height: 46px;

@@ -133,7 +152,7 @@
      padding: 0 8px;

      height: 100%;

      font-size: 18px;

      color: #5a5e66;

      color: var(--navbar-text);

      vertical-align: text-bottom;



      &.hover-effect {

@@ -142,6 +161,19 @@


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

          }

        }

      }

    }

@@ -157,14 +189,14 @@
          cursor: pointer;

          width: 40px;

          height: 40px;

          border-radius: 10px;

          border-radius: 50px;

        }



        i {

          cursor: pointer;

          position: absolute;

          right: -20px;

          top: 25px;

          top: 14px;

          font-size: 12px;

        }

      }