feat: new settings and mainpage blocks

2025-11-11 00:30:39 +03:00
parent 5fb45000ac
commit 6176c720b1
97 changed files with 1842 additions and 1658 deletions
--- a/frontend/admin/bun.lock
+++ b/frontend/admin/bun.lock
@@ -9,12 +9,14 @@
        "@vueuse/core": "^14.0.0",
        "axios": "^1.13.1",
        "daisyui": "^5.4.2",
+        "js-md5": "^0.8.3",
        "mitt": "^3.0.1",
        "pinia": "^3.0.3",
        "primevue": "^4.4.1",
        "tailwindcss": "^4.1.16",
        "vue": "^3.5.22",
        "vue-router": "^4.6.3",
+        "vuedraggable": "^4.1.0",
      },
      "devDependencies": {
        "@eslint/js": "^9.37.0",
@@ -576,6 +578,8 @@

    "jiti": ["jiti@2.6.1", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ=="],

+    "js-md5": ["js-md5@0.8.3", "", {}, "sha512-qR0HB5uP6wCuRMrWPTrkMaev7MJZwJuuw4fnwAzRgP4J4/F8RwtodOKpGp4XpqsLBFzzgqIO42efFAyz2Et6KQ=="],
+
    "js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],

    "js-yaml": ["js-yaml@4.1.0", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA=="],
@@ -728,6 +732,8 @@

    "sirv": ["sirv@3.0.2", "", { "dependencies": { "@polka/url": "^1.0.0-next.24", "mrmime": "^2.0.0", "totalist": "^3.0.0" } }, "sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g=="],

+    "sortablejs": ["sortablejs@1.14.0", "", {}, "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="],
+
    "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],

    "speakingurl": ["speakingurl@14.0.1", "", {}, "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ=="],
@@ -778,6 +784,8 @@

    "vue-router": ["vue-router@4.6.3", "", { "dependencies": { "@vue/devtools-api": "^6.6.4" }, "peerDependencies": { "vue": "^3.5.0" } }, "sha512-ARBedLm9YlbvQomnmq91Os7ck6efydTSpRP3nuOKCvgJOHNrhRoJDSKtee8kcL1Vf7nz6U+PMBL+hTvR3bTVQg=="],

+    "vuedraggable": ["vuedraggable@4.1.0", "", { "dependencies": { "sortablejs": "1.14.0" }, "peerDependencies": { "vue": "^3.0.1" } }, "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww=="],
+
    "which": ["which@5.0.0", "", { "dependencies": { "isexe": "^3.1.1" }, "bin": { "node-which": "bin/which.js" } }, "sha512-JEdGzHwwkrbWoGOlIHqQ5gtprKGOenpDHpxE9zVR1bWbOtYRyPPHMe9FaP6x61CmNaTThSkb0DAJte5jD+DmzQ=="],

    "word-wrap": ["word-wrap@1.2.5", "", {}, "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA=="],
--- a/frontend/admin/package.json
+++ b/frontend/admin/package.json
@@ -21,12 +21,14 @@
    "@vueuse/core": "^14.0.0",
    "axios": "^1.13.1",
    "daisyui": "^5.4.2",
+    "js-md5": "^0.8.3",
    "mitt": "^3.0.1",
    "pinia": "^3.0.3",
    "primevue": "^4.4.1",
    "tailwindcss": "^4.1.16",
    "vue": "^3.5.22",
-    "vue-router": "^4.6.3"
+    "vue-router": "^4.6.3",
+    "vuedraggable": "^4.1.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.37.0",
--- a/frontend/admin/src/App.vue
+++ b/frontend/admin/src/App.vue
@@ -26,8 +26,8 @@
        <RouterLink :to="{name: 'orders'}">Заказы</RouterLink>
      </li>

-      <li :class="{active: route.name === 'slider'}">
-        <RouterLink :to="{name: 'slider'}">Слайдер</RouterLink>
+      <li :class="{active: route.name === 'mainpage'}">
+        <RouterLink :to="{name: 'mainpage'}">Главная страница</RouterLink>
      </li>
    </ul>

@@ -36,20 +36,39 @@
    </section>

    <section>
-      <Button label="Сохранить настройки" @click="settings.saveSettings"/>
+      <Divider/>
+      <div class="tw:flex tw:items-center tw:justify-start tw:gap-4">
+        <Button
+          label="Сохранить настройки"
+          :disabled="!settings.hasUnsavedChanges"
+          v-tooltip.top="settings.hasUnsavedChanges ? 'Сохранить изменения' : 'Нет изменений для сохранения'"
+          @click="settings.saveSettings"
+        />
+        <div v-if="settings.hasUnsavedChanges"
+             class="tw:flex tw:items-center tw:gap-2 tw:text-red-600">
+          <i class="fa fa-exclamation-triangle"></i>
+          <span class="tw:text-sm">Есть несохранённые изменения</span>
+        </div>
+      </div>
    </section>

-    <div v-if="settings.isLoading" class="tw:w-full tw:h-full tw:absolute tw:top-0 tw:left-0 tw:z-30 tw:backdrop-blur-sm">
-      <div class="tw:fixed tw:top-0 tw:left-0 tw:w-full tw:h-full tw:flex tw:justify-center tw:items-center tw:z-40 tw:text-4xl">
+    <div v-if="settings.isLoading"
+         class="tw:w-full tw:h-full tw:absolute tw:top-0 tw:left-0 tw:z-30 tw:backdrop-blur-sm">
+      <div
+        class="tw:fixed tw:top-0 tw:left-0 tw:w-full tw:h-full tw:flex tw:justify-center tw:items-center tw:z-40 tw:text-4xl">
        <i class="fa fa-spin fa-spinner tw:mr-5"></i>
        <div>Загрузка...</div>
      </div>
    </div>
    <Toast position="top-right"/>
+    <ConfirmDialog/>
+    <ConfirmPopup group="popup"/>
  </div>

-  <div v-else class="tw:w-full tw:h-full tw:absolute tw:top-0 tw:left-0 tw:z-30 tw:backdrop-blur-sm">
-    <div class="tw:fixed tw:top-0 tw:left-0 tw:w-full tw:h-full tw:flex tw:flex-col tw:justify-center tw:items-center tw:z-40">
+  <div v-else
+       class="tw:w-full tw:h-full tw:absolute tw:top-0 tw:left-0 tw:z-30 tw:backdrop-blur-sm">
+    <div
+      class="tw:fixed tw:top-0 tw:left-0 tw:w-full tw:h-full tw:flex tw:flex-col tw:justify-center tw:items-center tw:z-40">
      <i class="fa fa-ban tw:text-4xl"></i>
      <div class="tw:text-4xl">{{ settings.error }}</div>
      <div>Обратитесь в поддержку</div>
@@ -61,15 +80,36 @@
 import {RouterView, useRoute} from 'vue-router';
 import {useSettingsStore} from "@/stores/settings.js";
 import Toast from 'primevue/toast';
-import { toastBus } from '@/utils/toastHelper';
+import {toastBus} from '@/utils/toastHelper';
 import {useToast} from "primevue";
 import Button from 'primevue/button';
 import TopLead from "@/components/TopLead.vue";
+import Divider from 'primevue/divider';
+import ConfirmDialog from 'primevue/confirmdialog';
+import ConfirmPopup from 'primevue/confirmpopup';
+import {onBeforeUnmount, onMounted} from "vue";

 const route = useRoute();
 const settings = useSettingsStore();
 const toast = useToast();
 toastBus.on('show', (data) => toast.add(data));
+
+// Защита от обновления страницы или закрытия вкладки
+function handleBeforeUnload(event) {
+  if (settings.hasUnsavedChanges) {
+    event.preventDefault();
+    event.returnValue = 'У вас есть несохранённые изменения. Вы уверены, что хотите покинуть страницу?';
+    return event.returnValue;
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('beforeunload', handleBeforeUnload);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('beforeunload', handleBeforeUnload);
+});
 </script>


--- a/frontend/admin/src/assets/main.css
+++ b/frontend/admin/src/assets/main.css
@@ -39,3 +39,10 @@ html {
  border-radius: unset;
  margin: 0;
 }
+
+legend.p-fieldset-legend {
+  font-size: 14px;
+  line-height: inherit;
+  width: auto;
+  margin-bottom: 0;
+}
--- a/frontend/admin/src/components/MainPageConfigurator/Blocks/BaseBlock.vue
+++ b/frontend/admin/src/components/MainPageConfigurator/Blocks/BaseBlock.vue
@@ -0,0 +1,70 @@
+<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 class="tw:flex tw:justify-between tw:items-start">
+      <div>
+        <h3 class="p-card-title">
+          {{ title }}
+        </h3>
+
+        <slot/>
+      </div>
+      <div class="tw:flex tw:items-center tw:gap-2">
+        <Button
+          icon="fa fa-cog"
+          severity="contrast"
+          rounded
+          text
+          size="large"
+          @click="$emit('onShowSettings')"
+        />
+
+        <Button
+          icon="fa fa-trash"
+          severity="danger"
+          rounded
+          text
+          size="large"
+          @click="confirmedRemove($event)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {Button, useConfirm} from "primevue";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: null,
+  },
+});
+
+const confirm = useConfirm();
+const emit = defineEmits(['onRemove', 'onShowSettings']);
+
+function confirmedRemove(event) {
+  confirm.require({
+    group: 'popup',
+    target: event.currentTarget,
+    message: 'Удалить блок?',
+    icon: 'pi pi-exclamation-triangle',
+    rejectProps: {
+      label: 'Отмена',
+      severity: 'secondary',
+      outlined: true
+    },
+    acceptProps: {
+      label: 'Удалить',
+      severity: 'danger'
+    },
+    accept: () => emit('onRemove'),
+  });
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
--- a/frontend/admin/src/components/MainPageConfigurator/Blocks/CategoriesTopBlock.vue
+++ b/frontend/admin/src/components/MainPageConfigurator/Blocks/CategoriesTopBlock.vue
@@ -0,0 +1,29 @@
+<template>
+  <BaseBlock
+    :title="`Топ категорий - ${value.title || 'Без заголовока'}`"
+    @onRemove="$emit('onRemove')"
+    @onShowSettings="$emit('onShowSettings')"
+  >
+    <div class="tw:mt-3 tw:text-sm tw:dark:text-slate-300 tw:space-y-1">
+      <div><span class="tw:font-bold tw:dark:text-slate-200">Описание:</span> {{
+          value.description
+        }}
+      </div>
+      <div><span class="tw:font-bold tw:dark:text-slate-200">Кол-во категорий:</span>
+        {{ value.data.count }}
+      </div>
+    </div>
+  </BaseBlock>
+</template>
+
+<script setup>
+import BaseBlock from "@/components/MainPageConfigurator/Blocks/BaseBlock.vue";
+
+const emit = defineEmits(['onRemove', 'onShowSettings']);
+const props = defineProps({
+  value: {
+    type: Object,
+    required: true,
+  }
+});
+</script>
--- a/frontend/admin/src/components/MainPageConfigurator/Blocks/ProductsFeedBlock.vue
+++ b/frontend/admin/src/components/MainPageConfigurator/Blocks/ProductsFeedBlock.vue
@@ -0,0 +1,30 @@
+<template>
+  <BaseBlock
+    :title="`Лента товаров - ${value.title || 'Без заголовока'}`"
+    @onRemove="$emit('onRemove')"
+    @onShowSettings="$emit('onShowSettings')"
+  >
+    <div class="tw:mt-3 tw:text-sm tw:dark:text-slate-300 tw:space-y-1">
+      <div>
+        <span class="tw:font-bold tw:dark:text-slate-200">Описание:</span>
+        {{ value.description }}
+      </div>
+      <div>
+        <span class="tw:font-bold tw:dark:text-slate-200">Максимальное кол-во страниц:</span>
+        {{ value.data.max_page_count }}
+      </div>
+    </div>
+  </BaseBlock>
+</template>
+
+<script setup>
+import BaseBlock from "@/components/MainPageConfigurator/Blocks/BaseBlock.vue";
+
+const emit = defineEmits(['onRemove', 'onShowSettings']);
+const props = defineProps({
+  value: {
+    type: Object,
+    required: true,
+  }
+});
+</script>
--- a/frontend/admin/src/components/MainPageConfigurator/Blocks/SliderBlock.vue
+++ b/frontend/admin/src/components/MainPageConfigurator/Blocks/SliderBlock.vue
@@ -0,0 +1,46 @@
+<template>
+  <BaseBlock
+    :title="`Слайдер - ${value.title || 'Без заголовока'}`"
+    @onRemove="$emit('onRemove')"
+    @onShowSettings="$emit('onShowSettings')"
+  >
+    <div class="tw:mt-3 tw:text-sm tw:dark:text-slate-300 tw:space-y-1">
+      <div><span class="tw:font-bold tw:dark:text-slate-200">Статус:</span>
+        {{ value.is_enabled ? 'Включен' : 'Выключен' }}
+      </div>
+      <div><span class="tw:font-bold tw:dark:text-slate-200">Эффект:</span>
+        {{ sliderEffectOptions[value.data.effect] || value.data.effect }}
+      </div>
+      <div><span class="tw:font-bold tw:dark:text-slate-200">Авто:</span>
+        {{ value.data.autoplay ? 'Включен' : 'Выключен' }}
+      </div>
+      <div><span class="tw:font-bold tw:dark:text-slate-200">Цель Яндекс.Метрики:</span>
+        {{ value.goal_name || 'Не задана' }}
+      </div>
+    </div>
+
+    <div class="tw:mt-6 tw:flex tw:flex-wrap tw:gap-4">
+      <img
+        v-if="value.data.slides && value.data.slides.length > 0"
+        v-for="slide in value.data.slides"
+        :alt="slide.title"
+        class="tw:w-24 tw:h-24 tw:object-cover tw:rounded-md tw:border-2 tw:border-slate-200 dark:tw:border-slate-600"
+        :src="getThumb(slide.image)"
+      />
+    </div>
+  </BaseBlock>
+</template>
+
+<script setup>
+import {getThumb} from "@/utils/helpers.js";
+import {sliderEffectOptions} from "@/utils/constants..js";
+import BaseBlock from "@/components/MainPageConfigurator/Blocks/BaseBlock.vue";
+
+const emit = defineEmits(['onRemove', 'onShowSettings']);
+const props = defineProps({
+  value: {
+    type: Object,
+    required: true,
+  }
+});
+</script>
--- a/frontend/admin/src/components/MainPageConfigurator/Forms/BaseForm.vue
+++ b/frontend/admin/src/components/MainPageConfigurator/Forms/BaseForm.vue
@@ -0,0 +1,128 @@
+<template>
+  <Tabs value="0">
+    <TabList>
+      <Tab value="0">Настройки блока</Tab>
+      <Tab value="1">Основные настройки</Tab>
+    </TabList>
+    <TabPanels>
+      <TabPanel value="0">
+        <div class="tw:space-y-6">
+          <!-- Статус -->
+          <div>
+            <div class="tw:flex tw:items-center tw:justify-between tw:mb-2">
+              <label class="tw:font-medium tw:text-gray-700">
+                Статус
+              </label>
+              <ToggleSwitch v-model="model.is_enabled"/>
+            </div>
+            <small class="tw:block tw:text-sm tw:text-gray-500">
+              Показывать этот блок
+            </small>
+          </div>
+
+          <!-- Заголовок блока -->
+          <div>
+            <div class="tw:mb-2">
+              <label class="tw:font-medium tw:text-gray-700">
+                Заголовок блока
+              </label>
+
+              <InputText
+                v-model="model.title"
+                placeholder="заголовок блока"
+                class="tw:w-full"
+              />
+            </div>
+            <small class="tw:block tw:text-sm tw:text-gray-500">
+              Текст, который будет выводиться в качестве заголовка блока на главной странице. Оставьте
+              пустым, если заголовок не требуется.
+            </small>
+          </div>
+
+          <!-- Описание блока -->
+          <div>
+            <div class="tw:mb-2">
+              <label class="tw:font-medium tw:text-gray-700">
+                Описание блока
+              </label>
+
+              <InputText
+                v-model="model.description"
+                placeholder="Описание блока"
+                class="tw:w-full"
+              />
+            </div>
+            <small class="tw:block tw:text-sm tw:text-gray-500">
+              Описание выводится под заголовком блока уменьшенным шрифтом. Оставьте пустым, если
+              описание не требуется.
+            </small>
+          </div>
+
+          <!-- Цель Яндекс.Метрики -->
+          <div>
+            <div class="tw:mb-2">
+              <label class="tw:font-medium tw:text-gray-700">
+                Цель Яндекс.Метрики
+              </label>
+
+              <InputText
+                v-model="model.goal_name"
+                placeholder="Название цели для Яндекс.Метрики"
+                class="tw:w-full"
+              />
+            </div>
+            <small class="tw:block tw:text-sm tw:text-gray-500">
+              Цель в Яндекс.Метрике для отслеживания кликов по блоку.
+              Оставьте пустым, если не нужно отслеживать клики по этому блоку.
+            </small>
+          </div>
+        </div>
+      </TabPanel>
+      <TabPanel value="1">
+        <slot></slot>
+      </TabPanel>
+    </TabPanels>
+  </Tabs>
+
+  <Divider/>
+
+  <div class="tw:flex tw:items-center tw:justify-between tw:gap-4">
+    <div class="tw:flex tw:gap-2">
+      <Button
+        label="Применить"
+        icon="fa fa-check"
+        v-tooltip.top="isChanged ? 'Применить изменения' : 'Нет изменений для сохранения'"
+        :disabled="isChanged === false"
+        @click="onApply"
+      />
+      <Button label="Отмена" severity="secondary" @click="$emit('cancel')"/>
+    </div>
+    <div v-if="isChanged" class="tw:flex tw:items-center tw:gap-2 tw:text-amber-600">
+      <i class="fa fa-exclamation-triangle"></i>
+      <span class="tw:text-sm">Есть несохранённые изменения</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {Button, Divider, InputText, Panel, ToggleSwitch} from 'primevue';
+import Tabs from 'primevue/tabs';
+import TabList from 'primevue/tablist';
+import Tab from 'primevue/tab';
+import TabPanels from 'primevue/tabpanels';
+import TabPanel from 'primevue/tabpanel';
+
+
+const model = defineModel();
+const emit = defineEmits(['onApply', 'cancel']);
+const props = defineProps({
+  isChanged: {
+    type: Boolean,
+    default: false,
+  }
+});
+
+function onApply() {
+  emit('onApply');
+}
+</script>
--- a/frontend/admin/src/components/MainPageConfigurator/Forms/CategoriesTopForm.vue
+++ b/frontend/admin/src/components/MainPageConfigurator/Forms/CategoriesTopForm.vue
@@ -0,0 +1,55 @@
+<template>
+  <div v-if="draft">
+    <BaseForm
+      v-model="draft"
+      :isChanged="isChanged"
+      @onApply="onApply"
+      @cancel="$emit('cancel')"
+    >
+      <div class="tw:space-y-6">
+        <!-- Количество категорий -->
+        <FormItem label="Количество категорий">
+          <template #default>
+            <InputNumber
+              v-model="draft.data.count"
+              :min="0"
+              :max="100"
+              placeholder="10"
+              :showButtons="true"
+            />
+            <span class="tw:text-gray-600 tw:whitespace-nowrap">шт.</span>
+          </template>
+
+          <template #help>
+            Количество категорий, которое нужно выводить в блоке. Если поставить 0, то будет
+            выводиться только кнопка "Каталог".
+          </template>
+        </FormItem>
+      </div>
+    </BaseForm>
+  </div>
+</template>
+
+<script setup>
+import {computed, defineExpose, onMounted, ref} from "vue";
+import {md5} from "js-md5";
+import BaseForm from "@/components/MainPageConfigurator/Forms/BaseForm.vue";
+import {InputNumber, Panel} from "primevue";
+import FormItem from "@/components/MainPageConfigurator/Forms/FormItem.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)));
+
+function onApply() {
+  model.value = JSON.parse(JSON.stringify(draft.value));
+}
+
+onMounted(() => {
+  draft.value = JSON.parse(JSON.stringify(model.value));
+});
+
+defineExpose({isChanged});
+</script>
--- a/frontend/admin/src/components/MainPageConfigurator/Forms/FormItem.vue
+++ b/frontend/admin/src/components/MainPageConfigurator/Forms/FormItem.vue
@@ -0,0 +1,25 @@
+<template>
+  <!-- Расстояние между слайдами -->
+  <div>
+    <div class="tw:flex tw:items-center tw:justify-between tw:mb-2 tw:gap-4">
+      <label v-if="label" class="tw:font-medium tw:text-gray-700 tw:flex-shrink-0">
+        {{ label }}
+      </label>
+      <div class="tw:flex tw:items-center tw:gap-2 tw:flex-shrink-0">
+        <slot/>
+      </div>
+    </div>
+    <small class="tw:block tw:text-sm tw:text-gray-500">
+      <slot name="help"/>
+    </small>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  label: {
+    type: String,
+    default: null,
+  },
+});
+</script>
--- a/frontend/admin/src/components/MainPageConfigurator/Forms/ProductsFeedForm.vue
+++ b/frontend/admin/src/components/MainPageConfigurator/Forms/ProductsFeedForm.vue
@@ -0,0 +1,56 @@
+<template>
+  <div v-if="draft">
+    <BaseForm
+      v-model="draft"
+      :isChanged="isChanged"
+      @onApply="onApply"
+      @cancel="$emit('cancel')"
+    >
+      <div class="tw:space-y-6">
+        <!-- Максимальное количество страниц -->
+        <FormItem label="Максимальное количество страниц">
+          <template #default>
+            <InputNumber
+              v-model="draft.data.max_page_count"
+              :min="1"
+              :max="100"
+              placeholder="10"
+              :showButtons="true"
+            />
+            <span class="tw:text-gray-600 tw:whitespace-nowrap">страниц</span>
+          </template>
+
+          <template #help>
+            Укажите, сколько страниц товаров можно подгружать при бесконечной прокрутки.
+            После достижения этого лимита подгрузка остановится.
+            Ограничение страниц снижает нагрузку на сервер.
+          </template>
+        </FormItem>
+      </div>
+    </BaseForm>
+  </div>
+</template>
+
+<script setup>
+import {computed, defineExpose, onMounted, ref} from "vue";
+import {md5} from "js-md5";
+import BaseForm from "@/components/MainPageConfigurator/Forms/BaseForm.vue";
+import {InputNumber} from "primevue";
+import FormItem from "@/components/MainPageConfigurator/Forms/FormItem.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)));
+
+function onApply() {
+  model.value = JSON.parse(JSON.stringify(draft.value));
+}
+
+onMounted(() => {
+  draft.value = JSON.parse(JSON.stringify(model.value));
+});
+
+defineExpose({isChanged});
+</script>
--- a/frontend/admin/src/components/MainPageConfigurator/Forms/SliderForm.vue
+++ b/frontend/admin/src/components/MainPageConfigurator/Forms/SliderForm.vue
@@ -0,0 +1,271 @@
+<template>
+  <div v-if="draft">
+    <BaseForm
+      v-model="draft"
+      :isChanged="isChanged"
+      @onApply="onApply"
+      @cancel="$emit('cancel')"
+    >
+      <!-- Основные настройки -->
+      <Panel header="Основные настройки" class="tw:mb-4">
+        <div class="tw:space-y-6">
+          <!-- Эффект смены слайдов -->
+          <div>
+            <div class="tw:flex tw:items-center tw:justify-between tw:mb-2">
+              <label class="tw:font-medium tw:text-gray-700">
+                Эффект смены слайдов
+              </label>
+              <Dropdown
+                v-model="draft.data.effect"
+                :options="effectOptionsList"
+                optionLabel="label"
+                optionValue="value"
+                placeholder="Выберите эффект"
+                class="tw:w-64"
+              />
+            </div>
+          </div>
+
+          <!-- Пагинация -->
+          <div>
+            <div class="tw:flex tw:items-center tw:justify-between tw:mb-2">
+              <label class="tw:font-medium tw:text-gray-700">
+                Пагинация
+              </label>
+              <ToggleSwitch v-model="draft.data.pagination"/>
+            </div>
+            <small class="tw:block tw:text-sm tw:text-gray-500">
+              Показывать точки под слайдером для индикации текущего слайда.
+            </small>
+          </div>
+
+          <!-- Полоса прокрутки -->
+          <div>
+            <div class="tw:flex tw:items-center tw:justify-between tw:mb-2">
+              <label class="tw:font-medium tw:text-gray-700">
+                Полоса прокрутки
+              </label>
+              <ToggleSwitch v-model="draft.data.scrollbar"/>
+            </div>
+            <small class="tw:block tw:text-sm tw:text-gray-500">
+              Показывать полосу прокрутки под слайдером для навигации между слайдами.
+            </small>
+          </div>
+
+          <!-- Расстояние между слайдами -->
+          <div>
+            <div class="tw:flex tw:items-center tw:justify-between tw:mb-2 tw:gap-4">
+              <label class="tw:font-medium tw:text-gray-700 tw:flex-shrink-0">
+                Расстояние между слайдами
+              </label>
+              <div class="tw:flex tw:items-center tw:gap-2 tw:flex-shrink-0">
+                <InputNumber
+                  v-model="draft.data.space_between"
+                  :min="0"
+                  :max="100"
+                  placeholder="30"
+                  :showButtons="true"
+                />
+                <span class="tw:text-gray-600 tw:whitespace-nowrap">px</span>
+              </div>
+            </div>
+            <small class="tw:block tw:text-sm tw:text-gray-500">
+              Расстояние между слайдами в пикселях. По умолчанию - 30.
+            </small>
+          </div>
+
+          <!-- Свободный режим -->
+          <div>
+            <div class="tw:flex tw:items-center tw:justify-between tw:mb-2">
+              <label class="tw:font-medium tw:text-gray-700">
+                Свободный режим
+              </label>
+              <ToggleSwitch v-model="draft.data.free_mode"/>
+            </div>
+            <small class="tw:block tw:text-sm tw:text-gray-500">
+              Позволяет свободно прокручивать слайды без привязки к конкретным позициям.
+            </small>
+          </div>
+
+          <!-- Бесконечная прокрутка -->
+          <div>
+            <div class="tw:flex tw:items-center tw:justify-between tw:mb-2">
+              <label class="tw:font-medium tw:text-gray-700">
+                Бесконечная прокрутка
+              </label>
+              <ToggleSwitch v-model="draft.data.loop"/>
+            </div>
+            <small class="tw:block tw:text-sm tw:text-gray-500">
+              Включите этот режим, чтобы после последнего слайда слайдер продолжал прокрутку с
+              первого, создавая бесконечный цикл.
+            </small>
+          </div>
+
+          <!-- Автоматическая прокрутка -->
+          <div>
+            <div class="tw:flex tw:items-center tw:justify-between tw:mb-2">
+              <label class="tw:font-medium tw:text-gray-700">
+                Автоматическая прокрутка
+              </label>
+              <ToggleSwitch v-model="draft.data.autoplay"/>
+            </div>
+            <small class="tw:block tw:text-sm tw:text-gray-500">
+              Слайдер будет автоматически листать изображения каждые 3 секунды.
+            </small>
+          </div>
+        </div>
+      </Panel>
+
+      <!-- Слайды -->
+      <Panel header="Слайды">
+        <template #icons>
+          <Button
+            severity="success"
+            text
+            rounded
+            aria-label="Добавить слайд"
+            @click="addSlide"
+          >
+            <i class="fa fa-plus"></i> Добавить новый слайд
+          </Button>
+        </template>
+
+        <div v-if="draft.data.slides.length === 0" class="tw:text-center tw:py-8 tw:text-gray-500">
+          <i class="fa fa-image fa-3x tw:mb-4"></i>
+          <p class="tw:font-bold">Слайды не добавлены</p>
+          <Button
+            label="Добавить первый слайд"
+            severity="success"
+            outlined
+            class="tw:mt-4"
+            @click="addSlide"
+          >
+            <i class="fa fa-plus"></i>
+          </Button>
+        </div>
+
+        <div v-else class="tw:space-y-4">
+          <div
+            v-for="(slide, index) in draft.data.slides"
+            :key="index"
+            class="tw:bg-white tw:rounded-lg tw:border tw:border-gray-200 tw:p-4 tw:shadow-sm tw:relative"
+          >
+            <div class="tw:absolute tw:top-2 tw:right-2">
+              <Button
+                severity="danger"
+                text
+                rounded
+                aria-label="Удалить слайд"
+                @click="removeSlide($event, index)"
+
+              >
+                <i class="fa fa-trash tw:text-lg"></i>
+              </Button>
+            </div>
+
+            <div class="tw:flex">
+              <!-- Изображение -->
+              <div class="tw:mr-5">
+                <label class="tw:block tw:mb-2 tw:font-medium tw:text-gray-700">
+                  Изображение
+                </label>
+                <OcImagePicker v-model="slide.image"/>
+              </div>
+
+              <!-- Поля -->
+              <div class="tw:space-y-4">
+                <div>
+                  <label class="tw:block tw:mb-2 tw:font-medium tw:text-gray-700">
+                    Заголовок слайда
+                  </label>
+                  <InputText
+                    v-model="slide.title"
+                    placeholder="Введите заголовок слайда"
+                    class="tw:w-full"
+                  />
+                  <small class="tw:block tw:text-sm tw:text-gray-500">
+                    Заголовок слайда будет отправляться в цели Яндекс.Метрики
+                  </small>
+                </div>
+
+                <div>
+                  <label class="tw:block tw:mb-2 tw:font-medium tw:text-gray-700">
+                    Ссылка
+                  </label>
+                  <LinkSelector v-model="slide.link"/>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Panel>
+    </BaseForm>
+  </div>
+</template>
+
+<script setup>
+import {computed, defineExpose, onMounted, ref} from "vue";
+import OcImagePicker from "@/components/OcImagePicker.vue";
+import LinkSelector from "@/components/Slider/LinkSelector.vue";
+import {Button, Dropdown, InputNumber, InputText, Panel, ToggleSwitch, useConfirm} from 'primevue';
+import {sliderEffectOptions} from "@/utils/constants..js";
+import {md5} from "js-md5";
+import BaseForm from "@/components/MainPageConfigurator/Forms/BaseForm.vue";
+
+const confirm = useConfirm();
+
+const draft = ref(null);
+const slider = defineModel();
+
+const isChanged = computed(() => md5(JSON.stringify(slider.value)) !== md5(JSON.stringify(draft.value)));
+
+const effectOptionsList = computed(() => {
+  return Object.entries(sliderEffectOptions).map(([value, label]) => ({
+    value,
+    label,
+  }));
+});
+
+function removeSlide(event, index) {
+  confirm.require({
+    group: 'popup',
+    target: event.currentTarget,
+    message: 'Удалить слайд?',
+    icon: 'pi pi-exclamation-triangle',
+    rejectProps: {
+      label: 'Отмена',
+      severity: 'secondary',
+      outlined: true
+    },
+    acceptProps: {
+      label: 'Удалить',
+      severity: 'danger'
+    },
+    accept: () => draft.value.data.slides.splice(index, 1),
+  });
+}
+
+function addSlide() {
+  draft.value.data.slides.push({
+    title: '',
+    link: {
+      type: 'none',
+      value: null,
+    },
+    image: '',
+  });
+}
+
+function onApply() {
+  slider.value = JSON.parse(JSON.stringify(draft.value));
+}
+
+onMounted(() => {
+  draft.value = JSON.parse(JSON.stringify(slider.value));
+});
+
+defineExpose({isChanged});
+</script>
+
+<style scoped>
+</style>
--- a/frontend/admin/src/components/MainPageConfigurator/MainPageConfigurator.vue
+++ b/frontend/admin/src/components/MainPageConfigurator/MainPageConfigurator.vue
@@ -0,0 +1,195 @@
+<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>
+      <div class="tw:mb-6">Перетяните блок, чтобы добавить на главную страницу</div>
+
+      <draggable
+        v-model="availableBlocks"
+        :group="{ name: 'blocks', pull: 'clone', put: false }"
+        :clone="cloneBlock"
+        item-key="type"
+        class="tw:space-y-2"
+        chosenClass="tw:scale-98"
+      >
+        <template #item="{ element, index }">
+          <Card class="tw:cursor-move">
+            <template #title>
+              <i class="fa fa-arrows"></i>
+              {{ element.title }}
+            </template>
+            <template #content>
+              <p class="m-0">
+                {{ element.description }}
+              </p>
+            </template>
+          </Card>
+        </template>
+      </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>
+      <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]"
+        @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)"
+            />
+          </template>
+
+          <div v-else>неподдерживаемый блок</div>
+        </template>
+      </draggable>
+
+      <div
+        v-if="!hasBlocks"
+        class="tw:absolute tw:inset-0 tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-center tw:py-12 tw:px-4 tw:pointer-events-none"
+      >
+        <div class="tw:mb-6 tw:text-6xl tw:text-gray-400">
+          <i class="fa fa-inbox"></i>
+        </div>
+        <h3 class="tw:text-xl tw:font-semibold tw:text-gray-700 tw:mb-2">
+          Нет блоков на главной странице
+        </h3>
+        <p class="tw:text-gray-500 tw:max-w-md tw:mb-4">
+          Перетащите блок из левой панели, чтобы добавить его на главную страницу
+        </p>
+      </div>
+    </section>
+
+    <Drawer
+      :visible="isDrawerSettingsVisible"
+      @update:visible="closeDrawer"
+      :header="drawerTitle"
+      position="right"
+      :baseZIndex="1000"
+      class="tw:!w-full tw:md:!w-80 tw:lg:!w-[50rem]"
+    >
+      <template v-if="currentBlock && blockToFormMap[currentBlock.type]">
+        <component
+          :is="blockToFormMap[currentBlock.type]"
+          ref="currentBlockForm"
+          @cancel="closeDrawer"
+          :modelValue="settings.items.mainpage_blocks[drawerBlockIndex]"
+          @update:modelValue="updateBlockData"
+        />
+      </template>
+
+      <div v-else>Unsupported block type</div>
+    </Drawer>
+  </div>
+</template>
+
+<script setup>
+import draggable from 'vuedraggable';
+import {Card, Drawer, useConfirm} from 'primevue';
+import {computed, nextTick, ref} from "vue";
+import {useSettingsStore} from "@/stores/settings.js";
+import {
+  blocks,
+  blockToComponentMap,
+  blockToFormMap
+} from "@/components/MainPageConfigurator/availableBlocks.js";
+
+const settings = useSettingsStore();
+const confirm = useConfirm();
+const availableBlocks = ref(blocks);
+
+const isDrawerSettingsVisible = ref(null);
+const drawerBlockIndex = ref(null);
+const currentBlockForm = ref(null);
+
+const currentBlock = computed(() => {
+  if (drawerBlockIndex.value >= 0) {
+    return settings.items.mainpage_blocks[drawerBlockIndex.value];
+  }
+
+  return null;
+});
+
+const drawerTitle = computed(() => {
+  if (currentBlock.value) {
+    return `Редактирование ${currentBlock?.value?.type} - ${currentBlock?.value?.title || 'Без заголовка'}`;
+  }
+
+  return '';
+});
+
+const hasBlocks = computed(() => {
+  return settings.items.mainpage_blocks && settings.items.mainpage_blocks.length > 0;
+});
+
+function removeBlock(index) {
+  settings.items.mainpage_blocks.splice(index, 1);
+}
+
+function cloneBlock(block) {
+  const newBlock = JSON.parse(JSON.stringify(block));
+  newBlock.title = '';
+  newBlock.description = '';
+  return newBlock;
+}
+
+function showDrawer(blockIndex) {
+  if (currentBlock) {
+    drawerBlockIndex.value = blockIndex;
+    isDrawerSettingsVisible.value = true;
+  }
+}
+
+function closeDrawer() {
+  // Проверяем, есть ли несохраненные изменения
+  if (currentBlockForm.value?.isChanged === true) {
+    confirm.require({
+      message: 'У вас есть несохраненные изменения. Вы уверены, что хотите закрыть форму?',
+      header: 'Подтверждение закрытия',
+      icon: 'pi pi-exclamation-triangle',
+      rejectProps: {
+        label: 'Отмена',
+        severity: 'secondary',
+        outlined: true
+      },
+      acceptProps: {
+        label: 'Закрыть',
+        severity: 'danger'
+      },
+      accept: () => {
+        drawerBlockIndex.value = null;
+        isDrawerSettingsVisible.value = false;
+      }
+    });
+  } else {
+    drawerBlockIndex.value = null;
+    isDrawerSettingsVisible.value = false;
+  }
+}
+
+function onChange(update) {
+  if (update.added && update.added?.newIndex >= 0) {
+    showDrawer(update.added.newIndex);
+  }
+}
+
+function updateBlockData(newBlockData) {
+  if (drawerBlockIndex.value !== null && drawerBlockIndex.value >= 0) {
+    settings.items.mainpage_blocks.splice(drawerBlockIndex.value, 1, newBlockData);
+    nextTick(() => closeDrawer());
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/frontend/admin/src/components/MainPageConfigurator/availableBlocks.js
+++ b/frontend/admin/src/components/MainPageConfigurator/availableBlocks.js
@@ -0,0 +1,58 @@
+import SliderBlock from "@/components/MainPageConfigurator/Blocks/SliderBlock.vue";
+import CategoriesTopBlock from "@/components/MainPageConfigurator/Blocks/CategoriesTopBlock.vue";
+import SliderForm from "@/components/MainPageConfigurator/Forms/SliderForm.vue";
+import CategoriesTopForm from "@/components/MainPageConfigurator/Forms/CategoriesTopForm.vue";
+import ProductsFeedBlock from "@/components/MainPageConfigurator/Blocks/ProductsFeedBlock.vue";
+import ProductsFeedForm from "@/components/MainPageConfigurator/Forms/ProductsFeedForm.vue";
+
+export const blockToComponentMap = {
+  slider: SliderBlock,
+  categories_top: CategoriesTopBlock,
+  products_feed: ProductsFeedBlock,
+};
+
+export const blockToFormMap = {
+  slider: SliderForm,
+  categories_top: CategoriesTopForm,
+  products_feed: ProductsFeedForm,
+};
+
+export const blocks = [
+  {
+    type: 'slider',
+    title: 'Слайдер',
+    description: 'Изображения объединённые в слайдер.',
+    is_enabled: true,
+    goal_name: '',
+    data: {
+      effect: "slide",
+      pagination: true,
+      scrollbar: false,
+      free_mode: false,
+      space_between: 30,
+      autoplay: false,
+      loop: false,
+      slides: [],
+    },
+  },
+  {
+    type: 'categories_top',
+    title: 'Топ категорий',
+    description: 'Виджет с кнопками популярных категорий и кнопкой «Каталог» для всех категорий.',
+    is_enabled: true,
+    goal_name: '',
+    data: {
+      count: 10,
+    },
+  },
+  {
+    type: 'products_feed',
+    title: 'Лента товаров',
+    description: 'Отображает товары в виде прокручиваемой ленты с возможностью подгрузки новых элементов по мере скролла.',
+    is_enabled: true,
+    goal_name: '',
+    data: {
+      max_page_count: 10,
+    },
+  },
+];
--- a/frontend/admin/src/components/Slider/Slider.vue
+++ b/frontend/admin/src/components/Slider/Slider.vue
@@ -1,182 +0,0 @@
-<template>
-  <input type="hidden" name="module_tgshop_mainpage_slider" :value="JSON.stringify(slider)">
-  <div class="alert alert-info">
-    <p>Здесь настраивается слайдер, который выводится на главной странице.</p>
-    <p>Рекомендуемые размеры изображений: <span class="text-bold">370×200px</span>, <span
-      class="text-bold">740×400px</span>,
-      <span class="text-bold">1110×600px</span> либо другие, в тех же пропорциях (1.85:1)<br>
-      Изображение будет автоматически обрезана под нужный формат. <br>
-      Заголовок можно оставить пустым, но рекомендуется заполнить для корректной работы целей
-      Яндекс.Метрики.</p>
-  </div>
-
-  <section>
-    <SettingsItem label="Статус">
-      <template #default>
-        <Switcher v-model="slider.is_enabled"/>
-      </template>
-
-      <template #help>
-        Показывать слайдер на главной странице.
-        Для отображения слайдера нужно добавить минимум 1 слайд.
-      </template>
-    </SettingsItem>
-
-    <SettingsItem label="Эффект смены слайдов">
-      <template #default>
-        <select v-model="slider.effect" class="form-control">
-          <option value="slide">Слайд</option>
-          <option value="flip">Переворот</option>
-          <option value="cards">Карточки</option>
-          <option value="cube">Куб</option>
-          <option value="coverflow">Перекрывающиеся слайды</option>
-        </select>
-      </template>
-    </SettingsItem>
-
-    <SettingsItem label="Пагинация">
-      <template #default>
-        <Switcher v-model="slider.pagination"/>
-      </template>
-
-      <template #help>
-        Показывать точки под слайдером для индикации текущего слайда.
-      </template>
-    </SettingsItem>
-
-    <SettingsItem label="Полоса прокрутки">
-      <template #default>
-        <Switcher v-model="slider.scrollbar"/>
-      </template>
-
-      <template #help>
-        Показывать полосу прокрутки под слайдером для навигации между слайдами.
-      </template>
-    </SettingsItem>
-
-    <SettingsItem label="Расстояние между слайдами">
-      <template #default>
-        <div class="tw:max-w-2xl">
-          <div class="input-group">
-            <input
-              v-model="slider.space_between"
-              type="number"
-              min="0"
-              max="100"
-              class="form-control"
-              placeholder="30"
-            />
-            <span class="input-group-addon">px</span>
-          </div>
-        </div>
-      </template>
-
-      <template #help>
-        Расстояние между слайдами в пикселях. По умолчанию - 30.
-      </template>
-    </SettingsItem>
-
-    <SettingsItem label="Свободный режим">
-      <template #default>
-        <Switcher v-model="slider.free_mode"/>
-      </template>
-
-      <template #help>
-        Позволяет свободно прокручивать слайды без привязки к конкретным позициям.
-      </template>
-    </SettingsItem>
-
-    <SettingsItem label="Бесконечная прокрутка">
-      <template #default>
-        <Switcher v-model="slider.loop"/>
-      </template>
-
-      <template #help>
-        Включите этот режим, чтобы после последнего слайда слайдер продолжал прокрутку с первого, создавая бесконечный цикл.
-      </template>
-    </SettingsItem>
-
-    <SettingsItem label="Автоматическая прокрутка">
-      <template #default>
-        <Switcher v-model="slider.autoplay"/>
-      </template>
-
-      <template #help>
-        Слайдер будет автоматически листать изображения каждые 3 секунды
-      </template>
-    </SettingsItem>
-  </section>
-
-  <section>
-    <table class="table table-striped table-bordered table-hover">
-      <thead>
-      <tr>
-        <td class="text-left">Заголовок</td>
-        <td class="text-left">Ссылка</td>
-        <td class="text-center">Изображение</td>
-        <td>Действия</td>
-      </tr>
-      </thead>
-      <tbody>
-      <tr v-for="(slide, index) in slider.slides">
-        <td class="text-left">
-          <input v-model="slide.title" type="text" placeholder="Заголовок слайда"
-                 class="form-control"/>
-        </td>
-        <td class="text-left" style="width: 30%;">
-          <LinkSelector v-model="slide.link"/>
-        </td>
-        <td class="text-center">
-          <OcImagePicker v-model="slide.image"/>
-        </td>
-        <td class="text-left">
-          <button type="button" class="btn btn-danger" @click="removeSlide(index)">
-            <i class="fa fa-minus-circle"></i>
-          </button>
-        </td>
-      </tr>
-      </tbody>
-      <tfoot>
-      <tr>
-        <td colspan="3"></td>
-        <td class="text-left">
-          <button @click="addSlide" type="button" class="btn btn-primary">
-            <i class="fa fa-plus-circle"></i>
-          </button>
-        </td>
-      </tr>
-      </tfoot>
-    </table>
-  </section>
-</template>
-
-<script setup>
-import {onMounted, ref} from "vue";
-import OcImagePicker from "@/components/OcImagePicker.vue";
-import LinkSelector from "@/components/Slider/LinkSelector.vue";
-import SettingsItem from "@/components/SettingsItem.vue";
-import Switcher from "@/components/Switcher.vue";
-
-const slider = defineModel();
-
-function removeSlide(index) {
-  slider.value.slides.splice(index, 1);
-}
-
-function addSlide() {
-  slider.value.slides.push({
-    title: '',
-    link: {
-      type: 'none',
-      value: null,
-    },
-    image: '',
-  });
-}
-</script>
-
-<style scoped>
-.text-bold {
-  font-weight: bold;
-}
-</style>
--- a/frontend/admin/src/main.js
+++ b/frontend/admin/src/main.js
@@ -8,6 +8,8 @@ import PrimeVue from 'primevue/config';
 import Aura from '@primeuix/themes/aura';
 import ToastService from 'primevue/toastservice';
 import {definePreset} from "@primeuix/themes";
+import Tooltip from 'primevue/tooltip';
+import ConfirmationService from 'primevue/confirmationservice';

 const MyPreset = definePreset(Aura, {

@@ -34,6 +36,8 @@ onReady(async () => {
    }
  });
  app.use(ToastService);
+  app.directive('tooltip', Tooltip);
+  app.use(ConfirmationService);

  app.mount('#app');
  await useSettingsStore().fetchSettings();
--- a/frontend/admin/src/router/index.js
+++ b/frontend/admin/src/router/index.js
@@ -1,22 +1,22 @@
 import {createMemoryHistory, createRouter} from 'vue-router';
-import SliderView from "@/views/SliderView.vue";
 import GeneralView from "@/views/GeneralView.vue";
 import TextsView from "@/views/TextsView.vue";
 import OrdersView from "@/views/OrdersView.vue";
 import TelegramView from "@/views/TelegramView.vue";
 import MetricsView from "@/views/MetricsView.vue";
 import StoreView from "@/views/StoreView.vue";
+import MainPageView from "@/views/MainPageView.vue";

 const router = createRouter({
  history: createMemoryHistory(),
  routes: [
    {path: '/', name: 'general', component: GeneralView},
-    {path: '/slider', name: 'slider', component: SliderView},
    {path: '/orders', name: 'orders', component: OrdersView},
    {path: '/texts', name: 'texts', component: TextsView},
    {path: '/telegram', name: 'telegram', component: TelegramView},
    {path: '/metrics', name: 'metrics', component: MetricsView},
    {path: '/store', name: 'store', component: StoreView},
+    {path: '/mainpage', name: 'mainpage', component: MainPageView},
  ],
 });

--- a/frontend/admin/src/stores/settings.js
+++ b/frontend/admin/src/stores/settings.js
@@ -1,11 +1,13 @@
 import {defineStore} from "pinia";
 import {apiGet, apiPost} from "@/utils/http.js";
 import {toastBus} from "@/utils/toastHelper.js";
+import {md5} from "js-md5";

 export const useSettingsStore = defineStore('settings', {
  state: () => ({
    isLoading: false,
    error: null,
+    originalItemsHash: null,

    items: {
      app: {
@@ -32,10 +34,6 @@ export const useSettingsStore = defineStore('settings', {

      store: {
        enable_store: true,
-        mainpage_products: 'most_viewed',
-        featured_products: [],
-        mainpage_categories: 'latest10',
-        featured_categories: [],
        feature_coupons: true,
        feature_vouchers: true,
      },
@@ -63,6 +61,8 @@ export const useSettingsStore = defineStore('settings', {
          slides: [],
        },
      },
+
+      mainpage_blocks: [],
    },
  }),

@@ -74,6 +74,10 @@ export const useSettingsStore = defineStore('settings', {
      const filename = state.items.app.app_icon.substring(0, extIndex);
      return `/image/cache/${filename}-100x100${ext}`;
    },
+    hasUnsavedChanges: (state) => {
+      if (!state.originalItemsHash) return false;
+      return md5(JSON.stringify(state.items)) !== state.originalItemsHash;
+    },
  },

  actions: {
@@ -86,6 +90,8 @@ export const useSettingsStore = defineStore('settings', {
          ...this.items,
          ...response.data,
        };
+        // Сохраняем хеш исходного состояния после загрузки
+        this.originalItemsHash = md5(JSON.stringify(this.items));
      } else {
        this.error = 'Возникли проблемы при загрузке настроек.';
      }
@@ -104,6 +110,8 @@ export const useSettingsStore = defineStore('settings', {
          detail: 'Настройки сохранены.',
          life: 2000,
        });
+        // Обновляем хеш исходного состояния после успешного сохранения
+        this.originalItemsHash = md5(JSON.stringify(this.items));
      } else {
        toastBus.emit('show', {
          severity: 'error',
@@ -114,7 +122,6 @@ export const useSettingsStore = defineStore('settings', {
      }


-
      this.isLoading = false;
    },

--- a/frontend/admin/src/utils/constants..js
+++ b/frontend/admin/src/utils/constants..js
@@ -0,0 +1,7 @@
+export const sliderEffectOptions = {
+  slide: 'Слайд',
+  flip: 'Переворот',
+  cards: 'Карточки',
+  cube: 'Куб',
+  coverflow: 'Перекрывающиеся слайды',
+};
--- a/frontend/admin/src/utils/helpers.js
+++ b/frontend/admin/src/utils/helpers.js
@@ -0,0 +1,7 @@
+export function getThumb(imageUrl) {
+  if (!imageUrl) return '/image/cache/no_image-100x100.png';
+  const extIndex = imageUrl.lastIndexOf('.');
+  const ext = imageUrl.substring(extIndex);
+  const filename = imageUrl.substring(0, extIndex);
+  return `/image/cache/${filename}-100x100${ext}`;
+}
--- a/frontend/admin/src/views/MainPageView.vue
+++ b/frontend/admin/src/views/MainPageView.vue
@@ -0,0 +1,7 @@
+<template>
+  <MainPageConfigurator/>
+</template>
+
+<script setup>
+import MainPageConfigurator from "@/components/MainPageConfigurator/MainPageConfigurator.vue";
+</script>
--- a/frontend/admin/src/views/SliderView.vue
+++ b/frontend/admin/src/views/SliderView.vue
@@ -1,10 +0,0 @@
-<template>
-  <Slider v-model="settings.items.sliders.mainpage_slider"/>
-</template>
-
-<script setup>
-import Slider from "@/components/Slider/Slider.vue";
-import {useSettingsStore} from "@/stores/settings.js";
-
-const settings = useSettingsStore();
-</script>
--- a/frontend/admin/src/views/StoreView.vue
+++ b/frontend/admin/src/views/StoreView.vue
@@ -7,40 +7,6 @@
      вашем сайте. В этом режиме Telecart работает как каталог.</p>
  </ItemBool>

-  <ItemSelect
-    label="Товары на главной"
-    v-model="settings.items.store.mainpage_products"
-    :items="mainpage_products_options"
-  >
-    Выберите, какие товары показывать на главной странице магазина в Telegram.
-    Это влияет на первую видимую секцию каталога для пользователя.
-  </ItemSelect>
-
-  <ItemProductsSelect
-    label="Избранные товары"
-    v-model="settings.items.store.featured_products"
-  >
-    На главной странице будут отображаться избранные товары, если вы выберете этот вариант в
-    настройке “Товары на главной”. Если товары не выбраны, то будут показаны популярные товары.
-  </ItemProductsSelect>
-
-  <ItemSelect
-    label="Категории на главной"
-    v-model="settings.items.store.mainpage_categories"
-    :items="mainpage_categories_options"
-  >
-    Выберите, какие товары показывать на главной странице магазина в Telegram.
-    Это влияет на первую видимую секцию каталога для пользователя.
-  </ItemSelect>
-
-  <ItemCategoriesSelect
-    label="Избранные категории"
-    v-model="settings.items.store.featured_categories"
-  >
-    На главной странице будут отображаться эти категории,
-    если вы выберете этот вариант в настройке “Категории на главной”.
-  </ItemCategoriesSelect>
-
  <ItemBool label="Промокоды" v-model="settings.items.store.feature_coupons">
    <p>
      Позволяет использовать стандартные
@@ -65,11 +31,7 @@ import ItemProductsSelect from "@/components/Settings/ItemProductsSelect.vue";
 import ItemCategoriesSelect from "@/components/Settings/ItemCategoriesSelect.vue";

 const settings = useSettingsStore();
-const mainpage_products_options = {
-  most_viewed: 'Популярные товары',
-  latest: 'Последние сверху',
-  featured: 'Избранные товары (задать в поле ниже)',
-};
+
 const mainpage_categories_options = {
  no_categories: 'Отображать только кнопку "Каталог"',
  latest10: 'Последние 10 категорий',