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
55 lines
3.0 KiB
Vue
55 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
const session = useSessionStore();
|
|
const { t } = useI18n();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="h-[30px] border-b border-border bg-[#f9f9f9] text-[12px] leading-[30px] text-muted">
|
|
<div class="mx-auto flex h-full max-w-mall items-center justify-between px-4">
|
|
<ul class="flex items-center">
|
|
<li><NuxtLink to="/" class="px-1 hover:text-primary">{{ t("shell.officialSite") }}</NuxtLink></li>
|
|
<li class="px-1 text-border">|</li>
|
|
<li><NuxtLink to="/" class="px-1 hover:text-primary">{{ t("shell.mallHome") }}</NuxtLink></li>
|
|
<li class="px-1 text-border">|</li>
|
|
<li><NuxtLink to="/" class="px-1 hover:text-primary">{{ t("shell.contact") }}</NuxtLink></li>
|
|
<li class="px-1 text-border">|</li>
|
|
<li><NuxtLink to="/" class="px-1 hover:text-primary">{{ t("shell.about") }}</NuxtLink></li>
|
|
<li class="px-1 text-border">|</li>
|
|
<li class="px-1 text-primary">{{ t("shell.city") }}</li>
|
|
</ul>
|
|
<ul class="flex items-center">
|
|
<!-- The token lives in localStorage, so the server cannot know whether
|
|
anyone is signed in. Rendering this branch client-only keeps the
|
|
hydrated DOM in step with the server's logged-out markup; without
|
|
it, validating the session before hydration reports mismatches. -->
|
|
<ClientOnly>
|
|
<template v-if="session.isLoggedIn">
|
|
<li class="px-1">
|
|
{{ t("shell.welcome") }}
|
|
<NuxtLink to="/user" class="text-primary hover:text-primary-hover">{{ session.user?.display_name }}</NuxtLink>
|
|
</li>
|
|
<li class="px-1 text-border">|</li>
|
|
<li><NuxtLink to="/user" class="px-1 hover:text-primary">{{ t("shell.userCenter") }}</NuxtLink></li>
|
|
<li class="px-1 text-border">|</li>
|
|
<li class="cursor-pointer px-1 hover:text-primary" @click="session.logout()">{{ t("shell.logout") }}</li>
|
|
</template>
|
|
<template v-else>
|
|
<li><NuxtLink to="/login" class="px-1 text-primary hover:text-primary-hover">{{ t("shell.login") }}</NuxtLink></li>
|
|
<li><NuxtLink to="/register" class="px-1 hover:text-primary">{{ t("shell.register") }}</NuxtLink></li>
|
|
</template>
|
|
<template #fallback>
|
|
<li><NuxtLink to="/login" class="px-1 text-primary hover:text-primary-hover">{{ t("shell.login") }}</NuxtLink></li>
|
|
<li><NuxtLink to="/register" class="px-1 hover:text-primary">{{ t("shell.register") }}</NuxtLink></li>
|
|
</template>
|
|
</ClientOnly>
|
|
<li class="px-1 text-border">|</li>
|
|
<li><NuxtLink to="/stores" class="px-1 text-primary hover:text-primary-hover">{{ t("shell.sellerJoin") }}</NuxtLink></li>
|
|
<li class="px-1 text-border">|</li>
|
|
<li><NuxtLink to="/" class="px-1 hover:text-primary">{{ t("shell.mobile") }}</NuxtLink></li>
|
|
<li class="px-1 text-border">|</li>
|
|
<li><NuxtLink to="/" class="px-1 hover:text-primary">{{ t("shell.appDownload") }}</NuxtLink></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|