agent-ecosystem/landing/docs/iterations/ITERATION_03_SWIPER_AND_DOWNLOAD.md
iliya e6e89d4ebc fix(tests): improve messageId generation for legacy inbox rows
- Enhanced tests to ensure consistent messageId generation for legacy inbox rows lacking a messageId.
- Updated test descriptions for better clarity regarding the new messageId handling.
- Adjusted test expectations to align with the updated behavior of relaying legacy inbox rows with generated messageIds.
2026-03-23 16:31:37 +02:00

4.3 KiB
Raw Blame History

Итерация 03 — Swiper карусель + Download UX (OS + macOS arch)

Цель

Сделать две “ключевые” UX части максимально качественно: карусель скриншотов и умный блок скачивания.

Часть A: Screenshots (Swiper)

Требования

  • Swiper Vue (https://swiperjs.com/vue)
  • Desktop: на экране одновременно видно несколько скринов.
  • Mobile: 1 скрин, свайп, pagination.

План реализации

  • Компонент ScreenshotCarousel.vue:
    • breakpoints для slidesPerView (примерно: 1 / 2 / 3 / 4 в зависимости от ширины)
    • spaceBetween, grabCursor, keyboard, a11y
    • lazy для изображений (если уместно)
  • landing/data/screenshots.ts: массив скринов, подписи, alt-тексты, темы (dark/light)

Критерии готовности

  • Desktop показывает 24 скрина одновременно.
  • Навигация доступна клавиатурой.
  • Alt тексты корректны.
  • Изображения не “раздувают” страницу: есть ограничение по размерам, понятные форматы, нет тяжёлых файлов “на авось”.

Часть B: Download Section (OS + macOS arch)

Требования

  • Определяем ОС.
  • Если неизвестно — показываем все.
  • macOS: учитываем Apple Silicon vs Intel:
    • если детект уверенный — автоселект
    • если нет — выбор пользователю

План реализации

  • landing/utils/platform.ts: чистые функции:
    • parse platform (mac/windows/linux/unknown)
    • parse arch (arm64/x64/unknown) через userAgentData где доступно
    • важно: не “угадывать” там, где точности нет — лучше показать выбор и запомнить решение пользователя
  • landing/stores/downloadStore.ts:
    • хранит platform, arch, preferredMacArch (если пользователь выбрал), selectedAsset
    • умеет fallback-логики и приоритеты отображения
  • landing/data/downloads.ts:
    • описывает доступные артефакты (os, arch, extension, url, label)

Контракт UI/данных (чтобы потом не разъезжалось)

  • В downloads.ts у каждого ассета есть:
    • os: macos | windows | linux
    • arch: arm64 | x64 | universal | unknown
    • variant: например dmg | zip | exe | msi | appimage | deb | rpm (что реально есть)
    • url, labelKey (i18n), опционально sha256, sizeBytes
  • Блок download умеет:
    • показывать “рекомендованный” вариант сверху (если уверенно определили)
    • всегда давать способ выбрать альтернативу (особенно для macOS)
    • сохранять выбор пользователя (локально)

Критерии готовности

  • Для “unknown” показывается полный список ОС.
  • Для macOS всегда понятен выбор: Silicon/Intel.
  • Выбор пользователя запоминается.
  • Логика выбора ассета покрыта тестами на основные кейсы (хотя бы таблица кейсов).
  • Все ссылки валидны (нет 404 в конфиге), плюс есть быстрый способ проверить это локально.

Чеклист перепроверки (несколько проходов)

  • Проверка на macOS Safari/Chrome, Windows, Linux (эмуляция user agent).
  • A11y: keyboard, screen reader labels.
  • Логика не завязана на Nuxt в utils/.
  • Если userAgentData недоступен, UX остаётся понятным (никакой “магии”, только явный выбор).