sale/frontend/src/layouts/SupplierLayout.vue

<template>
  <div class="layout-wrapper">
    <aside class="sidebar" :class="{ collapsed: sidebarCollapsed, 'mobile-open': mobileMenuOpen }">
      <div class="sidebar-header">
        <div class="logo" @click="$router.push('/supplier')">
          <div class="logo-icon">
            <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
              <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
            </svg>
          </div>
          <span class="logo-text">Supplier</span>
        </div>
      </div>

      <nav class="sidebar-nav">
        <router-link to="/supplier" class="nav-link" exact-active-class="router-link-active">
          <el-icon><DataAnalysis /></el-icon>
          <span class="nav-text">{{ $t('supplier.dashboard') }}</span>
        </router-link>
        <router-link to="/supplier/orders" class="nav-link">
          <el-icon><List /></el-icon>
          <span class="nav-text">{{ $t('supplier.orderManagement') }}</span>
        </router-link>
        <router-link to="/supplier/inventory" class="nav-link">
          <el-icon><Box /></el-icon>
          <span class="nav-text">{{ $t('supplier.inventoryManagement') }}</span>
        </router-link>
      </nav>

      <div class="sidebar-footer">
        <el-dropdown trigger="click" @command="handleCommand" placement="right">
          <div class="nav-link user-link">
            <el-avatar :size="22" class="sidebar-avatar">{{ user?.username?.charAt(0).toUpperCase() }}</el-avatar>
            <span class="nav-text">{{ user?.username }}</span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="home">返回前台</el-dropdown-item>
              <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <div class="nav-link collapse-btn" @click="sidebarCollapsed = !sidebarCollapsed">
          <el-icon><Fold v-if="!sidebarCollapsed" /><Expand v-else /></el-icon>
          <span class="nav-text">收起</span>
        </div>
      </div>
    </aside>

    <div class="main-container" :class="{ 'sidebar-collapsed': sidebarCollapsed }">
      <header class="topbar">
        <button class="menu-btn" @click="mobileMenuOpen = !mobileMenuOpen">
          <el-icon><Expand /></el-icon>
        </button>
        <h1 class="page-title">{{ currentPageTitle }}</h1>
      </header>
      <main class="page-content">
        <router-view />
      </main>
    </div>

    <div v-if="mobileMenuOpen" class="overlay" @click="mobileMenuOpen = false"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { DataAnalysis, List, Box, Fold, Expand } from '@element-plus/icons-vue'
import { useUserStore } from '../store/user'
import { useCartStore } from '../store/cart'

const router = useRouter()
const route = useRoute()
const { t } = useI18n()
const userStore = useUserStore()
const cartStore = useCartStore()
const sidebarCollapsed = ref(false)
const mobileMenuOpen = ref(false)

const user = computed(() => userStore.user)

const pageTitles: Record<string, string> = {
  '/supplier': '控制台',
  '/supplier/orders': '订单管理',
  '/supplier/inventory': '库存管理'
}

const currentPageTitle = computed(() => {
  return pageTitles[route.path] || t('supplier.dashboard')
})

function handleCommand(command: string) {
  switch (command) {
    case 'home': router.push('/'); break
    case 'logout': userStore.logout(); cartStore.clearCart(); router.push('/login'); break
  }
}
</script>

<style scoped lang="scss">
.layout-wrapper {
  display: flex;
  min-height: 100vh;
  background: #1a1a2e;
}

.sidebar {
  width: 220px;
  background: #16162a;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  transition: width 0.2s, transform 0.2s;
  overflow: hidden;
}

.sidebar.collapsed {
  width: 60px;
}

.sidebar-header {
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.logo-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #4e6ef2, #7c5cfc);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.logo-text {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.sidebar.collapsed .logo-text {
  display: none;
}

.sidebar-nav {
  flex: 1;
  padding: 8px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  margin-bottom: 2px;
}

.nav-link:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.06);
}

.nav-link.router-link-active {
  color: #fff;
  background: rgba(78, 110, 242, 0.15);
}

.nav-link .el-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.nav-text {
  white-space: nowrap;
  overflow: hidden;
}

.sidebar.collapsed .nav-text {
  display: none;
}

.sidebar-footer {
  padding: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-avatar {
  background: linear-gradient(135deg, #4e6ef2, #7c5cfc);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
}

.user-link {
  gap: 8px;
}

.collapse-btn {
  margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 12px;
}

.main-container {
  margin-left: 220px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left 0.2s;
}

.main-container.sidebar-collapsed {
  margin-left: 60px;
}

.topbar {
  height: 56px;
  background: rgba(26, 26, 46, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.menu-btn {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  background: none;
  border: none;
  cursor: pointer;
}

.menu-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.page-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

.overlay {
  display: none;
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    width: 220px !important;
  }

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

  .sidebar.collapsed {
    width: 220px !important;
  }

  .main-container,
  .main-container.sidebar-collapsed {
    margin-left: 0;
  }

  .menu-btn {
    display: flex;
  }

  .collapse-btn {
    display: none;
  }

  .overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
  }
}
</style>