TBA_GXPT/ruoyi-ui/src/layout/components/Sidebar/index.vue

<template>
  <div :class="{ 'has-logo': showLogo }"
       :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
    <logo v-if="showLogo" :collapse="isCollapse"/>
    <el-row class="headBar">
      <el-col :span="8.5">
        <div class="line-left-img">
          <img src="@/assets/images/top.png" alt=""/>
        </div>
        <div class="line-left-name">
          <span>上海市水务海洋数字孪生模型服务管理系统</span>
        </div>
      </el-col>
      <el-col :span="14">
        <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
          <el-menu
              :default-active="activeMenu"
              :collapse="isCollapse"
              :background-color="sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
              :text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
              :unique-opened="true"
              :active-text-color="theme"
              :collapse-transition="false"
              mode="horizontal"
          >
            <sidebar-item
                v-for="(route, index) in sidebarRouters"
                :key="route.path + index"
                :item="route"
                :base-path="route.path"
            />
          </el-menu>
        </el-scrollbar>
      </el-col>
      <el-col :span="1">
        <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>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/assets/styles/variables.module.scss'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
import useUserStore from '@/store/modules/user'

const route = useRoute();
const appStore = useAppStore()
const userStore = useUserStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()

const sidebarRouters = computed(() => permissionStore.sidebarRouters);
const showLogo = computed(() => settingsStore.sidebarLogo);
const sideTheme = computed(() => settingsStore.sideTheme);
const theme = computed(() => settingsStore.theme);
const isCollapse = computed(() => !appStore.sidebar.opened);

const activeMenu = computed(() => {
  const {meta, path} = route;
  // if set path, the sidebar will highlight the path you set
  if (meta.activeMenu) {
    return meta.activeMenu;
  }
  return path;

})

function handleCommand(command) {
  switch (command) {
    case "setLayout":
      setLayout();
      break;
    case "logout":
      logout();
      break;
    default:
      break;
  }
}
</script>
<style>
.headBar {
  height: 60px;
  line-height: 60px;
  background-image: url('../../../assets/images/title-background.png') !important;

  .line-left-img {
    float: left;

    img {
      width: 60px;
      height: 60px;
      margin-left: 10px;
    }
  }

  .line-left-name {
    float: left;

    span {
      font-size: 28px;
      font-weight: bold;
      color: #f5f6f8;
      height: 60px;
      line-height: 60px;
      letter-spacing: 3px;
    }
  }
}

.el-menu {
  background-color: transparent !important; /* 使用 !important 确保优先级 */
  font-size: 20px !important;
}

.avatar-container {
  .avatar-wrapper {
    margin-top: 10px;
    position: relative;

    .user-avatar {
      cursor: pointer;
      width: 40px;
      height: 40px;
      border-radius: 10px;
    }

    i {
      cursor: pointer;
      position: absolute;
      right: -20px;
      top: 25px;
      font-size: 12px;
    }
  }
}
</style>