yangyi-open-api-platform/ui/yangyi-open-api-platform-ui/src/views/main.vue

<template>
  <el-container class="main-layout">
    <!-- 头部导航 -->
    <el-header class="layout-header">
      <div class="header-left">
        <div class="logo">
          <i class="el-icon-monitor logo-icon"></i>
          <span class="system-name">管理系统</span>
        </div>

        <!-- 移动端菜单切换按钮 -->
        <el-button
            class="mobile-menu-btn"
            icon="el-icon-menu"
            @click="toggleMobileMenu"
            v-show="isMobile"
        />
      </div>

      <div class="header-right">
        <el-dropdown @command="handleUserCommand">
          <div class="user-info">
            <el-avatar :size="32" :src="userInfo.avatar" />
            <span class="username">{{ userInfo.name }}</span>
            <i class="el-icon-arrow-down"></i>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <!--<el-dropdown-item command="profile">-->
              <!--  <i class="el-icon-user"></i>个人信息-->
              <!--</el-dropdown-item>-->
              <!--<el-dropdown-item command="settings">-->
              <!--  <i class="el-icon-setting"></i>系统设置-->
              <!--</el-dropdown-item>-->
              <el-dropdown-item divided command="logout">
                <i class="el-icon-switch-button"></i>退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <el-tooltip content="全屏切换" placement="bottom">
          <el-button
              class="header-btn"
              :icon="isFullscreen ? 'el-icon-close' : 'el-icon-full-screen'"
              @click="toggleFullscreen"
          />
        </el-tooltip>

        <!--<el-tooltip content="消息通知" placement="bottom">-->
        <!--  <el-badge :value="5" class="header-btn">-->
        <!--    <el-button icon="el-icon-bell" @click="showNotifications" />-->
        <!--  </el-badge>-->
        <!--</el-tooltip>-->
      </div>
    </el-header>

    <el-container class="layout-body">
      <!-- 侧边栏菜单 -->
      <el-aside
          :width="isCollapse ? '64px' : '240px'"
          :class="['layout-aside', { 'mobile-open': mobileMenuOpen }]"
      >
        <div class="menu-toggle" @click="toggleCollapse" v-if="!isMobile">
          <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
        </div>

        <el-menu
            :default-active="activeMenu"
            :collapse="isCollapse && !isMobile"
            :collapse-transition="false"
            router
            class="sidebar-menu"
            background-color="#001529"
            text-color="#bfbfbf"
            active-text-color="#1890ff"
            @select="handleMenuSelect"
        >
          <template v-for="menu in menuList" :key="menu.path">
            <!-- 有子菜单的项 -->
            <el-sub-menu v-if="menu.children && menu.children.length" :index="menu.path">
              <template #title>
                <i :class="menu.icon"></i>
                <span>{{ menu.title }}</span>
              </template>
              <el-menu-item
                  v-for="child in menu.children"
                  :key="child.path"
                  :index="child.path"
              >
                <i :class="child.icon"></i>
                <span>{{ child.title }}</span>
              </el-menu-item>
            </el-sub-menu>

            <!-- 没有子菜单的项 -->
            <el-menu-item v-else :index="menu.path">
              <i :class="menu.icon"></i>
              <span>{{ menu.title }}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </el-aside>

      <!-- 主内容区域 -->
      <el-main class="layout-main">
        <div class="main-content">
          <router-view v-slot="{ Component }">
            <transition name="fade-transform" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </div>
      </el-main>
    </el-container>

    <!-- 移动端遮罩层 -->
    <div
        v-show="isMobile && mobileMenuOpen"
        class="mobile-mask"
        @click="closeMobileMenu"
    ></div>
  </el-container>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {getUserName, getUserAvatar, clearTokenAndUserInfo, getUserRole} from "/src/commom/utils/auth.js";

const router = useRouter()
const route = useRoute()

// 响应式数据
const isCollapse = ref(false)
const isFullscreen = ref(false)
const mobileMenuOpen = ref(false)
const isMobile = ref(false)

