331 lines
17 KiB
Markdown
331 lines
17 KiB
Markdown
# Функциональный план (Product & UX Roadmap)
|
||
|
||
## Twitch Panels Creator
|
||
|
||
**Анализ версии:** 0.0.1
|
||
**Дата анализа:** 2025-02-09
|
||
**Технологии:** Svelte 5, TypeScript, Konva.js, Cropper.js
|
||
|
||
---
|
||
|
||
## 1. Текущие возможности (глазами пользователя)
|
||
|
||
### ✅ Реализованный функционал
|
||
|
||
#### 1.1 Управление текстами панелей
|
||
|
||
**Файлы:** [`src/states/texts.svelte.ts`](src/states/texts.svelte.ts), [`src/components/text/TextManager.svelte`](src/components/text/TextManager.svelte), [`src/components/text/TextConfig.svelte`](src/components/text/TextConfig.svelte)
|
||
|
||
- Добавление текстовых панелей через инпут + кнопку/Enter
|
||
- Редактирование текста инлайн (двойной клик или прямое редактирование)
|
||
- Удаление отдельных текстов
|
||
- Глобальные настройки текста (размер, шрифт, цвет, выравнивание, отступы, смещение)
|
||
- **Приоритет:** High - это основной рабочий поток
|
||
|
||
#### 1.2 Система превью панелей
|
||
|
||
**Файлы:** [`src/components/panel/PreviewManager.svelte`](src/components/panel/PreviewManager.svelte), [`src/components/panel/Preview.svelte`](src/components/panel/Preview.svelte), [`src/components/panel/PreviewAll.svelte`](src/components/panel/PreviewAll.svelte)
|
||
|
||
- Просмотр превью текущей панели с настройками текста
|
||
- Навигация между панелями (стрелки + индикатор "N / M")
|
||
- Просмотр всех панелей одновременно (в скрытом контейнере для экспорта)
|
||
- Плавные переходы между панелями (fly transition)
|
||
- **Приоритет:** High - критично для UX
|
||
|
||
#### 1.3 Экспорт панелей
|
||
|
||
**Файлы:** [`src/services/downloadService.ts`](src/services/downloadService.ts)
|
||
|
||
- Экспорт отдельной панели в PNG (320x100px)
|
||
- Массовый экспорт всех панелей в ZIP-архив
|
||
- Использование file-saver и JSZip
|
||
- **Приоритет:** High - финальная цель пользователя
|
||
|
||
#### 1.4 Система фоновых изображений (частичная)
|
||
|
||
**Файлы:** [`src/states/imageConfig.svelte.ts`](src/states/imageConfig.svelte.ts), [`src/components/image/ImageManager.svelte`](src/components/image/ImageManager.svelte), [`src/components/image/CropInline.svelte`](src/components/image/CropInline.svelte)
|
||
|
||
- Загрузка изображения по URL (только UI кнопки)
|
||
- Визуальный интерфейс для обрезки (crop box с handles)
|
||
- Настройки яркости и контраста (только UI слайдеры)
|
||
- Автозагрузка дефолтного фона при старте
|
||
- **Приоритет:** Low - нерабочая система
|
||
|
||
#### 1.5 Базовый UI/UX
|
||
|
||
**Файлы:** [`src/components/layout/Card.svelte`](src/components/layout/Card.svelte), [`src/components/ui/Button.svelte`](src/components/ui/Button.svelte), [`src/components/ui/RangeSlider.svelte`](src/components/ui/RangeSlider.svelte), [`src/components/ui/ColorPicker.svelte`](src/components/ui/ColorPicker.svelte), [`src/components/ui/SelectFont.svelte`](src/components/ui/SelectFont.svelte), [`src/components/ui/Alignment.svelte`](src/components/ui/Alignment.svelte)
|
||
|
||
- Карточная система группировки
|
||
- Кнопки 5 типов (primary, secondary, outline, danger, mini)
|
||
- Слайдеры с отображением значения
|
||
- Цветовой пикер
|
||
- Выбор шрифта из 8 системных
|
||
- Три кнопки выравнивания
|
||
- Темная/светлая тема
|
||
- **Приоритет:** Medium - работает, но можно улучшить
|
||
|
||
---
|
||
|
||
## 2. Low-hanging fruit (Ближайшие улучшения)
|
||
|
||
### 2.1 Завершение системы изображений (High Priority)
|
||
|
||
**Проблема:** [`src/components/image/ImageManager.svelte`](src/components/image/ImageManager.svelte) имеет UI, но нет логики загрузки/обработки.
|
||
|
||
**Требуемые правки:**
|
||
|
||
1. **Реализовать загрузку изображений** в [`src/services/imageService.ts`](src/services/imageService.ts):
|
||
- Drag & drop поддержка
|
||
- Paste из буфера обмена
|
||
- Загрузка по URL с валидацией
|
||
- Валидация форматов (JPEG, PNG, WebP, GIF) и размера (10MB max)
|
||
- **Контракт:** `imageService.uploadImage(source: File | string): Promise<ImageConfig>`
|
||
|
||
2. **Интегрировать cropperjs** в [`src/components/image/CropInline.svelte`](src/components/image/CropInline.svelte):
|
||
- Инициализация cropper.js на canvas
|
||
- Привязка crop box к данным состояния
|
||
- Реализовать drag & drop для перемещения
|
||
- Реализовать resize через 8 handles
|
||
- **Контракт:** `onCropChange(crop: { left, top, right, bottom })`
|
||
|
||
3. **Применить фильтры яркости/контраста**:
|
||
- В [`src/states/imageConfig.svelte.ts`](src/states/imageConfig.svelte.ts) добавить `brightness: number`, `contrast: number`
|
||
- Применить CSS filters к Konva Image в [`src/components/panel/Preview.svelte`](src/components/panel/Preview.svelte)
|
||
- **Контракт:** `filter: brightness(${brightness}%) contrast(${contrast}%)`
|
||
|
||
4. **Сохранить обрезанное изображение**:
|
||
- Метод `imageConfigState.applyCrop()` должен обновлять `image` с обрезанными данными
|
||
- Использовать canvas для actual cropping
|
||
|
||
### 2.2 Валидация и состояния загрузки (Medium Priority)
|
||
|
||
**Тексты:**
|
||
|
||
- [`src/components/text/TextInput.svelte`](src/components/text/TextInput.svelte): добавить валидацию длины (max 100 chars из [`src/lib/constants.ts`](src/lib/constants.ts):32)
|
||
- Показать ошибку при превышении длины
|
||
- Добавить счетчик символов "3/100"
|
||
|
||
**Изображения:**
|
||
|
||
- [`src/components/image/ImageManager.svelte`](src/components/image/ImageManager.svelte): показать состояние загрузки (spinner) при загрузке по URL
|
||
- Показать ошибку при неудачной загрузке
|
||
- Валидация формата/размера до загрузки
|
||
|
||
**Экспорт:**
|
||
|
||
- [`src/services/downloadService.ts`](src/services/downloadService.ts): показать прогресс-бар при `downloadAll()`
|
||
- Отключить кнопки во время экспорта
|
||
- Показать toast уведомление об успехе/ошибке
|
||
|
||
### 2.3 Пустые состояния (Medium Priority)
|
||
|
||
**Списки:**
|
||
|
||
- [`src/components/text/TextManager.svelte`](src/components/text/TextManager.svelte): когда `textsState.texts.length === 0`, показать красивый empty state вместо пустого UL
|
||
- [`src/components/panel/PreviewManager.svelte`](src/components/panel/PreviewManager.svelte): уже есть empty state, но можно улучшить (иконка + текст + CTA)
|
||
|
||
**Изображение:**
|
||
|
||
- [`src/components/image/ImageManager.svelte`](src/components/image/ImageManager.svelte): когда нет изображения, показать placeholder с инструкцией
|
||
|
||
### 2.4 Улучшение доступности (Medium Priority)
|
||
|
||
**Файлы для правок:**
|
||
|
||
- Все кнопки уже имеют `aria-label` ✅
|
||
- [`src/components/text/TextInput.svelte`](src/components/text/TextInput.svelte): добавить `aria-describedby` для валидации
|
||
- [`src/components/text/TextInlineEdit.svelte`](src/components/text/TextInlineEdit.svelte): добавить `aria-label` на delete button (уже есть)
|
||
- Добавить `role="region"` и `aria-label` на карточки
|
||
- Убедиться, что фокусный порядок логичен (Tab navigation)
|
||
|
||
---
|
||
|
||
## 3. Масштабирование (Крупные модули/интеграции)
|
||
|
||
### 3.1 Сохранение и загрузка проектов (High Priority)
|
||
|
||
**Проблема:** Нет persistence, пользователь теряет данные при перезагрузке.
|
||
|
||
**Решение:**
|
||
|
||
1. **Создать [`src/services/storageService.ts`](src/services/storageService.ts):**
|
||
- `saveProject(project: Project): Promise<void>` → localStorage
|
||
- `loadProject(id: string): Project | null`
|
||
- `listProjects(): ProjectInfo[]`
|
||
- `deleteProject(id: string)`
|
||
- **Project тип:** `{ id, name, createdAt, texts, imageConfig, textConfig }`
|
||
|
||
2. **Добавить UI для управления проектами:**
|
||
- [`src/components/layout/AppHeader.svelte`](src/components/layout/AppHeader.svelte): добавить кнопку "Проекты" → открывает модалку
|
||
- [`src/components/project/ProjectManager.svelte`](src/components/project/ProjectManager.svelte) (новый):
|
||
- Список сохраненных проектов
|
||
- Создание/переименование/удаление
|
||
- Экспорт/импорт JSON (для бэкапа)
|
||
|
||
3. **Автосохранение:**
|
||
- В [`src/routes/+layout.svelte`](src/routes/+layout.svelte): `$effect` на изменениях состояний → debounced save
|
||
- Восстановление при загрузке страницы
|
||
|
||
**User Retention impact:** Высокий - пользователи смогут возвращаться к своим работам.
|
||
|
||
### 3.2 Расширенные настройки текста (Medium Priority)
|
||
|
||
**Файлы для модификации:** [`src/states/textConfig.svelte.ts`](src/states/textConfig.svelte.ts), [`src/components/text/TextConfig.svelte`](src/components/text/TextConfig.svelte)
|
||
|
||
Добавить:
|
||
|
||
- **Тень текста:** `textShadow: { offsetX, offsetY, blur, color }`
|
||
- **Прозрачность:** `opacity: number` (0-100)
|
||
- **Градиент:** `gradient: { type: 'linear' | 'radial', colors: HexColor[], angle? }` (сложнее)
|
||
- **Несколько текстовых блоков на панели:** потребует переархитектуры Preview.svelte
|
||
|
||
**Приоритет:** Medium - улучшает качество панелей, но требует работы с Konva.
|
||
|
||
### 3.3 Расширенные настройки изображений (Medium Priority)
|
||
|
||
**Файлы:** [`src/states/imageConfig.svelte.ts`](src/states/imageConfig.svelte.ts), [`src/components/image/ImageManager.svelte`](src/components/image/ImageManager.svelte)
|
||
|
||
Добавить:
|
||
|
||
- **Фильтры:** blur, sepia, saturate, grayscale
|
||
- **Наложение:** возможность добавить второй слой изображения
|
||
- **Режимы наложения:** multiply, screen, overlay (CSS blend modes)
|
||
|
||
**Приоритет:** Medium - улучшает креативность, но сложная реализация.
|
||
|
||
### 3.4 Пресеты и шаблоны (Low Priority)
|
||
|
||
**Новые файлы:**
|
||
|
||
- [`src/services/templateService.ts`](src/services/templateService.ts)
|
||
- [`src/components/template/TemplateGallery.svelte`](src/components/template/TemplateGallery.svelte)
|
||
|
||
**Функционал:**
|
||
|
||
- Предустановленные шаблоны (разные стили текста/изображений)
|
||
- Сохранение пользовательских пресетов
|
||
- Применение пресета к текущему проекту
|
||
|
||
**Приоритет:** Low - nice-to-have, не критично для MVP.
|
||
|
||
### 3.5 Интеграция с Twitch API (Future)
|
||
|
||
**Возможные интеграции:**
|
||
|
||
- Прямая загрузка панелей на Twitch через API
|
||
- Синхронизация с существующими панелями
|
||
- Планирование публикации
|
||
|
||
**Приоритет:** Low - требует OAuth, сложная интеграция.
|
||
|
||
---
|
||
|
||
## 4. User Retention (Повторное использование)
|
||
|
||
### 4.1 Сохранение проектов (см. 3.1) - HIGH
|
||
|
||
### 4.2 Настройки пользователя (Medium Priority)
|
||
|
||
**Файлы:** [`src/states/theme.svelte.ts`](src/states/theme.svelte.ts) уже есть, но нет сохранения.
|
||
|
||
**Добавить:**
|
||
|
||
- Сохранение темы в localStorage (частично есть в [`src/routes/+layout.svelte`](src/routes/+layout.svelte):15)
|
||
- Сохранение предпочитаемого шрифта
|
||
- Сохранение последних использованных цветов
|
||
- **Файл:** [`src/services/preferencesService.ts`](src/services/preferencesService.ts)
|
||
|
||
### 4.3 Экспорт в разные форматы (Medium Priority)
|
||
|
||
**Текущее состояние:** Только PNG.
|
||
|
||
**Добавить:**
|
||
|
||
- Экспорт в JPEG (с настройкой качества)
|
||
- Экспорт в WebP (современный формат)
|
||
- Экспорт в PDF (для печати)
|
||
- **Файл:** [`src/services/exportService.ts`](src/services/exportService.ts) (расширить downloadService)
|
||
|
||
**Приоритет:** Medium - увеличивает полезность.
|
||
|
||
### 4.4 История изменений (Low Priority)
|
||
|
||
**Новый файл:** [`src/services/historyService.ts`](src/services/historyService.ts)
|
||
|
||
**Функционал:**
|
||
|
||
- Undo/Redo для текстов и настроек
|
||
- Хранение N последних состояний
|
||
- Горячие клавиши Ctrl+Z / Ctrl+Y
|
||
|
||
**Приоритет:** Low - удобно, но не обязательно.
|
||
|
||
### 4.5 Совместная работа (Future)
|
||
|
||
**Сложная интеграция:**
|
||
|
||
- Share link с состоянием (закодировать в URL)
|
||
- Real-time collaboration (WebSocket)
|
||
- Комментарии/ревью
|
||
|
||
**Приоритет:** Very Low - далеко от MVP.
|
||
|
||
---
|
||
|
||
## 5. Приоритизация по фазам
|
||
|
||
### Фаза 1: Завершение базового функционала (2-3 недели)
|
||
|
||
**Цель:** Приложение должно работать end-to-end
|
||
|
||
1. Полная реализация системы изображений (2.1) - **High**
|
||
2. Сохранение проектов (3.1) - **High**
|
||
3. Валидация и состояния загрузки (2.2) - **Medium**
|
||
4. Пустые состояния (2.3) - **Medium**
|
||
5. Настройки пользователя (4.2) - **Medium**
|
||
|
||
**Критерий успеха:** Пользователь может создать, сохранить и загрузить проект с изображением и текстом.
|
||
|
||
### Фаза 2: Улучшение UX и расширение (3-4 недели)
|
||
|
||
1. Расширенные настройки текста (3.2) - **Medium**
|
||
2. Расширенные настройки изображений (3.3) - **Medium**
|
||
3. Экспорт в разные форматы (4.3) - **Medium**
|
||
4. Улучшение доступности (2.4) - **Medium**
|
||
5. Пресеты и шаблоны (3.4) - **Low**
|
||
|
||
**Критерий успеха:** Пользователь может создавать сложные панели с эффектами и быстро повторять стили.
|
||
|
||
### Фаза 3: Продвинутые фичи (4+ недели)
|
||
|
||
1. История изменений (4.4) - **Low**
|
||
2. Интеграция с Twitch API (3.5) - **Low**
|
||
3. Совместная работа (4.5) - **Very Low**
|
||
|
||
---
|
||
|
||
## 6. Метрики успеха
|
||
|
||
- **Активация:** >70% пользователей создают хотя бы 1 панель
|
||
- **Сохранение:** >30% пользователей сохраняют проект
|
||
- **Экспорт:** >50% пользователей экспортируют хотя бы 1 панель
|
||
- **Время на создание:** <2 минут для набора из 5 панелей
|
||
- **Retention week 1:** >40% возвращаются
|
||
|
||
---
|
||
|
||
## 7. Риски и ограничения
|
||
|
||
1. **Сложность Konva:** Ограниченная кастомизация текста (несколько блоков на панели потребует переписывания Preview.svelte)
|
||
2. **Производительность:** Множество Konva stages (konvaAllStages) могут тормозить при 50+ панелях
|
||
3. **Браузерные ограничения:** localStorage 5-10MB, может не хватить для изображений
|
||
4. **Cropper.js:** Требует доработки для работы с canvas/Konva
|
||
|
||
---
|
||
|
||
**Следующие шаги:**
|
||
|
||
1. Утвердить функциональный план
|
||
2. Перейти к техническому плану (ENGINEERING_IMPROVEMENTS.md)
|
||
3. Начать реализацию Фазы 1 (начиная с imageService)
|