henan-backend/ruoyi-ui/src/layout/components/Navbar.vue

<template>
  <div class="navbar">
    <!-- 顶栏与标签页合并成一条
         原来「面包屑 + 标签页」是两条叠在一起的栏，而且都在显示当前位置
         （面包屑显示"首页"，紧挨着的标签页也显示"首页"）= 重复，还白占 108px 竖向空间。
         现在只保留标签页（多标签导航更实用），面包屑去掉。 -->
    <tags-view v-if="showTagsView" class="navbar-tags-view" />

    <div class="right-menu">
      <!-- 任意页面都能一键看"当前这个页面"的操作记录 -->
      <div
        v-if="showOperLog"
        v-hasPermi="['monitor:operlog:query']"
        class="right-menu-item operlog-entry"
        @click="goOperationLog"
      >
        <i class="el-icon-document" />
        <span class="operlog-text">操作日志</span>
      </div>
      <el-dropdown class="avatar-container right-menu-item" trigger="click">
        <div class="avatar-wrapper">
          <img :src="avatar" class="user-avatar">
          <span class="user-name">{{ name }}</span>
          <i class="el-icon-caret-bottom" />
        </div>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/user/profile">
            <el-dropdown-item>个人中心</el-dropdown-item>
          </router-link>
          <el-dropdown-item divided @click.native="logout">
            <span>退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import TagsView from './TagsView'

export default {
  components: {
    TagsView
  },
  computed: {
    ...mapGetters([
      'avatar',
      'name'
    ]),
    /** 标签页已并入顶栏，是否显示跟随布局设置 */
    showTagsView() {
      return this.$store.state.settings.tagsView
    },
    /** 已经在操作日志页时不显示入口 */
    showOperLog() {
      return this.$route.path !== '/system/log/operlog'
    }
  },
  methods: {
    /** 跳到操作日志，并自动按当前页面的菜单名筛选 */
    goOperationLog() {
      const pageTitle = (this.$route.meta && this.$route.meta.title) || ''
      this.$router.push({
        path: '/system/log/operlog',
        query: pageTitle ? { title: pageTitle } : {}
      })
    },
    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/#/login';
        })
      }).catch(() => {});
    }
  }
}
</script>

<style lang="scss" scoped>
.navbar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 58px;
  overflow: hidden;
  position: relative;
  /* 原来是白色毛玻璃 + 蓝影（rgba(47,107,255,.08)），
     与奶油菜单卡不是一套；统一成不透明奶油卡 + 花粉细边 + 暖棕柔影，并去掉 backdrop-filter */
  background: #fffdfa;
  box-shadow: 0 2px 8px rgba(139, 115, 85, 0.10);
  border: 1px solid rgba(212, 160, 160, 0.55);
  border-radius: 14px;
  margin: 6px 10px 6px 0;
  padding: 0 10px 0 8px;

  /* 面包屑与 top-nav 模式不再使用（当前位置由标签页表达） */
  .navbar-tags-view {
    flex: 1 1 auto;
    min-width: 0;
  }

  .errLog-container {
    display: inline-block;
    vertical-align: top;
  }

  .right-menu {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding-right: 4px;

    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-flex;
      align-items: center;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5f4f3d;
    }

    /* 操作日志入口：文案按钮，比图标更好找 */
    .operlog-entry {
      cursor: pointer;
      font-size: 14px;
      transition: color 0.2s;

      .operlog-text {
        margin-left: 4px;
      }

      &:hover {
        color: #9a5c35;
      }
    }

    .avatar-container {
      cursor: pointer;

      .avatar-wrapper {
        display: flex;
        align-items: center;
        height: 100%;

        .user-avatar {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          flex-shrink: 0;
        }

        .user-name {
          margin: 0 6px 0 8px;
          font-size: 14px;
          font-weight: 600;
          color: #4f4130;
          max-width: 120px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .el-icon-caret-bottom {
          font-size: 12px;
          color: #9a886e;
        }
      }
    }
  }
}
</style>