FlashSaleSystem/flash-sale-frontend/src/layouts/AdminLayout.vue

<template>
  <div class="admin-layout">
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'" class="admin-sidebar">
        <div class="logo-container">
          <el-icon :size="24" class="logo-icon">
            <Lightning />
          </el-icon>
          <transition name="fade">
            <span v-if="!isCollapse" class="logo-text">管理后台</span>
          </transition>
        </div>
        
        <el-menu
          :default-active="activeMenu"
          :collapse="isCollapse"
          :collapse-transition="false"
          router
        >
          <el-menu-item index="/admin">
            <el-icon><DataLine /></el-icon>
            <template #title>仪表盘</template>
          </el-menu-item>
          
          <el-menu-item index="/admin/products">
            <el-icon><ShoppingBag /></el-icon>
            <template #title>商品管理</template>
          </el-menu-item>
          
          <el-menu-item index="/admin/flashsales">
            <el-icon><Lightning /></el-icon>
            <template #title>秒杀管理</template>
          </el-menu-item>
          
          <el-menu-item index="/admin/orders">
            <el-icon><List /></el-icon>
            <template #title>订单管理</template>
          </el-menu-item>
          
          <el-menu-item index="/admin/users">
            <el-icon><User /></el-icon>
            <template #title>用户管理</template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      
      <el-container>
        <!-- 顶部导航 -->
        <el-header class="admin-header">
          <div class="header-left">
            <el-icon 
              class="collapse-btn" 
              :size="20"
              @click="isCollapse = !isCollapse"
            >
              <component :is="isCollapse ? 'Expand' : 'Fold'" />
            </el-icon>
            
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/admin' }">
                管理后台
              </el-breadcrumb-item>
              <el-breadcrumb-item v-if="currentPageTitle">
                {{ currentPageTitle }}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          
          <div class="header-right">
            <!-- 全屏 -->
            <el-icon class="header-icon" @click="toggleFullscreen">
              <FullScreen />
            </el-icon>
            
            <!-- 刷新 -->
            <el-icon class="header-icon" @click="handleRefresh">
              <Refresh />
            </el-icon>
            
            <!-- 用户信息 -->
            <el-dropdown trigger="click">
              <div class="user-info">
                <el-avatar :size="32" :src="userStore.user?.avatar">
                  {{ userStore.username[0] }}
                </el-avatar>
                <span class="username">{{ userStore.username }}</span>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="router.push('/')">
                    <el-icon><HomeFilled /></el-icon>
                    返回前台
                  </el-dropdown-item>
                  <el-dropdown-item @click="router.push('/profile')">
                    <el-icon><User /></el-icon>
                    个人中心
                  </el-dropdown-item>
                  <el-dropdown-item divided @click="handleLogout">
                    <el-icon><SwitchButton /></el-icon>
                    退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        
        <!-- 主内容区 -->
        <el-main class="admin-main">
          <router-view v-slot="{ Component }">
            <transition name="fade-transform" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import { useUserStore } from '@/stores/user'

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

const isCollapse = ref(false)
const activeMenu = computed(() => route.path)

// 获取当前页面标题
const currentPageTitle = computed(() => {
  const titles: Record<string, string> = {
    '/admin': '',
    '/admin/products': '商品管理',
    '/admin/flashsales': '秒杀管理',
    '/admin/orders': '订单管理',
    '/admin/users': '用户管理',
  }
  return titles[route.path] || ''
})

// 全屏切换
const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
  } else {
    document.exitFullscreen()
  }
}

// 刷新页面
const handleRefresh = () => {
  window.location.reload()
}

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

<style scoped lang="scss">
.admin-layout {
  height: 100vh;
  
  .el-container {
    height: 100%;
  }
}

.admin-sidebar {
  background-color: #001529;
  transition: width 0.3s;
  
  .logo-container {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    
    .logo-icon {
      color: #ef4444;
    }
    
    .logo-text {
      font-size: 16px;
      font-weight: bold;
      white-space: nowrap;
    }
  }
  
  .el-menu {
    border-right: none;
    background-color: #001529;
    
    :deep(.el-menu-item) {
      color: rgba(255, 255, 255, 0.65);
      
      &:hover {
        background-color: rgba(255, 255, 255, 0.05);
      }
      
      &.is-active {
        color: white;
        background-color: #1890ff !important;
      }
    }
  }
}

.admin-header {
  background-color: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  
  .header-left {
    display: flex;
    align-items: center;
    gap: 20px;
    
    .collapse-btn {
      cursor: pointer;
      transition: color 0.3s;
      
      &:hover {
        color: #1890ff;
      }
    }
  }
  
  .header-right {
    display: flex;
    align-items: center;
    gap: 20px;
    
    .header-icon {
      cursor: pointer;
      font-size: 18px;
      transition: color 0.3s;
      
      &:hover {
        color: #1890ff;
      }
    }
    
    .user-info {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      
      .username {
        font-size: 14px;
      }
    }
  }
}

.admin-main {
  background-color: #f0f2f5;
  padding: 20px;
}

// 动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all 0.3s;
}

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

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