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

feat: improve mainpage ui/ux

Browse Source
This commit is contained in:
Nikita Kiselev
2025-11-16 01:38:57 +03:00
parent f0837e5c94
commit f5d9d417b3
26 changed files with 222 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/admin/src/assets/main.css
View File

@@ -46,3 +46,7 @@ legend.p-fieldset-legend {
width: auto;
margin-bottom: 0;
}
.telecart-admin-app {
color: var(--color-slate-700);
}

5
frontend/admin/src/components/MainPageConfigurator/Blocks/BaseBlock.vue
View File

@@ -1,6 +1,5 @@
<template>
<div
class="tw:bg-white dark:tw:bg-slate-800 tw:rounded-lg tw:shadow-sm tw:border tw:border-slate-200 dark:tw:border-slate-700 tw:p-6 tw:mb-3">
<div>
<div class="tw:flex tw:justify-between tw:items-start">
<div>
<h3 class="p-card-title">
@@ -15,7 +14,6 @@
severity="contrast"
rounded
text
size="large"
@click="$emit('onShowSettings')"
/>
@@ -24,7 +22,6 @@
severity="danger"
rounded
text
size="large"
@click="confirmedRemove($event)"
/>
</div>

2
frontend/admin/src/components/MainPageConfigurator/Blocks/CategoriesTopBlock.vue
View File

@@ -1,6 +1,6 @@
<template>
<BaseBlock
:title="`Топ категорий - ${value.title || 'Без заголовока'}`"
:title="`Топ категорий - ${value.title || 'Без заголовка'}`"
@onRemove="$emit('onRemove')"
@onShowSettings="$emit('onShowSettings')"
>

2
frontend/admin/src/components/MainPageConfigurator/Blocks/ProductsCarouselBlock.vue
View File

@@ -1,6 +1,6 @@
<template>
<BaseBlock
:title="`Карусель товаров - ${value.title || 'Без заголовока'}`"
:title="`Карусель товаров - ${value.title || 'Без заголовка'}`"
@onRemove="$emit('onRemove')"
@onShowSettings="$emit('onShowSettings')"
>

2
frontend/admin/src/components/MainPageConfigurator/Blocks/ProductsFeedBlock.vue
View File

@@ -1,6 +1,6 @@
<template>
<BaseBlock
:title="`Лента товаров - ${value.title || 'Без заголовока'}`"
:title="`Лента товаров - ${value.title || 'Без заголовка'}`"
@onRemove="$emit('onRemove')"
@onShowSettings="$emit('onShowSettings')"
>

2
frontend/admin/src/components/MainPageConfigurator/Blocks/SliderBlock.vue
View File

@@ -1,6 +1,6 @@
<template>
<BaseBlock
:title="`Слайдер - ${value.title || 'Без заголовока'}`"
:title="`Слайдер - ${value.title || 'Без заголовка'}`"
@onRemove="$emit('onRemove')"
@onShowSettings="$emit('onShowSettings')"
>

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

@@ -7,7 +7,6 @@
@cancel="$emit('cancel')"
>
<template #default>
<pre>{{ draft }}</pre>
<div class="tw:space-y-6">
<Panel header="Основные настройки">
<div class="tw:space-y-6">
@@ -111,6 +110,17 @@
Задержка между переходами в миллисекундах. Минимум 1000, максимум 10000.
</template>
</FormItem>
<!-- Свободный режим -->
<FormItem label="Свободный режим">
<template #default>
<ToggleSwitch v-model="freeMode"/>
</template>
<template #help>
Включает «свободный режим» прокрутки слайдов без привязки к конкретным индексам.
Слайды прокручиваются плавно, скорость зависит от инерции свайпа.
</template>
</FormItem>
</div>
</Panel>
</div>
@@ -206,6 +216,26 @@ const autoplayDelay = computed({
}
});
const freeMode = computed({
get() {
const freemode = draft.value.data.carousel?.freemode;
if (freemode && typeof freemode === 'object' && freemode.enabled) {
return freemode.enabled;
}
return false;
},
set(value) {
ensureCarousel();
// Убеждаемся, что autoplay - это объект
if (!draft.value.data.carousel.freemode) {
draft.value.data.carousel.freemode = {};
draft.value.data.carousel.freemode.enabled = value;
} else {
draft.value.data.carousel.freemode.enabled = value;
}
}
});
function onApply() {
model.value = JSON.parse(JSON.stringify(draft.value));
}

24
frontend/admin/src/components/MainPageConfigurator/MainPageConfigurator.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="tw:flex tw:gap-4">
<section class="tw:w-1/3 tw:p-4 tw:bg-gray-100 tw:rounded-xl">
<header class="tw:font-bold tw:uppercase">Доступные блоки</header>
<section class="tw:w-1/3 tw:p-4 tw:bg-slate-100 tw:rounded-lg">
<header class="tw:font-semibold tw:text-lg tw:uppercase">Доступные блоки</header>
<div class="tw:mb-6">Перетяните блок, чтобы добавить на главную страницу</div>
<draggable
@@ -28,25 +28,27 @@
</draggable>
</section>
<section class="tw:w-full tw:rounded-xl tw:p-4 tw:bg-gray-100 tw:min-h-[400px] tw:relative">
<header class="tw:font-bold tw:uppercase">Блоки на главной странице</header>
<section class="tw:w-full tw:rounded-xl tw:p-4 tw:bg-slate-100 tw:min-h-[400px] tw:relative">
<header class="tw:font-semibold tw:text-lg tw:uppercase">Блоки на главной странице</header>
<div class="tw:mb-6">Эти блоки будут отображены на главной странице в том же порядке. Перетяните блок, если хотите изменить порядок.</div>
<draggable
v-model="settings.items.mainpage_blocks"
:group="{ name: 'blocks', put: true }"
item-key="type"
class="tw:w-full tw:h-full tw:min-h-[400px]"
class="tw:w-full tw:h-full tw:min-h-[400px] tw:space-y-2"
@change="onChange"
>
<template #item="{ element, index }">
<template v-if="blockToComponentMap[element.type]">
<component
:is="blockToComponentMap[element.type]"
:value="element"
@onRemove="removeBlock(index)"
@onShowSettings="showDrawer(index)"
/>
<div class="tw:bg-white tw:rounded-lg tw:p-6 tw:border tw:border-slate-200">
<component
:is="blockToComponentMap[element.type]"
:value="element"
@onRemove="removeBlock(index)"
@onShowSettings="showDrawer(index)"
/>
</div>
</template>
<div v-else>неподдерживаемый блок</div>

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

@@ -34,7 +34,7 @@ export const blocks = [
pagination: true,
scrollbar: false,
free_mode: false,
space_between: 30,
space_between: 5,
autoplay: false,
loop: false,
slides: [],
@@ -73,6 +73,9 @@ export const blocks = [
slides_per_view: null,
space_between: null,
autoplay: false,
freemode: {
enabled: false,
}
},
},
},