sale/frontend/src/layouts/UserLayout.vue

<template>
  <div class="layout-wrapper" :class="{ 'hide-sidebar': hideSidebar }">
    <aside v-if="!hideSidebar" class="sidebar" :class="{ collapsed: sidebarCollapsed, 'mobile-open': mobileMenuOpen }">
      <div class="sidebar-header">
        <div class="logo" @click="$router.push('/')">
          <img :src="logoImg" alt="Logo" class="logo-icon" />
          <span class="logo-text">星汐商店</span>
        </div>
      </div>

      <nav class="sidebar-nav">
        <router-link to="/" class="nav-link" exact-active-class="router-link-active">
          <el-icon><HomeFilled /></el-icon>
          <span class="nav-text">首页</span>
        </router-link>
        <router-link to="/products" class="nav-link">
          <el-icon><Goods /></el-icon>
          <span class="nav-text">商品</span>
        </router-link>
        <router-link to="/articles" class="nav-link">
          <el-icon><Document /></el-icon>
          <span class="nav-text">资讯</span>
        </router-link>
        <router-link to="/lotteries" class="nav-link">
          <el-icon><Trophy /></el-icon>
          <span class="nav-text">抽奖</span>
        </router-link>
        <router-link to="/cart" class="nav-link">
          <el-icon><ShoppingCart /></el-icon>
          <span class="nav-text">购物车</span>
          <span v-if="cartCount > 0" class="nav-badge">{{ cartCount }}</span>
        </router-link>
      </nav>

      <div class="sidebar-footer">
        <el-dropdown trigger="click" @command="changeLocale" placement="right" class="sidebar-dropdown">
          <div class="nav-link">
            <el-icon><Compass /></el-icon>
            <span class="nav-text">语言</span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="zh">中文</el-dropdown-item>
              <el-dropdown-item command="en">English</el-dropdown-item>
              <el-dropdown-item command="ja">日本語</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <template v-if="isLoggedIn">
          <el-dropdown trigger="click" @command="handleCommand" placement="right" class="sidebar-dropdown">
            <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="profile">个人中心</el-dropdown-item>
                <el-dropdown-item command="orders">我的订单</el-dropdown-item>
                <el-dropdown-item v-if="user?.role === 'admin'" command="admin">管理后台</el-dropdown-item>
                <el-dropdown-item v-if="user?.role === 'supplier'" command="supplier">供应商后台</el-dropdown-item>
                <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
        <template v-else>
          <router-link to="/login" class="nav-link">
            <el-icon><User /></el-icon>
            <span class="nav-text">登录</span>
          </router-link>
        </template>

        <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 && !hideSidebar }">
      <header v-if="!hideSidebar" class="topbar">
        <button class="menu-btn" @click="mobileMenuOpen = !mobileMenuOpen">
          <el-icon><Expand /></el-icon>
        </button>
        <div class="search-wrap">
          <el-input v-model="searchQuery" placeholder="搜索商品、分类、资讯..." @keyup.enter="handleSearch">
            <template #prefix><el-icon><Search /></el-icon></template>
          </el-input>
        </div>
      </header>

      <header v-else class="auth-topbar">
        <div class="auth-logo" @click="$router.push('/')">
          <img :src="logoImg" alt="Logo" class="logo-icon" />
          <span class="logo-text">星汐商店</span>
        </div>
      </header>

      <main class="page-content" :class="{ 'auth-page': hideSidebar }"><router-view /></main>
    </div>

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

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import logoImg from '../assets/logo.png'
import { HomeFilled, Goods, Document, Trophy, ShoppingCart, Compass, User, Fold, Expand, Search } from '@element-plus/icons-vue'
import { useUserStore } from '../store/user'
import { useCartStore } from '../store/cart'

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

const isLoggedIn = computed(() => userStore.isLoggedIn)
const user = computed(() => userStore.user)
const cartCount = computed(() => cartStore.totalCount)
const hideSidebar = computed(() => route.meta.hideSidebar as boolean)

watch(route, () => { mobileMenuOpen.value = false })

function changeLocale(lang: string) {
  locale.value = lang
  localStorage.setItem('locale', lang)
}

function handleCommand(command: string) {
  switch (command) {
    case 'profile': router.push('/profile'); break
    case 'orders': router.push('/orders'); break
    case 'admin': router.push('/admin'); break
    case 'supplier': router.push('/supplier'); break
    case 'logout': userStore.logout(); cartStore.clearCart(); router.push('/login'); break
  }
}

function handleSearch() {
  if (searchQuery.value.trim()) {
    router.push({ path: '/products', query: { keyword: searchQuery.value } })
  }
}

if (isLoggedIn.value) cartStore.fetchCart()
</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;
  object-fit: contain;
  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;
}

.nav-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #4e6ef2;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.sidebar-footer {
  padding: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 2px;
  
  .nav-link {
    width: 100%;
  }
}

.sidebar-dropdown {
  width: 100%;
}

.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;
}

.layout-wrapper.hide-sidebar .main-container {
  margin-left: 0;
}

.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;
  gap: 16px;
}

.auth-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;
}

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

.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);
}

.search-wrap {
  flex: 1;
  max-width: 400px;
}

.search-wrap :deep(.el-input__wrapper) {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  height: 36px !important;
}

.search-wrap :deep(.el-input__wrapper:hover) {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.search-wrap :deep(.el-input__wrapper.is-focus) {
  border-color: #4e6ef2 !important;
  box-shadow: 0 0 0 2px rgba(78, 110, 242, 0.15) !important;
}

.search-wrap :deep(.el-input__inner) {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 13px;
}

.search-wrap :deep(.el-input__inner::placeholder) {
  color: rgba(255, 255, 255, 0.3) !important;
}

.search-wrap :deep(.el-input__prefix .el-icon) {
  color: rgba(255, 255, 255, 0.3) !important;
}

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

.page-content.auth-page {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.overlay {
  display: none;
}

@media (max-width: 768px) {
  .layout-wrapper {
    width: 100%;
    overflow-x: hidden;
  }

  .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;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .menu-btn {
    display: flex;
  }

  .collapse-btn {
    display: none;
  }

  .page-content {
    padding: 16px;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
  }

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