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/shop-admin/components/ProductForm.vue
+34 -49
View File
@@ -58,53 +58,38 @@ function submit(): void {
</script>
<template>
<form class="card form-narrow product-form" @submit.prevent="submit">
<div v-if="validationError" class="error-text" role="alert">{{ validationError }}</div>
<div class="field">
<label for="product-slug">{{ $t("product.slug") }}</label>
<input id="product-slug" v-model="slug" required pattern="[a-z0-9]+(?:-[a-z0-9]+)*" />
</div>
<div class="field">
<label for="product-name-en">{{ $t("product.nameEn") }}</label>
<input id="product-name-en" v-model="nameEn" required />
</div>
<div class="field">
<label for="product-name-zh">{{ $t("product.nameZh") }}</label>
<input id="product-name-zh" v-model="nameZh" />
</div>
<div class="field">
<label for="product-description-en">{{ $t("product.descEn") }}</label>
<textarea id="product-description-en" v-model="descriptionEn" rows="4" />
</div>
<div class="field">
<label for="product-description-zh">{{ $t("product.descZh") }}</label>
<textarea id="product-description-zh" v-model="descriptionZh" rows="4" />
</div>
<div class="field">
<label for="product-category">{{ $t("product.category") }}</label>
<select id="product-category" v-model="categoryId">
<option value="">{{ $t("shop.categoryOptional") }}</option>
<option v-for="category in categories" :key="category.id" :value="category.id">
{{ localized(category.name, locale) }}
</option>
</select>
</div>
<div class="field">
<label for="product-images">{{ $t("product.images") }}</label>
<textarea id="product-images" v-model="images" rows="4" :placeholder="$t('shop.imagesHint')" />
</div>
<button class="btn primary" type="submit" :disabled="busy">
{{ busy ? $t("common.loading") : product ? $t("shop.updateProduct") : $t("shop.saveProduct") }}
</button>
</form>
<VCard class="mx-auto my-10 w-full max-w-[720px]">
<form @submit.prevent="submit">
<div v-if="validationError" class="my-2 text-sm text-danger" role="alert">{{ validationError }}</div>
<VField :label="$t('product.slug')">
<VInput id="product-slug" v-model="slug" required pattern="[a-z0-9]+(?:-[a-z0-9]+)*" />
</VField>
<VField :label="$t('product.nameEn')">
<VInput id="product-name-en" v-model="nameEn" required />
</VField>
<VField :label="$t('product.nameZh')">
<VInput id="product-name-zh" v-model="nameZh" />
</VField>
<VField :label="$t('product.descEn')">
<textarea id="product-description-en" v-model="descriptionEn" rows="4" class="w-full resize-y rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30" />
</VField>
<VField :label="$t('product.descZh')">
<textarea id="product-description-zh" v-model="descriptionZh" rows="4" class="w-full resize-y rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30" />
</VField>
<VField :label="$t('product.category')">
<select id="product-category" v-model="categoryId" class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30">
<option value="">{{ $t("shop.categoryOptional") }}</option>
<option v-for="category in categories" :key="category.id" :value="category.id">
{{ localized(category.name, locale) }}
</option>
</select>
</VField>
<VField :label="$t('product.images')">
<textarea id="product-images" v-model="images" rows="4" :placeholder="$t('shop.imagesHint')" class="w-full resize-y rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30" />
</VField>
<VBtn variant="primary" type="submit" :disabled="busy">
{{ busy ? $t("common.loading") : product ? $t("shop.updateProduct") : $t("shop.saveProduct") }}
</VBtn>
</form>
</VCard>
</template>
<style scoped>
.product-form {
max-width: 720px;
margin: 0;
}
.product-form textarea {
resize: vertical;
}
</style>