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/PriceText.vue
+1 -1
View File
@@ -27,6 +27,6 @@ watch(
</script>
<template>
<span v-if="failed" class="muted">{{ $t("mall.notAvailable") }}</span>
<span v-if="failed" class="text-muted">{{ $t("mall.notAvailable") }}</span>
<span v-else>{{ display || $t("common.loading") }}</span>
</template>
apps/mall/components/StatusBadge.vue
+2 -2
View File
@@ -1,7 +1,7 @@
<script setup lang="ts">
const props = defineProps<{ status: string; kind: "order" | "shipment" | "invoice" }>();
const tone = computed(() => {
const tone = computed<"green" | "blue" | "red" | "orange">(() => {
if (["completed", "delivered", "issued"].includes(props.status)) return "green";
if (["paid", "fulfilling", "shipped"].includes(props.status)) return "blue";
if (["cancelled"].includes(props.status)) return "red";
@@ -15,5 +15,5 @@ const label = computed(() => {
</script>
<template>
<span class="badge" :class="tone">{{ $t(label) }}</span>
<VBadge :tone="tone">{{ $t(label) }}</VBadge>
</template>
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>
apps/mall/components/ui/Breadcrumb.vue
+4 -26
View File
@@ -3,33 +3,11 @@ defineProps<{ items: { label: string; to?: string }[] }>();
</script>
<template>
<nav class="crumbs w1200" aria-label="breadcrumb">
<nav aria-label="breadcrumb" class="mx-auto my-5 max-w-mall px-4 text-[13px] text-muted">
<template v-for="(item, i) in items" :key="i">
<NuxtLink v-if="item.to" :to="item.to">{{ item.label }}</NuxtLink>
<span v-else class="here">{{ item.label }}</span>
<span v-if="i < items.length - 1" class="sep">/</span>
<NuxtLink v-if="item.to" :to="item.to" class="no-underline transition-colors hover:text-primary">{{ item.label }}</NuxtLink>
<span v-else class="text-text">{{ item.label }}</span>
<span v-if="i < items.length - 1" class="mx-2 text-muted/60">/</span>
</template>
</nav>
</template>
<style scoped>
.crumbs {
margin: 20px auto;
font-size: 13px;
color: var(--mall-muted);
}
a {
color: var(--mall-muted);
text-decoration: none;
}
a:hover {
color: var(--mall-red);
}
.sep {
margin: 0 8px;
color: var(--mall-faint);
}
.here {
color: var(--mall-ink);
}
</style>
apps/mall/components/ui/Carousel.vue
+7 -40
View File
@@ -10,6 +10,7 @@ let timer: ReturnType<typeof setInterval> | null = null;
function go(i: number): void {
index.value = (i + props.images.length) % props.images.length;
}
onMounted(() => {
if (props.images.length > 1) {
timer = setInterval(() => {
@@ -17,66 +18,32 @@ onMounted(() => {
}, props.interval);
}
});
onBeforeUnmount(() => {
if (timer) clearInterval(timer);
});
</script>
<template>
<div class="carousel" :style="{ height: `${height}px` }">
<div class="relative w-full overflow-hidden" :style="{ height: `${height}px` }">
<NuxtLink
v-for="(img, i) in images"
v-show="i === index"
:key="img.image"
:to="img.url || '#'"
class="slide"
class="block h-full w-full bg-cover bg-center"
:style="{ backgroundImage: `url(${img.image})` }"
/>
<div v-if="images.length > 1" class="dots">
<div v-if="images.length > 1" class="absolute bottom-[14px] left-0 right-0 flex justify-center gap-2">
<button
v-for="(_, i) in images"
:key="i"
type="button"
:class="{ on: i === index }"
class="h-2.5 w-2.5 rounded-full bg-white/55 p-0 transition-colors"
:class="i === index ? 'bg-primary' : 'hover:bg-white/80'"
:aria-label="`slide ${i + 1}`"
@click="go(i)"
/>
</div>
</div>
</template>
<style scoped>
.carousel {
position: relative;
overflow: hidden;
width: 100%;
}
.slide {
display: block;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
.dots {
position: absolute;
bottom: 14px;
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: 8px;
}
.dots button {
width: 10px;
height: 10px;
border-radius: 50%;
border: 0;
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
padding: 0;
}
.dots button.on {
background: var(--mall-red);
}
</style>
apps/mall/components/ui/EmptyState.vue
+3 -15
View File
@@ -3,20 +3,8 @@ withDefaults(defineProps<{ text?: string }>(), { text: "" });
</script>
<template>
<div class="empty">
<div class="icon">∅</div>
<p>{{ text || $t("common.empty") }}</p>
<div class="py-[60px] text-center text-muted/70">
<div class="mb-2.5 text-[40px] leading-none">∅</div>
<p class="m-0">{{ text || $t("common.empty") }}</p>
</div>
</template>
<style scoped>
.empty {
padding: 60px 0;
text-align: center;
color: var(--mall-faint);
}
.icon {
font-size: 40px;
margin-bottom: 10px;
}
</style>
apps/mall/components/ui/Modal.vue
+11 -48
View File
@@ -5,61 +5,24 @@ const emit = defineEmits<{ close: [] }>();
<template>
<Teleport to="body">
<div v-if="open" class="mask" @click.self="emit('close')">
<div class="dialog">
<header v-if="title" class="head">
<div v-if="open" class="fixed inset-0 z-[900] flex items-center justify-center bg-black/40" @click.self="emit('close')">
<div class="min-w-[420px] max-w-[720px] rounded-md bg-surface shadow-lg">
<header v-if="title" class="flex items-center justify-between border-b border-border px-5 py-3.5 text-[15px]">
<span>{{ title }}</span>
<button type="button" class="x" :aria-label="$t('common.cancel')" @click="emit('close')">×</button>
<button
type="button"
class="border-0 bg-transparent text-[20px] text-muted transition-colors hover:text-primary"
:aria-label="$t('common.cancel')"
@click="emit('close')"
>×</button>
</header>
<div class="body">
<div class="p-5">
<slot />
</div>
<footer v-if="$slots.footer" class="foot">
<footer v-if="$slots.footer" class="border-t border-border px-5 py-3 text-right">
<slot name="footer" />
</footer>
</div>
</div>
</Teleport>
</template>
<style scoped>
.mask {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 900;
display: flex;
align-items: center;
justify-content: center;
}
.dialog {
background: #fff;
min-width: 420px;
max-width: 720px;
border-radius: 4px;
box-shadow: var(--mall-shadow);
}
.head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 20px;
border-bottom: 1px solid var(--mall-line);
font-size: 15px;
}
.x {
border: 0;
background: none;
font-size: 20px;
cursor: pointer;
color: var(--mall-muted);
}
.body {
padding: 20px;
}
.foot {
padding: 12px 20px;
border-top: 1px solid var(--mall-line);
text-align: right;
}
</style>
apps/mall/components/ui/Pagination.vue
+15 -31
View File
@@ -18,42 +18,26 @@ function go(p: number): void {
</script>
<template>
<nav v-if="pages > 1" class="pager">
<button type="button" :disabled="page <= 1" @click="go(page - 1)">{{ $t("common.prev") }}</button>
<nav v-if="pages > 1" class="my-[30px] flex justify-center gap-1.5">
<button
type="button"
class="h-[34px] min-w-[34px] rounded-sm border border-border bg-surface px-2 text-[13px] transition-colors disabled:cursor-not-allowed disabled:opacity-40"
:disabled="page <= 1"
@click="go(page - 1)"
>{{ $t("common.prev") }}</button>
<button
v-for="p in window_"
:key="p"
type="button"
:class="{ on: p === page }"
class="h-[34px] min-w-[34px] rounded-sm border border-border px-2 text-[13px] transition-colors"
:class="p === page ? 'border-primary bg-primary text-white' : 'bg-surface hover:border-primary hover:text-primary'"
@click="go(p)"
>{{ p }}</button>
<button type="button" :disabled="page >= pages" @click="go(page + 1)">{{ $t("common.next") }}</button>
<button
type="button"
class="h-[34px] min-w-[34px] rounded-sm border border-border bg-surface px-2 text-[13px] transition-colors disabled:cursor-not-allowed disabled:opacity-40"
:disabled="page >= pages"
@click="go(page + 1)"
>{{ $t("common.next") }}</button>
</nav>
</template>
<style scoped>
.pager {
display: flex;
justify-content: center;
gap: 6px;
margin: 30px 0;
}
button {
min-width: 34px;
height: 34px;
border: 1px solid var(--mall-line-dark);
background: #fff;
font-size: 13px;
cursor: pointer;
border-radius: var(--mall-radius);
}
button.on {
background: var(--mall-red);
border-color: var(--mall-red);
color: #fff;
}
button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
</style>
apps/mall/components/ui/ProductCard.vue
+31 -73
View File
@@ -12,78 +12,36 @@ const sold = computed(() => props.product.sold_count);
</script>
<template>
<NuxtLink :to="`/goods/${product.slug}`" class="card hover-lift">
<div class="img">
<img :src="product.images[0] || '/mock/product-1.svg'" :alt="pick(product.name, locale)" loading="lazy" />
</div>
<div class="body">
<p class="name">{{ pick(product.name, locale) }}</p>
<p class="sub">{{ pick(product.description, locale) }}</p>
<p class="price-row">
<span v-if="sku" class="price"><PriceText :amount-minor="sku.price_minor" :currency="sku.currency" /></span>
<s v-if="sku" class="market"><PriceText :amount-minor="sku.price_minor + 10000" :currency="sku.currency" /></s>
</p>
<p class="meta">{{ $t("product.salesCount", { n: sold }) }}</p>
</div>
<NuxtLink
:to="`/goods/${product.slug}`"
class="group block h-full no-underline text-inherit transition-shadow duration-200 hover:-translate-y-0.5 hover:shadow-lg"
>
<VCard :padded="false" class="h-full overflow-hidden border border-border bg-surface">
<div class="flex items-center justify-center p-4">
<img
:src="product.images[0] || '/mock/product-1.svg'"
:alt="pick(product.name, locale)"
loading="lazy"
class="h-[180px] w-[180px] object-contain"
/>
</div>
<div class="px-[14px] pb-[14px]">
<p class="m-0 h-[37px] overflow-hidden text-[13px] leading-[1.4] transition-colors group-hover:text-primary">
{{ pick(product.name, locale) }}
</p>
<p class="m-0 mb-2 mt-1 overflow-hidden text-ellipsis whitespace-nowrap text-[12px] text-muted/70">
{{ pick(product.description, locale) }}
</p>
<p class="m-0">
<span v-if="sku" class="mr-2 text-[16px] font-bold text-primary">
<PriceText :amount-minor="sku.price_minor" :currency="sku.currency" />
</span>
<s v-if="sku" class="text-[12px] text-muted/60">
<PriceText :amount-minor="sku.price_minor + 10000" :currency="sku.currency" />
</s>
</p>
<p class="m-0 mt-1.5 text-[12px] text-muted/70">{{ $t("product.salesCount", { n: sold }) }}</p>
</div>
</VCard>
</NuxtLink>
</template>
<style scoped>
.card {
display: block;
background: #fff;
text-decoration: none;
color: inherit;
border: 1px solid var(--mall-line);
}
.img {
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.img img {
width: 180px;
height: 180px;
object-fit: contain;
}
.body {
padding: 0 14px 14px;
}
.name {
font-size: 13px;
line-height: 1.4;
height: 37px;
overflow: hidden;
margin: 0;
}
.card:hover .name {
color: var(--mall-red);
}
.sub {
font-size: 12px;
color: var(--mall-faint);
margin: 4px 0 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.price-row {
margin: 0;
}
.price {
color: var(--mall-red);
font-size: 16px;
font-weight: 700;
margin-right: 8px;
}
.market {
color: var(--mall-faint);
font-size: 12px;
}
.meta {
margin: 6px 0 0;
font-size: 12px;
color: var(--mall-faint);
}
</style>
apps/mall/components/ui/QtyStepper.vue
+14 -37
View File
@@ -9,49 +9,26 @@ function set(v: number): void {
</script>
<template>
<div class="stepper">
<button type="button" :disabled="modelValue <= 1" @click="set(modelValue - 1)">−</button>
<div class="inline-flex overflow-hidden rounded-md border border-border">
<button
type="button"
class="h-8 w-[30px] border-0 bg-bg text-sm transition-colors hover:text-primary disabled:cursor-not-allowed disabled:opacity-40"
:disabled="modelValue <= 1"
@click="set(modelValue - 1)"
>−</button>
<input
:value="modelValue"
type="number"
:min="1"
:max="max"
class="h-8 w-12 [appearance:textfield] border-x border-border bg-surface text-center text-[13px] text-text outline-none focus:border-primary"
@change="set(Number(($event.target as HTMLInputElement).value))"
/>
<button type="button" :disabled="modelValue >= max" @click="set(modelValue + 1)">+</button>
<button
type="button"
class="h-8 w-[30px] border-0 bg-bg text-sm transition-colors hover:text-primary disabled:cursor-not-allowed disabled:opacity-40"
:disabled="modelValue >= max"
@click="set(modelValue + 1)"
>+</button>
</div>
</template>
<style scoped>
.stepper {
display: inline-flex;
border: 1px solid var(--mall-line-dark);
border-radius: var(--mall-radius);
overflow: hidden;
}
button {
width: 30px;
height: 32px;
border: 0;
background: #fafafa;
cursor: pointer;
font-size: 14px;
}
button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
input {
width: 48px;
height: 32px;
border: 0;
border-left: 1px solid var(--mall-line);
border-right: 1px solid var(--mall-line);
text-align: center;
font-size: 13px;
outline: none;
}
input::-webkit-inner-spin-button {
display: none;
}
</style>
apps/mall/components/ui/RatingStars.vue
+2 -11
View File
@@ -4,16 +4,7 @@ const stars = computed(() => [1, 2, 3, 4, 5].map((i) => i <= Math.round(props.va
</script>
<template>
<span class="stars" :style="{ fontSize: `${size}px` }">
<span v-for="(on, i) in stars" :key="i" :class="{ on }">★</span>
<span :style="{ fontSize: `${size}px` }">
<span v-for="(on, i) in stars" :key="i" :class="on ? 'text-primary' : 'text-[#ddd]'">★</span>
</span>
</template>
<style scoped>
.stars span {
color: #ddd;
}
.stars span.on {
color: var(--mall-red);
}
</style>
apps/mall/components/ui/StepBar.vue
+12 -42
View File
@@ -3,48 +3,18 @@ defineProps<{ steps: string[]; active: number }>();
</script>
<template>
<ol class="steps">
<li v-for="(s, i) in steps" :key="s" :class="{ done: i < active, on: i === active }">
<span class="n">{{ i + 1 }}</span>
<span class="label">{{ s }}</span>
<ol class="mb-5 flex list-none border border-border bg-bg py-3.5">
<li
v-for="(s, i) in steps"
:key="s"
class="flex-1 text-center text-[13px] text-muted/70"
:class="i === active ? 'font-semibold text-primary' : ''"
>
<span
class="mr-2 inline-block h-[22px] w-[22px] rounded-full text-center text-[12px] leading-[22px] text-white"
:class="i < active ? 'bg-success' : i === active ? 'bg-primary' : 'bg-[#ddd]'"
>{{ i + 1 }}</span>
<span>{{ s }}</span>
</li>
</ol>
</template>
<style scoped>
.steps {
display: flex;
list-style: none;
margin: 0 0 20px;
padding: 14px 0;
background: #fafafa;
border: 1px solid var(--mall-line);
}
li {
flex: 1;
text-align: center;
color: var(--mall-faint);
font-size: 13px;
}
.n {
display: inline-block;
width: 22px;
height: 22px;
line-height: 22px;
border-radius: 50%;
background: #ddd;
color: #fff;
margin-right: 8px;
font-size: 12px;
}
li.on {
color: var(--mall-red);
font-weight: 600;
}
li.on .n {
background: var(--mall-red);
}
li.done .n {
background: var(--mall-green);
}
</style>
apps/mall/components/ui/Tabs.vue
+5 -28
View File
@@ -4,42 +4,19 @@ const emit = defineEmits<{ "update:modelValue": [key: string] }>();
</script>
<template>
<div class="tabs">
<div class="tab-head">
<div>
<div class="flex border-b border-border">
<button
v-for="tab in tabs"
:key="tab.key"
type="button"
:class="{ on: tab.key === modelValue }"
class="border-0 border-b-2 border-transparent bg-transparent px-6 py-3 text-sm text-muted transition-colors"
:class="tab.key === modelValue ? 'border-primary font-semibold text-primary' : 'hover:text-primary'"
@click="emit('update:modelValue', tab.key)"
>{{ tab.label }}</button>
</div>
<div class="tab-body">
<div class="py-5">
<slot :active="modelValue" />
</div>
</div>
</template>
<style scoped>
.tab-head {
display: flex;
border-bottom: 1px solid var(--mall-line);
}
.tab-head button {
border: 0;
background: none;
padding: 12px 24px;
font-size: 14px;
cursor: pointer;
color: var(--mall-muted);
border-bottom: 2px solid transparent;
}
.tab-head button.on {
color: var(--mall-red);
border-bottom-color: var(--mall-red);
font-weight: 600;
}
.tab-body {
padding: 20px 0;
}
</style>