nikitakiselev/interview-demo-code
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: add aspect ratio selector for products_carousel

Browse Source
This commit is contained in:
Nikita Kiselev
2025-12-06 18:14:07 +03:00
parent 1fbbb7b6db
commit 615e8c54a6
8 changed files with 96 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/admin/src/components/MainPageConfigurator/Forms/AspectRatioSelect.vue Normal file
View File

@@ -0,0 +1,31 @@
<template>
<Dropdown
v-model="model"
:options="aspectRatioOptions"
optionLabel="label"
optionValue="value"
placeholder="Выберите соотношение"
class="tw:w-full md:tw:w-96"
>
<template #option="slotProps">
<div class="tw:flex tw:flex-col">
<span class="tw:font-medium">{{ slotProps.option.label }}</span>
<span class="tw:text-xs tw:text-gray-500 tw:whitespace-normal">{{ slotProps.option.description }}</span>
</div>
</template>
</Dropdown>
</template>
<script setup>
import { Dropdown } from "primevue";
const model = defineModel();
const aspectRatioOptions = [
{ label: '1:1', value: '1:1', description: 'Универсально, аксессуары, мелкие товары, удобно для всех товаров — идеально для сетки.' },
{ label: '4:5', value: '4:5', description: 'Одежда, обувь, вертикальные товары, где нужно показать высоту (футболки, платья).' },
{ label: '3:4', value: '3:4', description: 'Одежда, обувь, вертикальные товары, где нужно показать высоту (футболки, платья).' },
{ label: '2:3', value: '2:3', description: 'Цветы, высокие предметы (бутылки, букеты, декоративные элементы).' },
];
</script>

35
frontend/admin/src/components/MainPageConfigurator/Forms/ProductsCarouselForm.vue
View File

@@ -36,6 +36,19 @@
Текст для кнопки, которая открывает просмотр товаров у категории
</template>
</FormItem>
<!-- Раздел Изображения -->
<div class="tw:border-t tw:border-gray-200 tw:pt-6">
<h3 class="tw:text-lg tw:font-medium tw:mb-4">Изображения</h3>
<FormItem label="Соотношение сторон">
<template #default>
<AspectRatioSelect v-model="imageAspectRatio"/>
</template>
<template #help>
Выберите соотношение сторон для изображений товаров.
</template>
</FormItem>
</div>
</div>
</Panel>
@@ -136,12 +149,31 @@ import BaseForm from "@/components/MainPageConfigurator/Forms/BaseForm.vue";
import FormItem from "@/components/MainPageConfigurator/Forms/FormItem.vue";
import CategorySelect from "@/components/Form/CategorySelect.vue";
import {Fieldset, InputNumber, InputText, Panel, ToggleSwitch} from "primevue";
import AspectRatioSelect from "@/components/MainPageConfigurator/Forms/AspectRatioSelect.vue";
const draft = ref(null);
const model = defineModel();
const emit = defineEmits(['cancel']);
const isChanged = computed(() => md5(JSON.stringify(model.value)) !== md5(JSON.stringify(draft.value)));
const imageAspectRatio = computed({
get() {
return draft.value.data.image_aspect_ratio || '1:1';
},
set(value) {
draft.value.data.image_aspect_ratio = value;
}
});
const isChanged = computed(() => {
const normalize = (obj) => {
const clone = JSON.parse(JSON.stringify(obj));
if (clone.data && !clone.data.image_aspect_ratio) {
clone.data.image_aspect_ratio = '1:1';
}
return JSON.stringify(clone);
};
return md5(normalize(model.value)) !== md5(normalize(draft.value));
});
// Инициализация carousel, если его нет (только для записи)
function ensureCarousel() {
@@ -242,6 +274,7 @@ function onApply() {
onMounted(async () => {
draft.value = JSON.parse(JSON.stringify(model.value));
// Не создаем carousel здесь, чтобы не изменять draft при инициализации
// carousel будет создан только при реальных изменениях пользователем
});

26
frontend/admin/src/components/MainPageConfigurator/Forms/ProductsFeedForm.vue
View File

@@ -29,21 +29,7 @@
<FormItem label="Соотношение сторон">
<template #default>
<Dropdown
v-model="draft.data.image_aspect_ratio"
:options="aspectRatioOptions"
optionLabel="label"
optionValue="value"
placeholder="Выберите соотношение"
class="tw:w-full md:tw:w-96"
>
<template #option="slotProps">
<div class="tw:flex tw:flex-col">
<span class="tw:font-medium">{{ slotProps.option.label }}</span>
<span class="tw:text-xs tw:text-gray-500 tw:whitespace-normal">{{ slotProps.option.description }}</span>
</div>
</template>
</Dropdown>
<AspectRatioSelect v-model="draft.data.image_aspect_ratio"/>
</template>
<template #help>
Выберите соотношение сторон для изображений товаров.
@@ -58,20 +44,14 @@
import {computed, defineExpose, onMounted, ref} from "vue";
import {md5} from "js-md5";
import BaseForm from "@/components/MainPageConfigurator/Forms/BaseForm.vue";
import {InputNumber, Dropdown} from "primevue";
import {InputNumber} from "primevue";
import FormItem from "@/components/MainPageConfigurator/Forms/FormItem.vue";
import AspectRatioSelect from "@/components/MainPageConfigurator/Forms/AspectRatioSelect.vue";
const draft = ref(null);
const model = defineModel();
const emit = defineEmits(['cancel']);
const aspectRatioOptions = [
{ label: '1:1', value: '1:1', description: 'Универсально, аксессуары, мелкие товары, удобно для всех товаров — идеально для сетки.' },
{ label: '4:5', value: '4:5', description: 'Одежда, обувь, вертикальные товары, где нужно показать высоту (футболки, платья).' },
{ label: '3:4', value: '3:4', description: 'Одежда, обувь, вертикальные товары, где нужно показать высоту (футболки, платья).' },
{ label: '2:3', value: '2:3', description: 'Цветы, высокие предметы (бутылки, букеты, декоративные элементы).' },
];
const isChanged = computed(() => {
const normalize = (obj) => {
return JSON.stringify(obj, (key, value) => {

1
frontend/admin/src/components/MainPageConfigurator/availableBlocks.js
View File

@@ -70,6 +70,7 @@ export const blocks = [
data: {
category_id: null,
all_text: null,
image_aspect_ratio: '1:1',
carousel: {
slides_per_view: null,
space_between: null,