Chengdong Zhang
21e99bb52b
- Mock adapter implementing @vmall/shared ApiClient (localStorage-persisted cart/orders/invoices), runtime switch via mockApi flag (default on) - Fixed bilingual mock catalog: 3-level categories, 24 products w/ SKUs, stores, brands, banners, floors, seckill/collective/integral, comments, coupons, addresses, seeded orders/shipments/invoices - B2B2C mall shell: top bar, logo/search/cart header, dark nav + category mega-menu, value-prop footer, back-to-top; 1200px grid, #ca151e theme - UI primitives replacing element-plus: carousel, pagination, breadcrumb, qty stepper, rating stars, modal, tabs, step bar, product card - Pages: home floors, search (filters/sort/paging), goods detail (SKU picker, store rail, review tabs), cart -> checkout -> pay -> success, auth pages, user center (dashboard/orders/addresses/favorites/coupons/ invoices), stores, seckill, collective, integral - i18n split into per-domain locale modules (en+zh) - OpenSpec change mall-pc-storefront-replica archived; all specs green
80 lines
2.0 KiB
Vue
80 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
const session = useSessionStore();
|
|
const { t } = useI18n();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="topbar">
|
|
<div class="w1200 topbar-in">
|
|
<ul class="left">
|
|
<li><NuxtLink to="/">{{ t("shell.officialSite") }}</NuxtLink></li>
|
|
<li>|</li>
|
|
<li><NuxtLink to="/">{{ t("shell.mallHome") }}</NuxtLink></li>
|
|
<li>|</li>
|
|
<li><NuxtLink to="/">{{ t("shell.contact") }}</NuxtLink></li>
|
|
<li>|</li>
|
|
<li><NuxtLink to="/">{{ t("shell.about") }}</NuxtLink></li>
|
|
<li>|</li>
|
|
<li class="city">{{ t("shell.city") }}</li>
|
|
</ul>
|
|
<ul class="right">
|
|
<template v-if="session.isLoggedIn">
|
|
<li>{{ t("shell.welcome") }}<NuxtLink to="/user" class="red">{{ session.user?.display_name }}</NuxtLink></li>
|
|
<li>|</li>
|
|
<li><NuxtLink to="/user">{{ t("shell.userCenter") }}</NuxtLink></li>
|
|
<li>|</li>
|
|
<li class="clickable" @click="session.logout()">{{ t("shell.logout") }}</li>
|
|
</template>
|
|
<template v-else>
|
|
<li><NuxtLink to="/login" class="red">{{ t("shell.login") }}</NuxtLink></li>
|
|
<li><NuxtLink to="/register">{{ t("shell.register") }}</NuxtLink></li>
|
|
</template>
|
|
<li>|</li>
|
|
<li><NuxtLink to="/stores" class="red">{{ t("shell.sellerJoin") }}</NuxtLink></li>
|
|
<li>|</li>
|
|
<li><NuxtLink to="/">{{ t("shell.mobile") }}</NuxtLink></li>
|
|
<li>|</li>
|
|
<li><NuxtLink to="/">{{ t("shell.appDownload") }}</NuxtLink></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.topbar {
|
|
border-bottom: 1px solid var(--mall-line);
|
|
height: 30px;
|
|
background: #f9f9f9;
|
|
font-size: 12px;
|
|
line-height: 30px;
|
|
}
|
|
.topbar-in {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
ul {
|
|
display: flex;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
li {
|
|
padding: 0 5px;
|
|
}
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
a:hover,
|
|
.clickable:hover {
|
|
color: var(--mall-red);
|
|
cursor: pointer;
|
|
}
|
|
.red {
|
|
color: var(--mall-red);
|
|
}
|
|
.city {
|
|
color: var(--mall-red);
|
|
}
|
|
</style>
|