const name = computed(()=>getUserName())
const avatar = 'https://www.loliapi.com/acg/pp/'
// 用户信息
const userInfo = ref({
  name: name?name:'管理员',
  avatar: avatar &&avatar !=='' ?avatar:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
})

// 菜单数据
const menuList = computed(()=>{
  //根据用户角色显示菜单
  const role = getUserRole();
  console.log(role)
  if(role === '管理员'){
    return [
      {
        path: '/interfaceInfo',
        title: '接口管理',
        icon: 'el-icon-document',
        children: [
          {
            path: '/manage/interfaceInfo',
            title: '接口管理',
            icon: 'el-icon-notebook-2'
          }
        ]
      },
    ]
  }else if (role === '用户'){
    return [
      {
        path: '/home',
        title: '主页',
        icon: 'el-icon-document',
        children: [
          {
            path: '/home/interfaceInfo',
            title: '接口信息',
            icon: 'el-icon-notebook-2'
          }
        ]
      },
    ]
  }else{
    return [
      {
        path: '/home',
        title: '主页',
        icon: 'el-icon-document',
        children: [
          {
            path: '/home/interfaceInfo',
            title: '接口信息',
            icon: 'el-icon-notebook-2'
          }
        ]
      },
    ]
  }
})
const menuList1 = ref([
  {
    path: '/dashboard',
    title: '仪表盘',
    icon: 'el-icon-data-analysis',
    children: [
      {
        path: '/dashboard/overview',
        title: '数据概览',
        icon: 'el-icon-trend-charts'
      },
      {
        path: '/dashboard/analytics',
        title: '数据分析',
        icon: 'el-icon-data-line'
      }
    ]
  },
  {
    path: '/user',
    title: '用户管理',
    icon: 'el-icon-user',
    children: [
      {
        path: '/user/list',
        title: '用户列表',
        icon: 'el-icon-user-solid'
      },
      {
        path: '/user/role',
        title: '角色管理',
        icon: 'el-icon-s-custom'
      },
      {
        path: '/user/permission',
        title: '权限管理',
        icon: 'el-icon-key'
      }
    ]
  },
  {
    path: '/interfaceInfo',
    title: '接口管理',
    icon: 'el-icon-document',
    children: [
      {
        path: '/manage/interfaceInfo',
        title: '接口管理',
        icon: 'el-icon-notebook-2'
      }
    ]
  },
  // {
  //   path: '/system',
  //   title: '系统设置',
  //   icon: 'el-icon-setting',
  //   children: [
  //     {
  //       path: '/system/basic',
  //       title: '基础设置',
  //       icon: 'el-icon-tools'
  //     },
  //     {
  //       path: '/system/logs',
  //       title: '系统日志',
  //       icon: 'el-icon-document-checked'
  //     }
  //   ]
  // },
  // {
  //   path: '/monitor',
  //   title: '系统监控',
  //   icon: 'el-icon-monitor',
  //   children: [
  //     {
  //       path: '/monitor/server',
  //       title: '服务器监控',
  //       icon: 'el-icon-cpu'
  //     },
  //     {
  //       path: '/monitor/performance',
  //       title: '性能监控',
  //       icon: 'el-icon-odometer'
  //     }
  //   ]
  // }
])


// 计算属性
const activeMenu = computed(() => route.path)

// 方法
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}

const toggleMobileMenu = () => {
  mobileMenuOpen.value = !mobileMenuOpen.value
}

const closeMobileMenu = () => {
  mobileMenuOpen.value = false
}

const handleMenuSelect = () => {
  if (isMobile.value) {
    closeMobileMenu()
  }
}

const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
    isFullscreen.value = true
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
      isFullscreen.value = false
    }
  }
}

const handleUserCommand = (command) => {
  switch (command) {
    // case 'profile':
    //   router.push('/profile')
    //   break
    // case 'settings':
    //   router.push('/system/basic')
    //   break
    case 'logout':
      handleLogout()
      break
  }
}

