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="7">
        <div class="line-left-img">
          <!-- <img src="@/assets/images/top.png" alt=""/> -->
        </div>
        <div class="line-left-name" style="margin-left: 4%;">
          <span>上海市水务海洋数字孪生模型服务管理系统</span>
        </div>
      </el-col>
      <el-col :span="17">
        <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper" style="margin-left: 3%;">
          <el-menu
              :default-active="activeMenu"
              class="custom-menu"
              style="margin-top: 1%;"
              :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
                style="margin-top: -0.7%;"
                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" style="margin-left:-5%;">
        <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 { ElMessageBox } from 'element-plus'
import useUserStore from '@/store/modules/user'
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import Cookies from 'js-cookie'
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 logout() {
  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    userStore.logOut().then(() => {
      location.href = 'sh/index';
    })
  }).catch(() => { });
}
onMounted(() => {
  appStore.sidebar.opened = true
  console.log(Cookies.get('sidebarStatus'))
});
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;
  background-position: -90px 0;
  background-size: auto 122%;        /* 高度100%，宽度按原比例 */
  background-repeat: no-repeat;
  .line-left-img {
    float: left;

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

  .line-left-name {
    float: left;

    span {
      font-size: 27px;
      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 {
  background-image: url('../../../assets/images/title-background.png') !important;
  background-position: right center;
  .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>
<style scoped>
/* 深度穿透修改 */
:deep(.el-sub-menu__title .el-tooltip__trigger .el-tooltip__trigger){
  font-size: 18px !important;
}
:deep(.menu-title){
  font-size: 18px !important;
  
}
:deep(.custom-menu .el-menu-item),
:deep(.custom-menu .el-submenu__title) {
  font-size: 18px !important;
}
</style>