dashboard/frontend/src/layout/index.vue

<template>
  <div class="lux-shell">
    <div class="lux-shell-bg" aria-hidden="true">
      <div class="lux-orb lux-orb-1" />
      <div class="lux-orb lux-orb-2" />
      <div class="lux-orb lux-orb-3" />
    </div>

    <el-container class="lux-shell-body">
      <el-aside width="220px" class="sidebar-glass">
        <div class="sidebar-logo">
          <h2>Luxsin CMS</h2>
        </div>
        <el-menu
          class="lux-menu"
          :default-active="activeMenu"
          background-color="transparent"
          text-color="#cbd5e1"
          active-text-color="#7dd3fc"
          router
        >
          <el-sub-menu index="1">
            <template #title>
              <el-icon><Headset /></el-icon>
              <span>耳机管理</span>
            </template>
            <el-menu-item index="/brand">
              <el-icon><Collection /></el-icon>
              <span>品牌管理</span>
            </el-menu-item>
            <el-menu-item index="/model">
              <el-icon><List /></el-icon>
              <span>型号管理</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="upgrade">
            <template #title>
              <el-icon><Upload /></el-icon>
              <span>升级管理</span>
            </template>
            <el-menu-item index="/ota">
              <el-icon><Document /></el-icon>
              <span>OTA 管理</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>

      <el-container class="lux-right-col">
        <el-header class="lux-header">
          <el-button
            circle
            type="primary"
            class="lux-header-power-btn"
            title="退出登录"
            aria-label="退出登录"
            @click="handleLogout"
          >
            <el-icon :size="18"><SwitchButton /></el-icon>
          </el-button>
        </el-header>
        <el-main class="lux-main">
          <router-view />
        </el-main>
        <el-footer class="lux-footer" height="auto">
          <span class="lux-footer-copy">&copy;Powered By EafonYang</span>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Headset, Collection, List, Upload, Document, SwitchButton } from '@element-plus/icons-vue'
import { clearToken } from '@/utils/auth'

const route = useRoute()
const router = useRouter()
const activeMenu = computed(() => route.path)

const handleLogout = () => {
  clearToken()
  ElMessage.success('已退出登录')
  router.push('/login')
}
</script>

<style scoped>
.lux-right-col {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
</style>