links/docs/COVER_OVERLAY_TESTING.md

Тестирование функциональности Cover Overlay

Функциональность Cover Overlay

Мы добавили новую функциональность для перекрытия обложки пользователя цветным слоем с настраиваемой прозрачностью.

Backend изменения

1. Модель DesignSettings (customization/models.py):

   • cover_overlay_enabled - Boolean поле для включения/отключения
   • cover_overlay_color - Hex цвет перекрытия (например #000000)
   • cover_overlay_opacity - Float значение прозрачности от 0.0 до 1.0

2. Сериализатор (customization/serializers.py):

   • Валидация hex цвета
   • Валидация диапазона прозрачности

3. API (api/views.py):

   • Поддержка новых полей в публичном API

Frontend изменения

1. Интерфейсы TypeScript:

   • Обновлены DesignSettings интерфейсы в DashboardClient.tsx
   • Обновлены PublicDesignSettings в [username]/page.tsx
   • Обновлены интерфейсы в CustomizationPanel.tsx

2. Панель кастомизации (CustomizationPanel.tsx):

   • Checkbox для включения/отключения overlay
   • Color picker для выбора цвета
   • Range slider для настройки прозрачности
   • Live preview перекрытия

3. Публичная страница ([username]/page.tsx):

   • Отображение cover overlay поверх обложки пользователя

Как протестировать

1. Доступ к панели администрирования

http://localhost:3000/auth/login

2. Настройка Cover Overlay

1. Войдите в систему
2. Перейдите в Dashboard
3. Откройте панель кастомизации (кнопка настроек)
4. Найдите секцию "Перекрытие обложки"
5. Включите checkbox "Включить цветовое перекрытие обложки"
6. Выберите цвет (по умолчанию черный #000000)
7. Настройте прозрачность ползунком (по умолчанию 30%)
8. Проверьте preview внизу секции
9. Сохраните настройки

3. Проверка на публичной странице

1. Убедитесь что у пользователя загружена обложка (cover image)
2. Перейдите на публичную страницу: http://localhost:3000/[username]
3. Если cover overlay включен, вы увидите цветное перекрытие поверх обложки

API Endpoints

Получение настроек дизайна (приватное)

GET http://localhost:8000/api/customization/settings/
Authorization: Bearer <token>

Обновление настроек дизайна

PUT http://localhost:8000/api/customization/settings/
Authorization: Bearer <token>
Content-Type: application/json

{
  "cover_overlay_enabled": true,
  "cover_overlay_color": "#FF5733",
  "cover_overlay_opacity": 0.5
}

Публичное API для страницы пользователя

GET http://localhost:8000/api/public/[username]/

Ответ включает поля:

{
  "design_settings": {
    "cover_overlay_enabled": true,
    "cover_overlay_color": "#FF5733", 
    "cover_overlay_opacity": 0.5
  }
}

Возможные проблемы

1. Overlay не отображается: Проверьте что cover_overlay_enabled true в API
2. Неправильный цвет: Убедитесь что цвет в hex формате (#RRGGBB)
3. Overlay слишком яркий/темный: Настройте opacity (от 0.0 до 1.0)

Технические детали

• Cover overlay реализован как абсолютно позиционированный div поверх изображения
• CSS pointer-events: none предотвращает блокировку кликов
• Используется rgba() с opacity для плавности переходов
• Preview в админке показывает шахматный фон для демонстрации прозрачности