样式修改

zhangwencui

2026-06-18 9f5e18cc415cd3fef13f105ffeabae3c01ba9665

 src/layout/components/Navbar.vue

@@ -1,206 +1,522 @@
<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" />

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

      <div class="avatar-container">

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

          <div class="avatar-wrapper">

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

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

          </div>

          <template #dropdown>

            <el-dropdown-menu>

              <router-link to="/user/profile">

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

              </router-link>

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

                <span>布局设置</span>

              </el-dropdown-item>

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

                <span>退出登录</span>

              </el-dropdown-item>

            </el-dropdown-menu>

          </template>

        </el-dropdown>

      </div>

    </div>

  </div>

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



function toggleSideBar() {

  appStore.toggleSideBar()

}



function handleCommand(command) {

  switch (command) {

    case "setLayout":

      setLayout()

      break

    case "logout":

      logout()

      break

    default:

      break

  }

}



function logout() {

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

    confirmButtonText: '确定',

    cancelButtonText: '取消',

    type: 'warning'

  }).then(() => {

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

      location.href = '/index'

    })

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

}



const emits = defineEmits(['setLayout'])

function setLayout() {

  emits('setLayout')

}



function toggleTheme() {

  settingsStore.toggleTheme()

}

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

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

    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;

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

          }

        }

      }

    }



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