const handleLogout = async () => {
  try {
    await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    // 清除用户信息
    clearTokenAndUserInfo()
    ElMessage.success('退出成功')
    router.push('/login')
  } catch (error) {
    // 用户取消退出
  }
}

const showNotifications = () => {
  ElMessage.info('这是消息通知')
}

// 检测屏幕尺寸
const checkMobile = () => {
  isMobile.value = window.innerWidth <= 768
  if (!isMobile.value) {
    mobileMenuOpen.value = false
  }
}

// 监听全屏状态变化
const handleFullscreenChange = () => {
  isFullscreen.value = !!document.fullscreenElement
}

// 监听窗口大小变化
const handleResize = () => {
  checkMobile()
}

// 生命周期
onMounted(() => {
  document.addEventListener('fullscreenchange', handleFullscreenChange)
  window.addEventListener('resize', handleResize)
  checkMobile() // 初始化时检测一次
})

onUnmounted(() => {
  document.removeEventListener('fullscreenchange', handleFullscreenChange)
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.main-layout {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh !important;
  width: 100vw !important;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* 头部样式 */
.layout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
  padding: 0 20px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  z-index: 1001;
  height: 60px !important;
  position: relative;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 18px;
  color: #1890ff;
}

.logo-icon {
  font-size: 24px;
}

.system-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.mobile-menu-btn {
  display: none;
  border: none;
  background: transparent;
  font-size: 18px;
  color: #666;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.user-info:hover {
  background-color: #f5f5f5;
}

.username {
  font-size: 14px;
  color: #333;
}

.header-btn {
  border: none;
  background: transparent;
  font-size: 16px;
  color: #666;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.3s;
}

.header-btn:hover {
  background-color: #f5f5f5;
  color: #1890ff;
}

/* 主体样式 */
.layout-body {
  height: calc(100vh - 60px) !important;
  width: 100%;
  position: relative;
}

/* 侧边栏样式 */
.layout-aside {
  background: #001529;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.menu-toggle {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  border-bottom: 1px solid #002140;
  transition: all 0.3s;
}

.menu-toggle:hover {
  background: #002140;
}

.menu-toggle i {
  font-size: 18px;
}

.sidebar-menu {
  border: none;
  height: calc(100% - 48px);
  overflow-y: auto;
}

.sidebar-menu:not(.el-menu--collapse) {
  width: 240px;
}

/* 主内容区域样式 */
.layout-main {
  padding: 0;
  background: #f0f2f5;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.main-content {
  height: 100%;
  padding: 20px;
  overflow-y: auto;
}

/* 移动端遮罩层 */
.mobile-mask {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

/* 过渡动画 */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.3s;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .layout-header {
    padding: 0 16px;
  }

  .system-name {
    font-size: 16px;
  }

  .username {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
  }

  .layout-aside {
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s;
    width: 240px !important;
  }

  .layout-aside.mobile-open {
    transform: translateX(0);
  }

  .menu-toggle {
    display: none;
  }

  .sidebar-menu {
    height: 100%;
  }

  .main-content {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .layout-header {
    padding: 0 12px;
  }

  .header-right {
    gap: 8px;
  }

  .main-content {
    padding: 12px;
  }

  .logo {
    gap: 8px;
  }

  .logo-icon {
    font-size: 20px;
  }

  .system-name {
    font-size: 16px;
  }
}

/* 滚动条样式 */
.main-content::-webkit-scrollbar {
  width: 6px;
}

.main-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.main-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.main-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.sidebar-menu::-webkit-scrollbar {
  width: 4px;
}

.sidebar-menu::-webkit-scrollbar-track {
  background: #001529;
}

.sidebar-menu::-webkit-scrollbar-thumb {
  background: #003366;
  border-radius: 2px;
}

.sidebar-menu::-webkit-scrollbar-thumb:hover {
  background: #004488;
}

/* 确保全局样式 */
:global(html), :global(body) {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

:global(#app) {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
</style>