james
0ceb4a2b25
Wave 2 of replacing the fixed-data mock adapter: the auth domain joins the live list, so credentials, roles and tokens belong to the real user. - session: validate a restored token through /auth/me instead of trusting localStorage, clearing it on 401/403 but keeping it when the API is merely unreachable; the route guard now uses the validated session - login: report a 401 as invalid credentials rather than a generic failure, and drop the 6-character client rule so the API owns the password policy - register: raise the rule to the API's 8 characters, remove the verification-code field (its button only counted down and the value was never sent), and report a duplicate email (409) distinctly - TopBar and the user profile render their session-dependent branch client-only: validating the session before hydration made those localStorage-backed branches report hydration mismatches the previous code did not Verified against the running backend: wrong password rejected, real JWT issued, /user reachable, a short password refused with no network call, duplicate email reported, a tampered token cleared and bounced to sign-in, a stale token kept when the API is down, and the fixed-data rollback still signs in with the backend stopped. Also re-cuts docs/TBD-migrate-wave.md: auth is done, and cart, orders, shipments and invoices must move together, because the mock adapter keeps their state in one shared object and a partial flip fails at checkout. OpenSpec change: openspec/changes/replace-mock-api-wave-2
162 lines
3.5 KiB
Vue
162 lines
3.5 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="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">
|
|
<!-- Session lives in localStorage, so the name is unknown at SSR time. -->
|
|
<ClientOnly><strong>{{ session.user?.display_name }}</strong></ClientOnly>
|
|
<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>
|