<template>
  <div class="navbar">
    <div class="navbar-left">
      <div class="navbar-logo"
           v-if="appStore.device !== 'mobile'"
           :style="{ width: logoWidth }">
        <logo v-if="settingsStore.sidebarLogo"
              :collapse="logoCollapse" />
      </div>
      <div v-if="settingsStore.topNav && appStore.device !== 'mobile'"
           class="top-nav-wrapper">
        <top-nav />
      </div>
      <div v-else
           class="left-menu-spacer"></div>
    </div>
    <div class="right-menu">
      <div class="action-icons">
        <!-- 搜索图标 -->
        <div class="right-menu-item hover-effect action-icon-btn"
             @click="openHeaderSearch">
          <el-icon :size="18">
            <Search />
          </el-icon>
        </div>
        <header-search ref="headerSearchRef"
                       :keyword="topSearchKeyword"
                       class="search-popup-trigger"
                       style="display: none;" />
        <!-- 通知图标 -->
        <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 action-icon-btn">
              <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>
        <!-- 全屏图标 -->
        <div class="right-menu-item hover-effect screenfull-container action-icon-btn">
          <screenfull />
        </div>
      </div>
      <div class="user-profile">
        <el-dropdown @command="handleCommand"
                     class="profile-dropdown"
                     trigger="click">
          <div class="profile-trigger">
            <div class="avatar-inner">
              <img :src="userStore.avatar"
                   class="user-avatar" />
              <div class="user-status-dot"></div>
            </div>
            <div class="profile-trigger-text">
              <div class="user-name">{{ userStore.nickName || userStore.name || "管理员" }}</div>
            </div>
            <el-icon class="caret-icon"><caret-bottom /></el-icon>
          </div>
          <template #dropdown>
            <div class="user-profile-dropdown-panel">
              <div class="user-profile-dropdown-head">
                <img :src="userStore.avatar"
                     class="user-profile-dropdown-avatar" />
                <div class="user-profile-dropdown-meta">
                  <div class="user-profile-dropdown-name">{{ userStore.nickName || userStore.name || "管理员" }}</div>
                  <div class="user-profile-dropdown-role">{{ userStore.roleName || "系统用户" }}</div>
                </div>
              </div>
              <el-dropdown-menu class="user-profile-dropdown">
                <router-link to="/user/profile">
                  <el-dropdown-item>
                    <el-icon>
                      <User />
                    </el-icon>个人中心
                  </el-dropdown-item>
                </router-link>
                <el-dropdown-item command="setLayout"
                                  v-if="settingsStore.showSettings">
                  <el-icon>
                    <Setting />
                  </el-icon>布局设置
                </el-dropdown-item>
                <el-dropdown-item divided
                                  command="logout"
                                  class="logout-item">
                  <el-icon>
                    <SwitchButton />
                  </el-icon>退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </div>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, computed, watch, onMounted, onUnmounted, nextTick } from "vue";
  import { ElMessageBox } from "element-plus";
  import {
    Bell,
    Search,
    User,
    Setting,
    SwitchButton,
    CaretBottom,
  } from "@element-plus/icons-vue";
  import Screenfull from "@/components/Screenfull";
  import HeaderSearch from "@/components/HeaderSearch";
  import NotificationCenter from "./NotificationCenter/index.vue";
  import Logo from "./Sidebar/Logo.vue";
  import TopNav from "@/components/TopNav/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 isTopNavLayout = computed(
    () => settingsStore.topNav && appStore.device !== "mobile"
  );
  const logoWidth = computed(() => {
    if (isTopNavLayout.value) {
      return "var(--sidebar-width)";
    }
    return appStore.sidebar.opened
      ? "var(--sidebar-width)"
      : "var(--sidebar-collapsed-width)";
  });
  const logoCollapse = computed(() => {
    if (isTopNavLayout.value) return false;
    return !appStore.sidebar.opened;
  });

  const topSearchKeyword = ref("");
  const headerSearchRef = ref(null);
  const notificationVisible = ref(false);
  const notificationCenterRef = ref(null);
  const unreadCount = ref(0);

  function openHeaderSearch() {
    headerSearchRef.value?.open(topSearchKeyword.value);
  }

  function handleCommand(command) {
    switch (command) {
      case "setLayout":
        setLayout();
        break;
      case "logout":
        logout();
        break;
      default:
        break;
    }
  }

  function logout() {
    ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        userStore.logOut().then(() => {
          location.href = "/index";
        });
      })
      .catch(() => {});
  }

  const emits = defineEmits(["setLayout"]);
  function 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>
  .navbar {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px 0 0;
    background: var(--navbar-bg);
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    z-index: var(--layout-header-z);
    color: var(--navbar-text);
  }

  .navbar-left {
    display: flex;
    align-items: center;
    height: 100%;
    flex: 1;
    min-width: 0;
  }

  .navbar-logo {
    height: 100%;
    display: flex;
    align-items: center;
    transition: width 0.25s ease;
    overflow: hidden;
    flex-shrink: 0;
    background-color: transparent;
  }

  .top-nav-wrapper {
    display: flex;
    align-items: stretch; /* 占满高度 */
    height: 100%;
    min-width: 0;
    flex: 1;
    padding: 0 12px;
    overflow: hidden;
  }

  .left-menu-spacer {
    flex: 1;
    min-width: 0;
  }

  .right-menu {
    display: flex;
    align-items: center;
    gap: 16px; // 调整组之间的间距

    .action-icons {
      display: flex;
      align-items: center;
      gap: 12px; // 图标之间的间距
      padding-right: 16px;
      border-right: 1px solid var(--surface-border);

      .action-icon-btn {
        width: 36px;
        height: 36px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--navbar-text);
        border-radius: 50%; // 圆形背景
        background: rgba(255, 255, 255, 0.1); // 浅浅的圆形框底色
        transition: all 0.2s ease;
        cursor: pointer;

        &:hover {
          background: rgba(255, 255, 255, 0.2); // 悬停加深
          color: #fff;
        }

        :deep(.svg-icon) {
          width: 18px !important;
          height: 18px !important;
        }

        :deep(.el-icon) {
          font-size: 18px !important;
        }
      }

      .notification-container {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .user-profile {
      .profile-dropdown {
        cursor: pointer;
      }

      .profile-trigger {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 38px;
        padding: 4px 10px 4px 6px;
        border-radius: 999px;
        border: 1px solid transparent;
        background: transparent;
        transition: 0.2s ease;

        &:hover {
          background: rgba(255, 255, 255, 0.1);
        }
      }

      .profile-trigger-text {
        display: flex;
        align-items: center;
        max-width: 120px;
        min-width: 0;
      }

      .user-name {
        font-size: 13px;
        font-weight: 500;
        color: var(--navbar-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1;
      }

      .avatar-inner {
        position: relative;
        flex-shrink: 0;
        display: flex;
      }

      .user-avatar {
        width: 30px;
        height: 30px;
        border-radius: 999px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        object-fit: cover;
        transition: 0.2s ease;
      }

      .profile-trigger:hover .user-avatar {
        transform: translateY(-1px);
      }

      .user-status-dot {
        position: absolute;
        bottom: -1px;
        right: -1px;
        width: 9px;
        height: 9px;
        background: #10b981;
        border: 2px solid #fff;
        border-radius: 999px;
      }

      .caret-icon {
        color: var(--navbar-text);
        opacity: 0.76;
        font-size: 12px;
        transition: 0.2s ease;
        margin-left: 2px;
      }

      .profile-trigger:hover .caret-icon {
        transform: translateY(1px);
        opacity: 1;
      }
    }
  }

  :deep(.user-profile-dropdown-panel) {
    min-width: 240px;
    color: var(--sidebar-text);
  }

  :deep(.user-profile-dropdown-head) {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 10px;
    margin: 0 6px 6px;
    border-radius: var(--radius-lg);
    // background: rgba(0, 0, 0, 0.18);
    // border: 1px solid rgba(var(--el-color-primary-rgb), 0.22);
  }

  :deep(.user-profile-dropdown-avatar) {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 2px solid rgba(var(--el-color-primary-rgb), 0.26);
    object-fit: cover;
    flex-shrink: 0;
  }

  :deep(.user-profile-dropdown-meta) {
    min-width: 0;
  }

  :deep(.user-profile-dropdown-name) {
    font-size: 13px;
    font-weight: 800;
    color: #000;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :deep(.user-profile-dropdown-role) {
    margin-top: 2px;
    font-size: 12px;
    // color: var(--sidebar-muted, rgba(255, 255, 255, 0.62));
    color: #64748b;
    line-height: 1.2;
  }

  :deep(.user-profile-dropdown) {
    background: var(--sidebar-bg) !important;
    border: 1px solid var(--surface-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-menu) !important;
    padding: 6px !important;
    backdrop-filter: blur(16px);

    .el-dropdown-menu__item {
      color: var(--sidebar-text) !important;
      border-radius: var(--radius-md) !important;
      margin: 2px 0 !important;
      padding: 8px 16px !important;
      font-size: 13px !important;
      display: flex;
      align-items: center;
      gap: 10px;

      .el-icon {
        font-size: 16px;
        margin-right: 0;
      }

      &:hover {
        background: var(--menu-hover) !important;
        color: var(--menu-active-text) !important;
      }

      &.el-dropdown-menu__item--divided {
        border-top-color: var(--surface-border) !important;
        margin-top: 6px !important;
        padding-top: 10px !important;

        &::before {
          display: none;
        }
      }

      &.logout-item {
        color: #f87171 !important;

        &:hover {
          background: rgba(239, 68, 68, 0.1) !important;
          color: #ef4444 !important;
        }
      }
    }
  }
</style>

<style lang="scss">
  .notification-popover {
    padding: 0 !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    box-shadow: var(--shadow-menu) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(16px);
    color: rgba(15, 23, 42, 0.92);

    .el-popover__title {
      display: none;
    }

    .el-popover__body {
      padding: 0 !important;
    }
  }

  .el-badge__content.is-fixed {
    top: 8px;
  }
</style>