Chengdong Zhang
0d0e10b97b
- Add tailwindcss v4 + @tailwindcss/vite to mall, shop-admin, admin - Add @vmall/shared/theme.css tokens with html[data-accent] presets - Add @vmall/ui kit (VBtn/VBadge/VField/VInput/VCard/VPanel/VTable/VPage, VAccentSwatch, useAccent) as a Nuxt module - Convert all three apps to kit + utilities; delete ui.css/mall.css and every <style scoped>; consoles get accent presets, mall locked to red - Fix VCard boolean prop default (padding) and PDP/store stale useAsyncData keys on param navigation - Archive adopt-tailwind-design-system; new frontend-ui capability spec
64 lines
2.4 KiB
Vue
64 lines
2.4 KiB
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="min-h-screen bg-bg py-8 pb-16 font-sans text-text">
|
|
<div class="mx-auto grid w-full max-w-mall gap-5 px-4 lg:grid-cols-[234px_minmax(0,1fr)] lg:items-start">
|
|
<VCard :padded="false" class="min-h-[560px] pb-5">
|
|
<div class="flex items-center gap-3 border-b border-border px-4 py-5">
|
|
<img class="h-[54px] w-[54px] rounded-full object-cover" src="/mock/avatar.svg" :alt="t('user.title')" />
|
|
<div class="min-w-0">
|
|
<!-- Session lives in localStorage, so the name is unknown at SSR time. -->
|
|
<ClientOnly><strong class="block truncate text-sm text-text">{{ session.user?.display_name }}</strong></ClientOnly>
|
|
<NuxtLink class="mt-2 inline-block text-xs text-muted no-underline hover:text-primary" to="/user">{{ t("user.editProfile") }}</NuxtLink>
|
|
</div>
|
|
</div>
|
|
<nav v-for="group in menuGroups" :key="group.title" class="pt-[18px]">
|
|
<h2 class="mb-2 px-5 text-[13px] font-semibold text-muted">{{ group.title }}</h2>
|
|
<NuxtLink
|
|
v-for="item in group.items"
|
|
:key="item.to"
|
|
:to="item.to"
|
|
class="block border-l-[3px] border-transparent px-5 py-2.5 text-[13px] text-text no-underline hover:bg-primary-soft hover:text-primary"
|
|
:class="isActive(item.to) ? 'border-primary bg-primary-soft text-primary' : ''"
|
|
>
|
|
{{ item.label }}
|
|
</NuxtLink>
|
|
</nav>
|
|
</VCard>
|
|
<main class="mx-auto min-w-0 max-w-mall">
|
|
<NuxtPage />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|