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/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>