vmall/apps/mall/pages/user.vue

<script setup lang="ts">
definePageMeta({ middleware: "auth" });

const route = useRoute();
const session = useSessionStore();
const { t } = useI18n();

const menuGroups = computed(() => [
  {
    title: t("user.orderCenter"),
    items: [
      { label: t("user.myOrders"), to: "/user/orders" },
      { label: t("user.addresses"), to: "/user/addresses" },
      { label: t("user.coupons"), to: "/user/coupons" },
    ],
  },
  {
    title: t("user.memberCenter"),
    items: [
      { label: t("user.dashboard"), to: "/user" },
      { label: t("user.favorites"), to: "/user/favorites" },
      { label: t("user.invoices"), to: "/user/invoices" },
    ],
  },
]);

function isActive(to: string): boolean {
  return to === "/user" ? route.path === "/user" : route.path === to || route.path.startsWith(`${to}/`);
}
</script>

<template>
  <div class="user-page">
    <div class="w1200 user-layout">
      <aside class="user-sidebar">
        <div class="profile">
          <img src="/mock/avatar.svg" :alt="t('user.title')" />
          <div class="profile-copy">
            <strong>{{ session.user?.display_name }}</strong>
            <NuxtLink to="/user">{{ t("user.editProfile") }}</NuxtLink>
          </div>
        </div>
        <nav v-for="group in menuGroups" :key="group.title" class="menu-group">
          <h2>{{ group.title }}</h2>
          <NuxtLink
            v-for="item in group.items"
            :key="item.to"
            :to="item.to"
            class="menu-item"
            :class="{ active: isActive(item.to) }"
          >
            {{ item.label }}
          </NuxtLink>
        </nav>
      </aside>
      <main class="user-content">
        <NuxtPage />
      </main>
    </div>
  </div>
</template>

<style scoped>
.user-page {
  min-height: 680px;
  padding: 30px 0 60px;
  background: var(--mall-bg);
}
.user-layout {
  display: grid;
  grid-template-columns: 234px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.user-sidebar {
  background: #fff;
  min-height: 560px;
  padding-bottom: 18px;
}
.profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 16px;
  border-bottom: 1px solid var(--mall-line);
}
.profile img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
}
.profile-copy {
  min-width: 0;
}
.profile strong {
  display: block;
  overflow: hidden;
  color: var(--mall-ink);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile a {
  display: inline-block;
  margin-top: 8px;
  color: var(--mall-faint);
  font-size: 12px;
  text-decoration: none;
}
.profile a:hover {
  color: var(--mall-red);
}
.menu-group {
  padding: 18px 0 0;
}
.menu-group h2 {
  margin: 0;
  padding: 0 20px 8px;
  color: var(--mall-muted);
  font-size: 13px;
  font-weight: 600;
}
.menu-item {
  display: block;
  padding: 10px 20px;
  border-left: 3px solid transparent;
  color: var(--mall-ink);
  font-size: 13px;
  text-decoration: none;
}
.menu-item:hover,
.menu-item.active {
  background: #fff5f5;
  border-left-color: var(--mall-red);
  color: var(--mall-red);
}
.user-content {
  min-width: 0;
}
@media (max-width: 1240px) {
  .user-layout {
    width: calc(100% - 40px);
  }
}
@media (max-width: 760px) {
  .user-layout {
    display: block;
  }
  .user-sidebar {
    min-height: 0;
    margin-bottom: 20px;
  }
  .menu-group {
    display: inline-block;
    width: 49%;
    vertical-align: top;
  }
}
</style>