249 lines
13 KiB
Markdown
249 lines
13 KiB
Markdown
# Twitch Panels Creator - Project Plan
|
||
|
||
## MVP (Minimum Viable Product)
|
||
|
||
### Цель MVP
|
||
|
||
Создать инструмент для быстрого создания нескольких Twitch панелей в едином стиле с разными текстами.
|
||
|
||
### Функциональность MVP
|
||
|
||
#### 1. Загрузка фонового изображения
|
||
|
||
- Автоматическая загрузка фонового изображения по умолчанию при старте
|
||
- Возможность загрузки собственного фонового изображения
|
||
- Обрезка изображения до нужных пропорций
|
||
|
||
#### 2. Создание панелей
|
||
|
||
- Ввод текстов для создания отдельных панелей
|
||
- Каждый текст создает отдельную панель
|
||
- Все панели используют одно фоновое изображение
|
||
- Настройки текста применяются ко всем панелям
|
||
|
||
#### 3. Настройки текста
|
||
|
||
- Размер шрифта (10-72px)
|
||
- Выбор шрифта из списка (Arial, Verdana, Georgia и др.)
|
||
- Цвет текста
|
||
- Выравнивание (лево, центр, право)
|
||
- Боковые отступы
|
||
- Вертикальное смещение от центра
|
||
|
||
#### 4. Управление текстами
|
||
|
||
- Список всех созданных текстов
|
||
- Редактирование текста прямо в списке
|
||
- Удаление текста кнопкой "×"
|
||
- Автоматическое обновление панелей при изменении текстов
|
||
- Автоматическая фильтрация пустых текстов и дубликатов
|
||
|
||
#### 5. Просмотр панелей
|
||
|
||
- Единое фоновое изображение в боковой панели (один раз вверху)
|
||
- Превью всех созданных панелей с текстом на фоне
|
||
- Превью только для просмотра
|
||
- Скачивание отдельной панели
|
||
- Массовое скачивание всех панелей
|
||
|
||
#### 6. Экспорт панелей
|
||
|
||
- Скачивание панелей в формате PNG
|
||
- Размер панелей: 320px ширина, настраиваемая высота (по умолчанию 100px)
|
||
|
||
## Workflow работы программы (MVP)
|
||
|
||
### Шаг 1: Запуск приложения
|
||
|
||
1. Пользователь открывает приложение
|
||
2. Автоматически загружается фоновое изображение по умолчанию
|
||
3. Пользователь видит экран добавления текстов
|
||
|
||
### Шаг 2: Настройка фона (опционально)
|
||
|
||
1. Фоновое изображение отображается в боковой панели с кнопкой "Загрузить"
|
||
2. Пользователь может загрузить собственное фоновое изображение
|
||
3. При необходимости обрезает изображение
|
||
4. Фон отображается один раз в боковой панели с правильными размерами (максимальная ширина 320px)
|
||
5. Фон применяется ко всем создаваемым панелям
|
||
6. Превью панелей показывают финальный результат с текстом на фоне
|
||
|
||
### Шаг 3: Создание и редактирование текстов
|
||
|
||
1. Пользователь вводит текст для первой панели (например: "links")
|
||
2. Нажимает кнопку "Добавить"
|
||
3. Текст добавляется в список текстов (пустые тексты и дубликаты автоматически фильтруются)
|
||
4. В боковой панели автоматически отображается превью созданной панели
|
||
5. Пользователь повторяет процесс для других текстов ("about me", "projects", "memes")
|
||
6. Все тексты отображаются в списке ниже поля ввода
|
||
7. Каждый текст в списке можно редактировать прямо в поле ввода (дубликаты автоматически фильтруются)
|
||
8. Любой текст можно удалить кнопкой "×"
|
||
9. При редактировании или удалении текста автоматически обновляется соответствующая панель
|
||
|
||
### Шаг 4: Настройка внешнего вида (опционально)
|
||
|
||
1. Пользователь настраивает параметры текста:
|
||
- Размер шрифта
|
||
- Шрифт
|
||
- Цвет
|
||
- Выравнивание
|
||
- Отступы
|
||
2. Настройки применяются ко всем создаваемым панелям
|
||
3. Превью панелей в боковой панели обновляется в реальном времени
|
||
|
||
### Шаг 5: Просмотр панелей
|
||
|
||
1. В боковой панели отображается фоновое изображение (один раз вверху)
|
||
2. Ниже отображаются превью всех созданных панелей
|
||
3. Превью панелей показывают финальный результат с текстом на фоне
|
||
4. Превью только для просмотра, редактирование происходит в списке текстов
|
||
|
||
### Шаг 6: Экспорт панелей
|
||
|
||
1. Пользователь скачивает отдельные панели или все сразу
|
||
2. Панели сохраняются в формате PNG
|
||
3. Готовые панели загружаются в Twitch
|
||
|
||
## Технические требования MVP
|
||
|
||
### Frontend
|
||
|
||
- ✅ Svelte 5 с runes
|
||
- ✅ TypeScript
|
||
- ✅ SvelteKit
|
||
- ✅ Vite для сборки
|
||
- ✅ Адаптер для статического деплоя
|
||
|
||
### Основные компоненты
|
||
|
||
#### UI компоненты (Реализованы)
|
||
|
||
- ✅ AppContainer - главный контейнер приложения
|
||
- ✅ AppHeader - заголовок приложения с кнопкой загрузки изображения
|
||
- ✅ AppContent - основной контент приложения
|
||
- ✅ ImageManager - управление загрузкой и обрезкой изображений
|
||
- ✅ TextSection - управление текстами и настройками
|
||
- ✅ BackgroundPreview - превью фонового изображения
|
||
- ✅ PanelsList - список превью всех созданных панелей
|
||
- ✅ Sidebar - боковая панель с превью
|
||
- ✅ MainSection - основная секция приложения
|
||
|
||
#### Вспомогательные компоненты (Реализованы)
|
||
|
||
- ✅ ImageUpload - загрузка изображений (drag-drop, paste, URL)
|
||
- ✅ ImageCropper - обрезка изображений с cropperjs
|
||
- ✅ TextManager - добавление, редактирование и удаление текстов
|
||
- ✅ PanelPreview - превью отдельной панели
|
||
- ✅ TextPreview - превью текста
|
||
- ✅ ErrorMessage - обработка ошибок
|
||
|
||
### Библиотеки и зависимости
|
||
|
||
- ✅ cropperjs v2.1.0 - обрезка изображений
|
||
- ✅ file-saver v2.0.5 - сохранение файлов
|
||
- ✅ jszip v3.10.1 - архивирование (для batch download)
|
||
- ✅ uuid - генерация ID
|
||
- ✅ @types/\* - TypeScript типы
|
||
|
||
### Хранилище данных (Реализовано)
|
||
|
||
- ✅ panelStore - хранение состояния панелей
|
||
- ✅ uiStore - хранение состояния UI (загрузка, ошибки)
|
||
- ✅ Локальное хранилище для сохранения панелей
|
||
|
||
### Сервисы (Реализованы)
|
||
|
||
- ✅ imageService - загрузка и обработка изображений
|
||
- ✅ panelService - управление панелями и текстами
|
||
- ✅ exportService - экспорт панелей в PNG
|
||
- ✅ Локальные и глобальные сервисы
|
||
|
||
### Архитектура
|
||
|
||
- ✅ Компонентная архитектура с разделением ответственности
|
||
- ✅ Сервисный слой для бизнес-логики
|
||
- ✅ Сторы для управления состоянием
|
||
- ✅ Типизация TypeScript
|
||
- ✅ Обработка ошибок и валидация
|
||
|
||
## Будущее развитие (Future Roadmap)
|
||
|
||
### Фаза 2: Расширение функциональности
|
||
|
||
#### 1. Дополнительные настройки
|
||
|
||
- Добавление иконок к панелям
|
||
- Настройка тени текста
|
||
- Градиентный текст
|
||
- Несколько текстовых элементов на одной панели
|
||
- Настройка прозрачности фона
|
||
|
||
#### 2. Библиотека шаблонов
|
||
|
||
- Предустановленные шаблоны панелей
|
||
- Возможность сохранения собственных шаблонов
|
||
- Категории шаблонов (игры, технологии, искусство и т.д.)
|
||
|
||
#### 3. Пакетная обработка
|
||
|
||
- Импорт списка текстов из файла
|
||
- Автоматическое создание панелей из списка
|
||
- Пакетное переименование панелей
|
||
|
||
### Фаза 3: Социальные функции
|
||
|
||
#### 1. Облачное хранилище
|
||
|
||
- Сохранение проектов в облаке
|
||
- Синхронизация между устройствами
|
||
- История версий
|
||
|
||
#### 2. Шаринг
|
||
|
||
- Возможность делиться проектами
|
||
- Публичная библиотека панелей
|
||
- Рейтинг и отзывы
|
||
|
||
## Метрики успеха MVP
|
||
|
||
- Время создания одной панели: < 30 секунд
|
||
- Время создания набора из 5 панелей: < 2 минут
|
||
- Успешное скачивание панелей: 100%
|
||
- Положительный фидбек от первых пользователей
|
||
|
||
## Ограничения MVP
|
||
|
||
- Один фоновый рисунок для всех панелей
|
||
- Фон отображается один раз в боковой панели (максимальная ширина 320px)
|
||
- Превью панелей показывают финальный результат с текстом на фоне
|
||
- Один текстовый элемент на панель
|
||
- Фиксированная ширина панели (320px)
|
||
- Только экспорт в PNG
|
||
- Работа в браузере без сохранения на сервере
|
||
- Редактирование текстов происходит в списке, превью только для просмотра
|
||
|
||
## Следующие шаги
|
||
|
||
### Фаза 1: Завершение MVP (Текущая)
|
||
|
||
1. ✅ Реализовать базовую структуру приложения
|
||
2. ✅ Реализовать загрузку и обрезку изображений
|
||
3. ✅ Реализовать создание панелей из текстов
|
||
4. ✅ Реализовать настройки текста
|
||
5. ✅ Реализовать управление текстами (редактирование, удаление)
|
||
6. ✅ Реализовать превью панелей (только для просмотра)
|
||
7. ✅ Реализовать экспорт панелей
|
||
8. ✅ Разделить редактирование текстов и превью панелей
|
||
9. 🔄 Реализовать пакетный экспорт (batch download) с JSZip
|
||
10. 🔄 Добавить валидацию и обработку ошибок
|
||
11. 🔄 Оптимизировать производительность рендеринга
|
||
12. ⏳ Тестирование и исправление багов
|
||
13. ⏳ Деплой на GitHub Pages
|
||
|
||
### Фаза 2: Расширенные функции (Будущая)
|
||
|
||
1. ⏳ Добавить иконки и продвинутые настройки текста
|
||
2. ⏳ Создать библиотеку шаблонов
|
||
3. ⏳ Реализовать пакетную обработку
|
||
4. ⏳ Добавить социальные функции и облачное хранилище
|