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

wip(freight): migration 0017 + model/column-list groundwork for add-freight-templates

Browse Source
This commit is contained in:
Chengdong Zhang
2026-09-23 17:39:45 +08:00
parent a83e857bdf
commit 5b426486ac
105 changed files with 6193 additions and 1566 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/mall/pages/stores/index.vue
+61 -12
View File
@@ -15,20 +15,70 @@ const breadcrumb = computed(() => [
</script>
<template>
<div class="min-h-screen bg-bg pb-16 font-sans text-text">
<div class="bg-bg text-text min-h-screen pb-16 font-sans">
<UiBreadcrumb :items="breadcrumb" />
<section class="mx-auto w-full max-w-mall px-4">
<section class="max-w-mall mx-auto w-full 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>
<header
class="border-border bg-bg flex items-center justify-between border-b px-[18px] py-3.5"
>
<h1 class="border-primary m-0 border-l-[3px] pl-2.5 text-base font-medium">
{{ t("stores.directory") }}
</h1>
</header>
<div v-if="stores.length" class="divide-border divide-y">
<article
v-for="store in stores"
:key="store.id"
class="bg-surface hover:bg-bg flex min-h-[126px] items-center gap-0 px-[22px] py-5 max-sm:flex-wrap max-sm:gap-3"
>
<NuxtLink
:to="`/stores/${store.slug}`"
class="border-border bg-surface flex h-20 w-20 shrink-0 items-center justify-center border"
>
<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="bg-bg text-muted flex h-full w-full items-center justify-center text-[28px] font-bold uppercase"
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>
<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="text-text hover:text-primary block text-base font-bold no-underline"
>{{ pick(store.name, locale) }}</NuxtLink
>
<p v-if="store.company" class="text-muted mt-2 text-[13px]">{{ store.company }}</p>
<p
v-if="store.region || store.address"
class="text-muted mt-2 flex gap-6 text-xs 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="text-primary w-[130px] text-center text-[13px] 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="border-primary bg-primary hover:bg-primary-hover inline-flex items-center rounded-md border px-4 py-2 text-sm font-medium text-white no-underline"
>{{ t("stores.visitStore") }}</NuxtLink
>
</div>
</article>
</div>
<UiEmptyState v-else :text="t('common.empty')" />
@@ -36,4 +86,3 @@ const breadcrumb = computed(() => [
</section>
</div>
</template>