feat: add options to select aspect ratio and cron algo for product images

2025-12-08 21:25:00 +03:00
parent bf674473e9
commit e9c6ed8ddf
19 changed files with 98 additions and 188 deletions
--- a/frontend/admin/src/components/MainPageConfigurator/Blocks/BaseBlock.vue
+++ b/frontend/admin/src/components/MainPageConfigurator/Blocks/BaseBlock.vue
@@ -61,7 +61,3 @@ function confirmedRemove(event) {
  });
 }
 </script>
-
-<style scoped lang="scss">
-
-</style>
--- a/frontend/admin/src/components/MainPageConfigurator/Blocks/ProductsFeedBlock.vue
+++ b/frontend/admin/src/components/MainPageConfigurator/Blocks/ProductsFeedBlock.vue
@@ -13,10 +13,6 @@
        <span class="tw:font-bold tw:dark:text-slate-200">Максимальное кол-во страниц:</span>
        {{ value.data.max_page_count }}
      </div>
-      <div>
-        <span class="tw:font-bold tw:dark:text-slate-200">Соотношение сторон:</span>
-        {{ value.data.image_aspect_ratio || '1:1' }}
-      </div>
    </div>
  </BaseBlock>
 </template>
--- a/frontend/admin/src/components/MainPageConfigurator/Forms/ProductsCarouselForm.vue
+++ b/frontend/admin/src/components/MainPageConfigurator/Forms/ProductsCarouselForm.vue
@@ -37,18 +37,6 @@
                </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>

@@ -149,30 +137,13 @@ 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 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));
+  return md5(JSON.stringify(model.value)) !== md5(JSON.stringify(draft.value));
 });

 // Инициализация carousel, если его нет (только для записи)
--- a/frontend/admin/src/components/MainPageConfigurator/Forms/ProductsFeedForm.vue
+++ b/frontend/admin/src/components/MainPageConfigurator/Forms/ProductsFeedForm.vue
@@ -26,15 +26,6 @@
            Ограничение страниц снижает нагрузку на сервер.
          </template>
        </FormItem>
-
-        <FormItem label="Соотношение сторон">
-          <template #default>
-            <AspectRatioSelect v-model="draft.data.image_aspect_ratio"/>
-          </template>
-          <template #help>
-            Выберите соотношение сторон для изображений товаров.
-          </template>
-        </FormItem>
      </div>
    </BaseForm>
  </div>
@@ -46,7 +37,6 @@ 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";
-import AspectRatioSelect from "@/components/MainPageConfigurator/Forms/AspectRatioSelect.vue";

 const draft = ref(null);
 const model = defineModel();
@@ -72,7 +62,6 @@ onMounted(() => {
  draft.value = JSON.parse(JSON.stringify(model.value));
  if (draft.value.data) {
    if (draft.value.data.max_page_count) draft.value.data.max_page_count = parseInt(draft.value.data.max_page_count);
-    if (!draft.value.data.image_aspect_ratio) draft.value.data.image_aspect_ratio = '1:1';
  }
 });

