james/vmall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): adopt Tailwind v4 design system and archive change

Browse Source 
- 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
This commit is contained in:
Chengdong Zhang
2026-09-22 18:22:50 +08:00
parent 4d2ee3b0bf
commit 0d0e10b97b
101 changed files with 2833 additions and 7207 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/mall/components/shell/CategoryMenu.vue
+39 -115
View File
@@ -31,145 +31,69 @@ const cats = computed(() =>
const active = computed(() => cats.value.find((g) => g.cat.id === hoverId.value) ?? null);
const rootClass = computed(() =>
props.pinned
? "relative z-[700] flex h-hero w-[240px]"
: "absolute left-0 top-10 z-[700] flex w-[960px]",
);
const railClass = computed(() =>
props.pinned
? "box-border h-hero min-h-[450px] w-[240px] list-none bg-[rgba(30,30,30,0.92)] py-2"
: "min-h-[434px] w-[240px] list-none bg-[rgba(30,30,30,0.92)] py-2",
);
const subClass = computed(() =>
props.pinned
? "absolute left-[240px] top-0 box-border h-hero min-h-[450px] w-[700px] overflow-auto bg-surface px-[30px] py-5 shadow-lg"
: "min-h-[434px] flex-1 bg-surface px-[30px] py-5 shadow-lg",
);
defineExpose({ open });
</script>
<template>
<div class="catmenu" :class="{ pinned: props.pinned }" @mouseleave="hoverId = null">
<ul class="lvl1">
<div :class="rootClass" @mouseleave="hoverId = null">
<ul :class="railClass">
<li
v-for="g in cats"
:key="g.cat.id"
:class="{ on: hoverId === g.cat.id }"
class="cursor-pointer px-[15px] py-[10px]"
:class="hoverId === g.cat.id ? 'bg-surface' : ''"
@mouseenter="hoverId = g.cat.id"
>
<NuxtLink :to="`/search?category=${g.cat.id}`" class="c1">{{ pick(g.cat.name, locale) }}</NuxtLink>
<span class="c2s">
<NuxtLink
:to="`/search?category=${g.cat.id}`"
class="block text-sm no-underline"
:class="hoverId === g.cat.id ? 'text-primary' : 'text-white'"
>{{ pick(g.cat.name, locale) }}</NuxtLink>
<span class="mt-0.5 block">
<NuxtLink
v-for="cc in g.children.slice(0, 3)"
:key="cc.cat.id"
:to="`/search?category=${cc.cat.id}`"
class="c2"
class="mr-2 text-[12px] no-underline"
:class="hoverId === g.cat.id ? 'text-primary' : 'text-[#bbb] hover:text-white'"
>{{ pick(cc.cat.name, locale) }}</NuxtLink>
</span>
</li>
</ul>
<div v-if="active" class="sub">
<div v-for="cc in active.children" :key="cc.cat.id" class="sub-row">
<NuxtLink :to="`/search?category=${cc.cat.id}`" class="sub-title">{{ pick(cc.cat.name, locale) }}</NuxtLink>
<div class="sub-items">
<div v-if="active" :class="subClass">
<div v-for="cc in active.children" :key="cc.cat.id" class="flex border-b border-border py-3 last:border-b-0">
<NuxtLink
:to="`/search?category=${cc.cat.id}`"
class="w-[120px] shrink-0 text-[14px] font-semibold text-text no-underline"
>{{ pick(cc.cat.name, locale) }}</NuxtLink>
<div>
<NuxtLink
v-for="gc in cc.grandchildren"
:key="gc.id"
:to="`/search?category=${gc.id}`"
class="mb-2 mr-[18px] inline-block text-[13px] text-muted no-underline transition-colors hover:text-primary"
>{{ pick(gc.name, locale) }}</NuxtLink>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.catmenu {
position: absolute;
top: 40px;
left: 0;
z-index: 700;
display: flex;
width: 960px;
}
/* pinned: in-flow left rail of the home hero row, flyout overlays the carousel */
.catmenu.pinned {
position: relative;
top: auto;
left: auto;
flex: none;
width: 240px;
height: 450px;
}
.lvl1 {
width: 240px;
margin: 0;
padding: 8px 0;
list-style: none;
background: rgba(30, 30, 30, 0.92);
min-height: 434px;
}
.lvl1 li {
padding: 10px 15px;
cursor: pointer;
}
.lvl1 li.on {
background: #fff;
}
.lvl1 li.on .c1,
.lvl1 li.on .c2 {
color: var(--mall-red);
}
.c1 {
display: block;
color: #fff;
font-size: 14px;
text-decoration: none;
}
.c2s {
display: block;
margin-top: 2px;
}
.c2 {
color: #bbb;
font-size: 12px;
margin-right: 8px;
text-decoration: none;
}
.c2:hover {
color: #fff;
}
.sub {
flex: 1;
background: #fff;
box-shadow: var(--mall-shadow);
padding: 20px 30px;
min-height: 434px;
}
.sub-row {
display: flex;
border-bottom: 1px solid var(--mall-line);
padding: 12px 0;
}
.sub-row:last-child {
border-bottom: 0;
}
.sub-title {
width: 120px;
font-weight: 600;
color: var(--mall-ink);
text-decoration: none;
}
.sub-items a {
display: inline-block;
margin: 0 18px 8px 0;
color: var(--mall-muted);
font-size: 13px;
text-decoration: none;
}
.sub-items a:hover {
color: var(--mall-red);
}
/* pinned overrides: 240x450 rail, flyout opens to the right over the carousel */
.catmenu.pinned .lvl1 {
box-sizing: border-box;
height: 450px;
min-height: 450px;
}
.catmenu.pinned .sub {
position: absolute;
top: 0;
left: 240px;
box-sizing: border-box;
width: 700px;
height: 450px;
min-height: 450px;
overflow: auto;
}
</style>
apps/mall/components/shell/SiteFooter.vue
+19 -50
View File
@@ -5,69 +5,38 @@ const visible = ref(false);
function onScroll(): void {
visible.value = window.scrollY > 400;
}
function toTop(): void {
window.scrollTo({ top: 0, behavior: "smooth" });
}
onMounted(() => window.addEventListener("scroll", onScroll, { passive: true }));
onMounted(() => {
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
});
onBeforeUnmount(() => window.removeEventListener("scroll", onScroll));
</script>
<template>
<footer class="foot">
<div class="w1200">
<ul class="props">
<footer class="bg-surface pt-2 text-center">
<div class="mx-auto max-w-mall px-4">
<ul class="mx-auto mt-10 flex w-full max-w-[720px] list-none justify-between border-t border-border pt-10 text-sm text-text">
<li>{{ t("shell.footer.v1") }}</li>
<li>{{ t("shell.footer.v2") }}</li>
<li>{{ t("shell.footer.v3") }}</li>
<li>{{ t("shell.footer.v4") }}</li>
</ul>
<div class="copyright">
<p>{{ t("shell.footer.copyright") }}</p>
<p>{{ t("shell.footer.icp") }}</p>
<div class="pb-5 pt-[30px] text-[12px] leading-7 text-muted">
<p class="m-0">{{ t("shell.footer.copyright") }}</p>
<p class="m-0">{{ t("shell.footer.icp") }}</p>
</div>
</div>
<button v-show="visible" class="backtop" type="button" :aria-label="t('shell.backToTop')" @click="toTop">↑</button>
<button
v-show="visible"
class="fixed bottom-[60px] right-10 z-[800] h-11 w-11 rounded-md border border-border bg-surface text-lg text-muted transition-colors hover:border-primary hover:bg-primary hover:text-white"
type="button"
:aria-label="t('shell.backToTop')"
@click="toTop"
>↑</button>
</footer>
</template>
<style scoped>
.foot {
padding-top: 10px;
text-align: center;
}
.props {
margin: 40px auto 0;
width: 720px;
border-top: 1px solid var(--mall-line);
padding: 40px 0 0;
list-style: none;
display: flex;
justify-content: space-between;
font-size: 14px;
}
.copyright {
font-size: 12px;
line-height: 28px;
color: var(--mall-muted);
padding: 30px 0 20px;
}
.backtop {
position: fixed;
right: 40px;
bottom: 60px;
width: 44px;
height: 44px;
border: 1px solid var(--mall-line-dark);
background: #fff;
border-radius: 4px;
cursor: pointer;
font-size: 18px;
color: var(--mall-muted);
z-index: 800;
}
.backtop:hover {
color: #fff;
background: var(--mall-red);
border-color: var(--mall-red);
}
</style>
apps/mall/components/shell/SiteHeader.vue
+57 -156
View File
@@ -38,181 +38,82 @@ const showMenu = computed(() => menuOpen.value && !isHome.value);
</script>
<template>
<header class="hdr">
<div class="w1200 hdr-top">
<NuxtLink to="/" class="logo">VMall</NuxtLink>
<div class="search-box">
<input
v-model="keywords"
class="search-input"
type="text"
:placeholder="t('shell.searchPlaceholder')"
@keyup.enter="search"
/>
<button class="search-btn" type="button" :aria-label="t('common.search')" @click="search">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 10-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1114 9.5 4.5 4.5 0 019.5 14z" />
</svg>
</button>
<div class="cart-links">
<NuxtLink to="/user" class="cart-link">{{ t("shell.myMall") }}</NuxtLink>
<NuxtLink to="/cart" class="cart-link">
<header class="bg-surface">
<div class="mx-auto flex max-w-mall items-center gap-10 px-4 py-6">
<NuxtLink to="/" class="text-[34px] font-extrabold leading-none tracking-[1px] text-primary no-underline">VMall</NuxtLink>
<div class="flex min-w-0 flex-1 items-center">
<div class="flex min-w-0 flex-1 items-center">
<input
v-model="keywords"
class="h-[38px] min-w-0 flex-1 border border-border border-r-0 bg-surface px-3 text-[12px] text-text outline-none focus:border-primary"
type="text"
:placeholder="t('shell.searchPlaceholder')"
@keyup.enter="search"
/>
<button
class="flex h-[38px] w-[38px] items-center justify-center border border-border bg-surface text-muted transition-colors hover:bg-primary hover:text-white"
type="button"
:aria-label="t('common.search')"
@click="search"
>
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 10-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1114 9.5 4.5 4.5 0 019.5 14z" />
</svg>
</button>
</div>
<div class="ml-7 flex h-[38px] items-center gap-5 border border-border px-5 text-[12px]">
<NuxtLink to="/user" class="relative text-muted no-underline transition-colors hover:text-primary">{{ t("shell.myMall") }}</NuxtLink>
<NuxtLink to="/cart" class="relative text-muted no-underline transition-colors hover:text-primary">
{{ t("shell.myCart") }}
<span v-if="cart.count > 0" class="dot">{{ cart.count }}</span>
<span
v-if="cart.count > 0"
class="absolute -right-3 -top-3 rounded-sm bg-primary px-1 text-[11px] leading-4 text-white"
>{{ cart.count }}</span>
</NuxtLink>
</div>
</div>
<div class="prefs">
<select :value="currency" :aria-label="t('common.currency')" @change="currency = ($event.target as HTMLSelectElement).value">
<div class="flex gap-2">
<select
:value="currency"
:aria-label="t('common.currency')"
class="h-[30px] min-w-[76px] rounded-md border border-border bg-surface px-2 text-[12px] text-text focus:border-primary focus:outline-2 focus:outline-primary/30"
@change="currency = ($event.target as HTMLSelectElement).value"
>
<option v-for="c in currencies" :key="c" :value="c">{{ c }}</option>
</select>
<select :value="locale" :aria-label="t('common.language')" @change="setLocale(($event.target as HTMLSelectElement).value as 'en' | 'zh')">
<select
:value="locale"
:aria-label="t('common.language')"
class="h-[30px] min-w-[76px] rounded-md border border-border bg-surface px-2 text-[12px] text-text focus:border-primary focus:outline-2 focus:outline-primary/30"
@change="setLocale(($event.target as HTMLSelectElement).value as 'en' | 'zh')"
>
<option v-for="l in locales" :key="l.code" :value="l.code">{{ l.name }}</option>
</select>
</div>
</div>
<nav class="nav">
<div class="w1200 nav-in">
<nav class="h-10 bg-[#2d2d2d] text-sm leading-10 text-white">
<div class="mx-auto flex max-w-mall px-4">
<div
class="nav-cats"
class="relative w-[240px] cursor-pointer bg-primary pl-[15px] font-medium"
@mouseenter="menuOpen = true"
@mouseleave="menuOpen = false"
>
{{ t("shell.allCategories") }}
<ShellCategoryMenu v-show="showMenu" />
</div>
<ul class="nav-links">
<li><NuxtLink to="/">{{ t("shell.nav.home") }}</NuxtLink></li>
<li><NuxtLink to="/stores">{{ t("shell.nav.stores") }}</NuxtLink></li>
<li><NuxtLink to="/seckill">{{ t("shell.nav.seckill") }}</NuxtLink></li>
<li><NuxtLink to="/collective">{{ t("shell.nav.collective") }}</NuxtLink></li>
<li><NuxtLink to="/integral">{{ t("shell.nav.integral") }}</NuxtLink></li>
<li><NuxtLink to="/user">{{ t("shell.nav.help") }}</NuxtLink></li>
<ul class="flex pl-5">
<li><NuxtLink to="/" class="block px-[30px] text-white no-underline transition-colors hover:bg-black">{{ t("shell.nav.home") }}</NuxtLink></li>
<li><NuxtLink to="/stores" class="block px-[30px] text-white no-underline transition-colors hover:bg-black">{{ t("shell.nav.stores") }}</NuxtLink></li>
<li><NuxtLink to="/seckill" class="block px-[30px] text-white no-underline transition-colors hover:bg-black">{{ t("shell.nav.seckill") }}</NuxtLink></li>
<li><NuxtLink to="/collective" class="block px-[30px] text-white no-underline transition-colors hover:bg-black">{{ t("shell.nav.collective") }}</NuxtLink></li>
<li><NuxtLink to="/integral" class="block px-[30px] text-white no-underline transition-colors hover:bg-black">{{ t("shell.nav.integral") }}</NuxtLink></li>
<li><NuxtLink to="/user" class="block px-[30px] text-white no-underline transition-colors hover:bg-black">{{ t("shell.nav.help") }}</NuxtLink></li>
</ul>
</div>
</nav>
</header>
</template>
<style scoped>
.hdr {
background: #fff;
}
.hdr-top {
display: flex;
align-items: center;
gap: 40px;
padding: 24px 0;
}
.logo {
font-size: 34px;
font-weight: 800;
color: var(--mall-red);
text-decoration: none;
letter-spacing: 1px;
}
.search-box {
display: flex;
align-items: center;
}
.search-input {
width: 434px;
height: 38px;
padding: 10px;
outline: 0;
border: 1px solid var(--mall-line);
border-right: none;
box-sizing: border-box;
font-size: 12px;
}
.search-btn {
border: 1px solid var(--mall-line);
width: 38px;
height: 38px;
background: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.search-btn:hover {
color: #fff;
background: var(--mall-nav);
}
.cart-links {
display: flex;
height: 38px;
border: 1px solid var(--mall-line);
margin-left: 30px;
box-sizing: border-box;
font-size: 12px;
line-height: 38px;
padding: 0 20px;
gap: 20px;
}
.cart-link {
position: relative;
color: inherit;
text-decoration: none;
}
.cart-link:hover {
color: var(--mall-red);
}
.dot {
position: absolute;
top: -12px;
right: -14px;
line-height: 16px;
background: var(--mall-red);
padding: 0 4px;
color: #fff;
border-radius: 4px;
font-size: 11px;
}
.prefs {
display: flex;
gap: 8px;
}
.prefs select {
height: 30px;
min-width: 76px;
padding: 0 6px;
border: 1px solid var(--mall-line);
background: #fff;
font-size: 12px;
}
.nav {
height: 40px;
background: var(--mall-nav);
font-size: 14px;
line-height: 40px;
color: #fff;
}
.nav-in {
display: flex;
}
.nav-cats {
position: relative;
cursor: pointer;
width: 240px;
background: var(--mall-red);
box-sizing: border-box;
padding-left: 15px;
}
.nav-links {
display: flex;
list-style: none;
margin: 0;
padding: 0 0 0 20px;
}
.nav-links a {
line-height: 40px;
padding: 0 30px;
color: #fff;
display: block;
text-decoration: none;
}
.nav-links a:hover {
background: #000;
}
</style>
apps/mall/components/shell/TopBar.vue
+31 -66
View File
@@ -4,86 +4,51 @@ 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>
<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="right">
<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>{{ 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>
<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="red">{{ t("shell.login") }}</NuxtLink></li>
<li><NuxtLink to="/register">{{ t("shell.register") }}</NuxtLink></li>
<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="red">{{ t("shell.login") }}</NuxtLink></li>
<li><NuxtLink to="/register">{{ t("shell.register") }}</NuxtLink></li>
<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>|</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>
<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>
<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>