vending-machine/admin/src/layout/AdminLayout.vue

<template>
  <el-container class="admin-layout">
    <!-- 侧边栏 -->
    <el-aside :width="isCollapse ? '64px' : '240px'" class="aside">
      <div class="logo">
        <img src="/favicon.svg" alt="logo" class="logo-img" />
        <span v-if="!isCollapse" class="logo-text">贩卖机管理后台</span>
      </div>
      <el-scrollbar>
        <el-menu
          :default-active="currentRoute"
          :collapse="isCollapse"
          router
          background-color="#1d1e1f"
          text-color="rgba(255,255,255,0.65)"
          active-text-color="#ffffff"
          :collapse-transition="false"
          class="side-menu"
        >
          <el-menu-item
            v-for="item in menuItems"
            :key="item.path"
            :index="item.path"
          >
            <el-icon><component :is="item.icon" /></el-icon>
            <template #title>{{ item.title }}</template>
          </el-menu-item>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container class="main-container">
      <!-- 顶部栏 -->
      <el-header class="header">
        <div class="header-left">
          <el-icon class="collapse-btn" @click="isCollapse = !isCollapse">
            <Fold v-if="!isCollapse" />
            <Expand v-else />
          </el-icon>
          <el-breadcrumb separator="/" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/dashboard' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-if="currentTitle">{{ currentTitle }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="header-right">
          <el-dropdown @command="handleCommand" trigger="click">
            <span class="admin-user">
              <el-avatar :size="28" style="background:#409eff;margin-right:8px;">管</el-avatar>
              管理员
              <el-icon style="margin-left:4px"><ArrowDown /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="logout">
                  <el-icon><SwitchButton /></el-icon>退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <!-- 主内容区 -->
      <el-main class="main-content">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Fold, Expand, ArrowDown, SwitchButton } from '@element-plus/icons-vue'
import { useAuthStore } from '@/store/auth'

const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()
const isCollapse = ref(false)

const currentRoute = computed(() => route.path)
const currentTitle = computed(() => {
  const item = menuItems.find(m => m.path === route.path)
  return item?.title || ''
})

// 侧边栏菜单项
const menuItems = [
  { path: '/dashboard', title: '仪表盘', icon: 'Odometer' },
  { path: '/banner', title: 'Banner 管理', icon: 'Picture' },
  { path: '/entry', title: '入口图片管理', icon: 'Grid' },
  { path: '/coupon', title: '优惠券管理', icon: 'Ticket' },
  { path: '/stamp', title: '节日印花管理', icon: 'Present' },
  { path: '/membership', title: '会员管理', icon: 'UserFilled' },
  { path: '/points', title: '积分配置', icon: 'Coin' },
  { path: '/user', title: '用户管理', icon: 'User' },
  { path: '/content', title: '内容管理', icon: 'Document' },
]

function handleCommand(command: string) {
  if (command === 'logout') {
    authStore.logout()
    router.push('/login')
  }
}
</script>

<style scoped>
.admin-layout {
  height: 100vh;
}

.aside {
  background: #1d1e1f;
  overflow: hidden;
  transition: width 0.3s;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}

.logo {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.logo-img {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.logo-text {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  margin-left: 10px;
  white-space: nowrap;
  letter-spacing: 1px;
}

.side-menu {
  border-right: none;
}

.side-menu .el-menu-item {
  height: 48px;
  line-height: 48px;
  margin: 2px 8px;
  border-radius: 6px;
}

.side-menu .el-menu-item.is-active {
  background: #409eff !important;
  color: #fff !important;
}

.side-menu .el-menu-item:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.08) !important;
}

.main-container {
  background: #f0f2f5;
}

.header {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 56px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  z-index: 1;
}

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

.collapse-btn {
  font-size: 20px;
  cursor: pointer;
  color: #333;
  transition: color 0.2s;
}

.collapse-btn:hover {
  color: #409eff;
}

.breadcrumb {
  font-size: 14px;
}

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

.admin-user {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  color: #333;
}

.admin-user:hover {
  color: #409eff;
}

.main-content {
  padding: 20px;
  overflow-y: auto;
}
</style>