--- a/frontend/admin/src/components/MainPageConfigurator/availableBlocks.js
+++ b/frontend/admin/src/components/MainPageConfigurator/availableBlocks.js
@@ -58,7 +58,6 @@ export const blocks = [
    goal_name: '',
    data: {
      max_page_count: 10,
-      image_aspect_ratio: '1:1',
    },
  },
  {
@@ -70,7 +69,6 @@ export const blocks = [
    data: {
      category_id: null,
      all_text: null,
-      image_aspect_ratio: '1:1',
      carousel: {
        slides_per_view: null,
        space_between: null,
--- a/frontend/admin/src/stores/settings.js
+++ b/frontend/admin/src/stores/settings.js
@@ -18,6 +18,8 @@ export const useSettingsStore = defineStore('settings', {
        theme_dark: 'dark',
        app_debug: false,
        privacy_policy_link: null,
+        image_aspect_ratio: '1:1',
+        image_crop_algorithm: 'cover',
      },

      telegram: {
--- a/frontend/admin/src/views/GeneralView.vue
+++ b/frontend/admin/src/views/GeneralView.vue
@@ -49,6 +49,19 @@
    Режим разработчика. Рекомендуется включать только по необходимости.
    В остальных случаях, для нормальной работы магазина, должен быть выключен.
  </ItemBool>
+
+  <ItemSelect label="Соотношение сторон" v-model="settings.items.app.image_aspect_ratio" :items="aspectRatioOptions">
+    Выберите соотношение сторон для изображений товаров. Это глобальная настройка, которая будет применяться ко всем изображениям в списках товаров: карусель товаров, лента товаров, результаты поиска.
+  </ItemSelect>
+
+  <ItemSelect label="Алгоритм обрезки" v-model="settings.items.app.image_crop_algorithm" :items="cropAlgorithmOptions">
+    Выберите алгоритм обрезки изображений. Эта настройка применяется глобально ко всем изображениям в списках товаров (карусель товаров, лента товаров, результаты поиска):
+    <ul class="tw:list-disc tw:ml-5 tw:mt-2">
+      <li><strong>Cover</strong> - обрезает изображение, сохраняя пропорции, чтобы заполнить весь размер (может обрезать края)</li>
+      <li><strong>Contain</strong> - вписывает изображение в размер, сохраняя пропорции (может добавить пустые поля)</li>
+      <li><strong>Resize</strong> - изменяет размер изображения с сохранением пропорций (без обрезки)</li>
+    </ul>
+  </ItemSelect>
 </template>

 <script setup>
@@ -60,6 +73,19 @@ import ItemInput from "@/components/Settings/ItemInput.vue";

 const settings = useSettingsStore();
 const themes = JSON.parse(window.TeleCart.themes);
+
+const aspectRatioOptions = {
+  '1:1': '1:1 - Квадрат (универсально, аксессуары, мелкие товары)',
+  '4:5': '4:5 - Вертикальное (одежда, обувь, вертикальные товары)',
+  '3:4': '3:4 - Вертикальное (одежда, обувь, вертикальные товары)',
+  '2:3': '2:3 - Высокое вертикальное (цветы, высокие предметы)',
+};
+
+const cropAlgorithmOptions = {
+  'cover': 'Cover - Обрезать с сохранением пропорций',
+  'contain': 'Contain - Вписать с сохранением пропорций',
+  'resize': 'Resize - Изменить размер с сохранением пропорций',
+};
 </script>

 <style scoped>
--- a/frontend/spa/src/components/MainPage/Blocks/ProductsFeedBlock.vue
+++ b/frontend/spa/src/components/MainPage/Blocks/ProductsFeedBlock.vue
@@ -51,7 +51,6 @@ async function fetchProducts() {
      maxPages: props.block.data.max_page_count,
      perPage: perPage,
      filters: filtersStore.applied,
-      image_aspect_ratio: props.block.data.image_aspect_ratio,
    }));
    products.value = response.data;
    hasMore.value = response.meta.hasMore;
@@ -94,7 +93,6 @@ async function onLoadMore() {
      perPage: perPage,
      maxPages: props.block.data.max_page_count,
      filters: filtersStore.applied,
-      image_aspect_ratio: props.block.data.image_aspect_ratio,
    }));
    products.value.push(...response.data);
    hasMore.value = response.meta.hasMore;
--- a/frontend/spa/src/components/ProductsList.vue
+++ b/frontend/spa/src/components/ProductsList.vue
@@ -5,7 +5,7 @@

      <template v-if="products.length > 0">
        <div
-            class="products-grid grid grid-cols-2 gap-x-4 gap-y-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8"
+            class="products-grid grid grid-cols-2 gap-x-2 gap-y-2"
        >
          <RouterLink
              v-for="(product, index) in products"
@@ -31,7 +31,7 @@
      </template>

      <div v-else-if="isLoading === true"
-           class="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
+           class="grid grid-cols-2 gap-x-6 gap-y-10">
        <div v-for="n in 8" :key="n" class="animate-pulse space-y-2">
          <div class="aspect-square bg-gray-200 rounded-md"></div>
          <div class="h-4 bg-gray-200 rounded w-3/4"></div>
--- a/frontend/spa/src/stores/SettingsStore.js
+++ b/frontend/spa/src/stores/SettingsStore.js
@@ -8,11 +8,6 @@ export const useSettingsStore = defineStore('settings', {
        store_enabled: true,
        app_name: 'OpenCart Telegram магазин',
        app_icon: '',
-        app_icon192: '',
-        app_icon180: '',
-        app_icon152: '',
-        app_icon120: '',
-        manifest_url: null,
        night_auto: true,
        ya_metrika_enabled: false,
        feature_coupons: false,
@@ -31,19 +26,15 @@ export const useSettingsStore = defineStore('settings', {
        mainpage_blocks: [],
        is_privacy_consented: true,
        privacy_policy_link: false,
+        image_aspect_ratio: '1:1',
    }),

    actions: {
        async load() {
            console.log('Load settings');
            const settings = await fetchSettings();
-            this.manifest_url = settings.manifest_url;
            this.app_name = settings.app_name;
            this.app_icon = settings.app_icon;
-            this.app_icon192 = settings.app_icon192;
-            this.app_icon180 = settings.app_icon180;
-            this.app_icon152 = settings.app_icon152;
-            this.app_icon120 = settings.app_icon120;
            this.theme.light = settings.theme_light;
            this.theme.dark = settings.theme_dark;
            this.ya_metrika_enabled = settings.ya_metrika_enabled;
@@ -56,6 +47,7 @@ export const useSettingsStore = defineStore('settings', {
            this.texts = settings.texts;
            this.mainpage_blocks = settings.mainpage_blocks;
            this.privacy_policy_link = settings.privacy_policy_link;
+            this.image_aspect_ratio = settings.image_aspect_ratio;
        }
    }
 });
--- a/frontend/spa/src/utils/AppMetaInitializer.ts
+++ b/frontend/spa/src/utils/AppMetaInitializer.ts
@@ -16,13 +16,6 @@ class AppMetaInitializer {
        this.setMeta('theme-color', '#000000');
        this.setMeta('msapplication-navbutton-color', '#000000');
        this.setMeta('apple-mobile-web-app-status-bar-style', 'black-translucent');
-        this.addLink('manifest', this.settings.manifest_url);
-
-        this.addLink('icon', this.settings.app_icon192, '192x192');
-        this.addLink('apple-touch-icon', this.settings.app_icon192);
-        this.addLink('apple-touch-icon', this.settings.app_icon180, '180x180');
-        this.addLink('apple-touch-icon', this.settings.app_icon152, '152x152');
-        this.addLink('apple-touch-icon', this.settings.app_icon120, '120x120');
    }

    private setMeta(name: string, content: string) {
--- a/frontend/spa/tests/unit/utils/AppMetaInitializer.test.ts
+++ b/frontend/spa/tests/unit/utils/AppMetaInitializer.test.ts
@@ -14,11 +14,6 @@ describe('AppMetaInitializer', () => {
    
    const settings = {
      app_name: 'Test App',
-      manifest_url: '/manifest.json',
-      app_icon192: '/icon192.png',
-      app_icon180: '/icon180.png',
-      app_icon152: '/icon152.png',
-      app_icon120: '/icon120.png',
    };

    metaInitializer = new AppMetaInitializer(settings);
@@ -43,14 +38,6 @@ describe('AppMetaInitializer', () => {
    expect(appNameMeta?.getAttribute('content')).toBe('Test App');
  });

-  it('должен создавать link теги для иконок', () => {
-    metaInitializer.init();
-    
-    const iconLink = document.querySelector('link[rel="icon"]');
-    expect(iconLink).not.toBeNull();
-    expect(iconLink?.getAttribute('href')).toBe('/icon192.png');
-  });
-
  it('должен создавать apple-touch-icon теги', () => {
    metaInitializer.init();