feat(ui): adopt Tailwind v4 design system and archive change
- 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
@@ -15,191 +15,25 @@ const breadcrumb = computed(() => [
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="stores-page">
|
||||
<div class="min-h-screen bg-bg pb-16 font-sans text-text">
|
||||
<UiBreadcrumb :items="breadcrumb" />
|
||||
<section class="w1200 store-directory">
|
||||
<header class="sort-row">
|
||||
<h1>{{ t("stores.directory") }}</h1>
|
||||
</header>
|
||||
|
||||
<div v-if="stores.length" class="store-list">
|
||||
<article v-for="store in stores" :key="store.id" class="store-row hover-lift">
|
||||
<NuxtLink :to="`/stores/${store.slug}`" class="store-logo-link">
|
||||
<img v-if="store.logo" class="store-logo" :src="store.logo" :alt="pick(store.name, locale)" loading="lazy" />
|
||||
<span v-else class="store-logo store-logo-placeholder" aria-hidden="true">{{ pick(store.name, locale).slice(0, 1) }}</span>
|
||||
</NuxtLink>
|
||||
<div class="store-main">
|
||||
<NuxtLink :to="`/stores/${store.slug}`" class="store-name">{{ pick(store.name, locale) }}</NuxtLink>
|
||||
<p v-if="store.company" class="store-company">{{ store.company }}</p>
|
||||
<p v-if="store.region || store.address" class="store-location">
|
||||
<span v-if="store.region">{{ t("stores.region") }}：{{ store.region }}</span>
|
||||
<span v-if="store.address">{{ t("stores.address") }}：{{ pick(store.address, locale) }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="store-rating">{{ t("stores.positiveRate") }}</div>
|
||||
<div class="store-actions">
|
||||
<NuxtLink :to="`/stores/${store.slug}`" class="mbtn red">{{ t("stores.visitStore") }}</NuxtLink>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<UiEmptyState v-else :text="t('common.empty')" />
|
||||
<section class="mx-auto w-full max-w-mall px-4">
|
||||
<VCard :padded="false" class="overflow-hidden">
|
||||
<header class="flex items-center justify-between border-b border-border bg-bg px-[18px] py-3.5"><h1 class="m-0 border-l-[3px] border-primary pl-2.5 text-base font-medium">{{ t("stores.directory") }}</h1></header>
|
||||
<div v-if="stores.length" class="divide-y divide-border">
|
||||
<article v-for="store in stores" :key="store.id" class="flex min-h-[126px] items-center gap-0 bg-surface px-[22px] py-5 hover:bg-bg max-sm:flex-wrap max-sm:gap-3">
|
||||
<NuxtLink :to="`/stores/${store.slug}`" class="flex h-20 w-20 shrink-0 items-center justify-center border border-border bg-surface">
|
||||
<img v-if="store.logo" class="h-[72px] w-[72px] object-contain" :src="store.logo" :alt="pick(store.name, locale)" loading="lazy" />
|
||||
<span v-else class="flex h-full w-full items-center justify-center bg-bg text-[28px] font-bold uppercase text-muted" aria-hidden="true">{{ pick(store.name, locale).slice(0, 1) }}</span>
|
||||
</NuxtLink>
|
||||
<div class="min-w-0 flex-1 px-7 max-sm:w-[calc(100%-100px)] max-sm:px-0"><NuxtLink :to="`/stores/${store.slug}`" class="block text-base font-bold text-text no-underline hover:text-primary">{{ pick(store.name, locale) }}</NuxtLink><p v-if="store.company" class="mt-2 text-[13px] text-muted">{{ store.company }}</p><p v-if="store.region || store.address" class="mt-2 flex gap-6 text-xs text-muted max-sm:flex-col max-sm:gap-1"><span v-if="store.region">{{ t("stores.region") }}：{{ store.region }}</span><span v-if="store.address">{{ t("stores.address") }}：{{ pick(store.address, locale) }}</span></p></div>
|
||||
<div class="w-[130px] text-center text-[13px] text-primary max-sm:ml-[100px] max-sm:w-auto">{{ t("stores.positiveRate") }}</div>
|
||||
<div class="flex w-[145px] flex-col items-end gap-2.5 max-sm:ml-auto max-sm:w-auto"><NuxtLink :to="`/stores/${store.slug}`" class="inline-flex items-center rounded-md border border-primary bg-primary px-4 py-2 text-sm font-medium text-white no-underline hover:bg-primary-hover">{{ t("stores.visitStore") }}</NuxtLink></div>
|
||||
</article>
|
||||
</div>
|
||||
<UiEmptyState v-else :text="t('common.empty')" />
|
||||
</VCard>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.stores-page {
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
.store-directory {
|
||||
background: #fff;
|
||||
}
|
||||
.sort-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 1px solid var(--mall-line);
|
||||
background: #fafafa;
|
||||
padding: 13px 18px;
|
||||
}
|
||||
h1 {
|
||||
margin: 0;
|
||||
border-left: 3px solid var(--mall-red);
|
||||
padding-left: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.sort-options {
|
||||
display: flex;
|
||||
}
|
||||
.sort-options button {
|
||||
border: 0;
|
||||
border-right: 1px solid var(--mall-line-dark);
|
||||
background: transparent;
|
||||
color: var(--mall-muted);
|
||||
padding: 2px 15px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.sort-options button:last-child {
|
||||
border-right: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.sort-options button.active {
|
||||
color: var(--mall-red);
|
||||
font-weight: 700;
|
||||
}
|
||||
.store-list {
|
||||
border: 1px solid var(--mall-line);
|
||||
border-top: 0;
|
||||
}
|
||||
.store-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 126px;
|
||||
padding: 20px 22px;
|
||||
border-bottom: 1px solid var(--mall-line);
|
||||
background: #fff;
|
||||
}
|
||||
.store-row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.store-logo-link {
|
||||
display: flex;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 80px;
|
||||
border: 1px solid var(--mall-line);
|
||||
background: #fff;
|
||||
}
|
||||
.store-logo {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
object-fit: contain;
|
||||
}
|
||||
/* A shop with no profile still needs a mark, without inventing a logo. */
|
||||
.store-logo-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--mall-line);
|
||||
color: var(--mall-muted);
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.store-main {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
padding: 0 28px;
|
||||
}
|
||||
.store-name {
|
||||
display: block;
|
||||
color: var(--mall-ink);
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
.store-name:hover {
|
||||
color: var(--mall-red);
|
||||
}
|
||||
.store-company,
|
||||
.store-location {
|
||||
margin: 8px 0 0;
|
||||
color: var(--mall-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
.store-location {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
color: var(--mall-faint);
|
||||
font-size: 12px;
|
||||
}
|
||||
.store-rating {
|
||||
width: 130px;
|
||||
color: var(--mall-red);
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
}
|
||||
.store-actions {
|
||||
display: flex;
|
||||
width: 145px;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
.distance {
|
||||
color: var(--mall-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
@media (max-width: 1240px) {
|
||||
.w1200 {
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
.store-row {
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
.store-main {
|
||||
width: calc(100% - 100px);
|
||||
padding: 0;
|
||||
}
|
||||
.store-location {
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.store-rating {
|
||||
width: auto;
|
||||
margin-left: 100px;
|
||||
}
|
||||
.store-actions {
|
||||
width: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user