Chengdong Zhang
0d0e10b97b
- 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
96 lines
4.0 KiB
Vue
96 lines
4.0 KiB
Vue
<script setup lang="ts">
|
|
import { t as localized } from "@vmall/shared";
|
|
import type { Category, Product, ProductUpsertBody } from "@vmall/shared";
|
|
|
|
const props = defineProps<{
|
|
product?: Product;
|
|
categories: Category[];
|
|
busy?: boolean;
|
|
}>();
|
|
const emit = defineEmits<{ submit: [body: ProductUpsertBody] }>();
|
|
const { t: translate, locale } = useI18n();
|
|
|
|
const slug = ref("");
|
|
const nameEn = ref("");
|
|
const nameZh = ref("");
|
|
const descriptionEn = ref("");
|
|
const descriptionZh = ref("");
|
|
const categoryId = ref("");
|
|
const images = ref("");
|
|
const validationError = ref("");
|
|
|
|
function resetFromProduct(product: Product | undefined): void {
|
|
slug.value = product?.slug ?? "";
|
|
nameEn.value = product?.name.en ?? "";
|
|
nameZh.value = product?.name.zh ?? "";
|
|
descriptionEn.value = product?.description.en ?? "";
|
|
descriptionZh.value = product?.description.zh ?? "";
|
|
categoryId.value = product?.category_id ?? "";
|
|
images.value = product?.images.join("\n") ?? "";
|
|
validationError.value = "";
|
|
}
|
|
|
|
watch(() => props.product, resetFromProduct, { immediate: true });
|
|
|
|
function submit(): void {
|
|
const cleanSlug = slug.value.trim();
|
|
if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(cleanSlug)) {
|
|
validationError.value = translate("shop.slugInvalid");
|
|
return;
|
|
}
|
|
if (!nameEn.value.trim()) {
|
|
validationError.value = translate("shop.productNameRequired");
|
|
return;
|
|
}
|
|
validationError.value = "";
|
|
const body: ProductUpsertBody = {
|
|
category_id: categoryId.value || null,
|
|
slug: cleanSlug,
|
|
name: { en: nameEn.value.trim(), zh: nameZh.value.trim() },
|
|
description: { en: descriptionEn.value.trim(), zh: descriptionZh.value.trim() },
|
|
images: images.value
|
|
.split("\n")
|
|
.map((image) => image.trim())
|
|
.filter((image) => image.length > 0),
|
|
};
|
|
emit("submit", body);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<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>
|