Andrey K. Choi
2e535513b5
+ Наведен порядок в файлах проекта + Наведен порядок в документации + Настроены скрипты установки, развертки и так далее, расширен MakeFile
108 lines
4.5 KiB
Markdown
108 lines
4.5 KiB
Markdown
# Тестирование функциональности 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]/
|
||
```
|
||
|
||
Ответ включает поля:
|
||
```json
|
||
{
|
||
"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 в админке показывает шахматный фон для демонстрации прозрачности |