airlabs-manage/frontend/src/components/Layout.vue

<template>
  <el-container class="layout">
    <!-- 侧边栏 -->
    <el-aside :width="isCollapsed ? '64px' : '240px'" class="aside">
      <div class="logo" @click="isCollapsed = !isCollapsed">
        <div class="logo-icon">A</div>
        <transition name="fade">
          <div v-show="!isCollapsed" class="logo-info">
            <span class="logo-title">AirLabs</span>
            <span class="logo-sub">项目管理系统</span>
          </div>
        </transition>
      </div>

      <nav class="nav-menu">
        <router-link
          v-for="item in menuItems"
          :key="item.path"
          :to="item.path"
          class="nav-item"
          :class="{ active: isActive(item.path) }"
          v-show="!item.perm || authStore.hasPermission(item.perm)"
        >
          <el-icon :size="18"><component :is="item.icon" /></el-icon>
          <span v-show="!isCollapsed" class="nav-label">{{ item.label }}</span>
        </router-link>
      </nav>

      <!-- 底部用户信息 -->
      <div class="sidebar-footer" v-show="!isCollapsed">
        <div class="user-brief">
          <div class="user-avatar">{{ authStore.user?.name?.[0] || '?' }}</div>
          <div class="user-meta">
            <div class="user-name">{{ authStore.user?.name }}</div>
            <div class="user-role">{{ authStore.user?.role_name }}</div>
          </div>
        </div>
      </div>
    </el-aside>

    <!-- 主内容区 -->
    <el-container class="main-container">
      <el-header class="header">
        <div class="header-left">
          <h3 class="page-route-title">{{ currentTitle }}</h3>
        </div>
        <div class="header-right">
          <el-button text class="logout-btn" @click="handleLogout">
            <el-icon :size="16"><SwitchButton /></el-icon>
            <span>退出</span>
          </el-button>
        </div>
      </el-header>
      <el-main class="main">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAuthStore } from '../stores/auth'

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

const menuItems = [
  { path: '/dashboard', label: '仪表盘', icon: 'Odometer', perm: 'dashboard:view' },
  { path: '/projects', label: '项目管理', icon: 'FolderOpened', perm: 'project:view' },
  { path: '/submissions', label: '内容提交', icon: 'EditPen', perm: 'submission:view' },
  { path: '/costs', label: '成本管理', icon: 'Money', perm: 'cost:view' },
  { path: '/users', label: '用户管理', icon: 'User', perm: 'user:manage' },
  { path: '/roles', label: '角色管理', icon: 'Lock', perm: 'role:manage' },
]

const titleMap = {
  '/dashboard': '仪表盘',
  '/projects': '项目管理',
  '/submissions': '内容提交',
  '/costs': '成本管理',
  '/users': '用户管理',
  '/roles': '角色管理',
}

const currentTitle = computed(() => {
  if (route.path.startsWith('/projects/')) return '项目详情'
  if (route.path.startsWith('/settlement/')) return '项目结算'
  return titleMap[route.path] || ''
})

function isActive(path) {
  return route.path === path || route.path.startsWith(path + '/')
}

onMounted(async () => {
  if (authStore.token && !authStore.user) {
    await authStore.fetchUser()
  }
})

function handleLogout() {
  authStore.logout()
  router.push('/login')
}
</script>

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

/* ── 侧边栏 ── */
.aside {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  transition: width 0.25s ease;
  overflow: hidden;
}

.logo {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
}
.logo-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}
.logo-info { display: flex; flex-direction: column; }
.logo-title { font-size: 15px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.logo-sub { font-size: 11px; color: var(--text-secondary); }

/* 导航菜单 */
.nav-menu {
  flex: 1;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-regular);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.nav-item.active {
  background: var(--bg-active);
  color: var(--primary);
}
.nav-label { line-height: 1; }

/* 底部用户 */
.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border-light);
}
.user-brief { display: flex; align-items: center; gap: 10px; }
.user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px; flex-shrink: 0;
}
.user-meta { display: flex; flex-direction: column; }
.user-name { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.user-role { font-size: 11px; color: var(--text-secondary); }

/* ── 顶栏 ── */
.main-container { background: var(--bg-page); }
.header {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
}
.page-route-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.header-right { display: flex; align-items: center; gap: 8px; }
.logout-btn {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  gap: 4px;
}
.logout-btn:hover { color: var(--danger) !important; }

/* ── 主内容 ── */
.main {
  padding: 24px;
  background: var(--bg-page);
  min-height: 0;
  overflow-y: auto;
}

.fade-enter-active, .fade-leave-active { transition: opacity 0.2s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
</style>