chore: update plans, update deps

This commit is contained in:
2026-02-04 15:26:45 +05:00
parent 3a99a3d22a
commit 6f22b59288
3 changed files with 1940 additions and 1833 deletions
+24 -18
View File
@@ -3,22 +3,26 @@
## MVP (Minimum Viable Product)
### Цель MVP
Создать инструмент для быстрого создания нескольких Twitch панелей в едином стиле с разными текстами.
### Функциональность MVP
#### 1. Загрузка фонового изображения
- Автоматическая загрузка фонового изображения по умолчанию при старте
- Возможность загрузки собственного фонового изображения
- Обрезка изображения до нужных пропорций
#### 2. Создание панелей
- Ввод текстов для создания отдельных панелей
- Каждый текст создает отдельную панель
- Все панели используют одно фоновое изображение
- Настройки текста применяются ко всем панелям
#### 3. Настройки текста
- Размер шрифта (10-72px)
- Выбор шрифта из списка (Arial, Verdana, Georgia и др.)
- Цвет текста
@@ -27,6 +31,7 @@
- Вертикальное смещение от центра
#### 4. Управление текстами
- Список всех созданных текстов
- Редактирование текста прямо в списке
- Удаление текста кнопкой "×"
@@ -34,6 +39,7 @@
- Автоматическая фильтрация пустых текстов и дубликатов
#### 5. Просмотр панелей
- Единое фоновое изображение в боковой панели (один раз вверху)
- Превью всех созданных панелей с текстом на фоне
- Превью только для просмотра
@@ -41,17 +47,20 @@
- Массовое скачивание всех панелей
#### 6. Экспорт панелей
- Скачивание панелей в формате PNG
- Размер панелей: 320px ширина, настраиваемая высота (по умолчанию 100px)
## Workflow работы программы (MVP)
### Шаг 1: Запуск приложения
1. Пользователь открывает приложение
2. Автоматически загружается фоновое изображение по умолчанию
3. Пользователь видит экран добавления текстов
### Шаг 2: Настройка фона (опционально)
1. Фоновое изображение отображается в боковой панели с кнопкой "Загрузить"
2. Пользователь может загрузить собственное фоновое изображение
3. При необходимости обрезает изображение
@@ -60,6 +69,7 @@
6. Превью панелей показывают финальный результат с текстом на фоне
### Шаг 3: Создание и редактирование текстов
1. Пользователь вводит текст для первой панели (например: "links")
2. Нажимает кнопку "Добавить"
3. Текст добавляется в список текстов (пустые тексты и дубликаты автоматически фильтруются)
@@ -71,6 +81,7 @@
9. При редактировании или удалении текста автоматически обновляется соответствующая панель
### Шаг 4: Настройка внешнего вида (опционально)
1. Пользователь настраивает параметры текста:
- Размер шрифта
- Шрифт
@@ -81,12 +92,14 @@
3. Превью панелей в боковой панели обновляется в реальном времени
### Шаг 5: Просмотр панелей
1. В боковой панели отображается фоновое изображение (один раз вверху)
2. Ниже отображаются превью всех созданных панелей
3. Превью панелей показывают финальный результат с текстом на фоне
4. Превью только для просмотра, редактирование происходит в списке текстов
### Шаг 6: Экспорт панелей
1. Пользователь скачивает отдельные панели или все сразу
2. Панели сохраняются в формате PNG
3. Готовые панели загружаются в Twitch
@@ -94,14 +107,15 @@
## Технические требования MVP
### Frontend
- Svelte 5 с runes
- TypeScript
- SvelteKit
- Tailwind CSS (опционально для стилей)
### Основные компоненты
#### UI компоненты (максимум 5)
#### UI компоненты
- AppHeader - заголовок приложения с кнопкой загрузки изображения
- ImageManager - управление загрузкой и обрезкой изображений
- TextSection - управление текстами и настройками
@@ -109,17 +123,20 @@
- PanelsList - список превью всех созданных панелей
#### Вспомогательные компоненты
- ImageUpload - загрузка изображений
- ImageCropper - обрезка изображений
- TextManager - добавление, редактирование и удаление текстов
- PanelPreview - превью отдельной панели (только для просмотра)
### Хранилище данных
- panelStore - хранение состояния панелей и функций для их создания
- uiStore - хранение состояния UI (текущий шаг, загрузка и т.д.)
- texts - массив текстов для создания панелей (хранится в компоненте страницы)
### Сервисы
- exportService - экспорт панелей в PNG
## Будущее развитие (Future Roadmap)
@@ -127,6 +144,7 @@
### Фаза 2: Расширение функциональности
#### 1. Дополнительные настройки
- Добавление иконок к панелям
- Настройка тени текста
- Градиентный текст
@@ -134,11 +152,13 @@
- Настройка прозрачности фона
#### 2. Библиотека шаблонов
- Предустановленные шаблоны панелей
- Возможность сохранения собственных шаблонов
- Категории шаблонов (игры, технологии, искусство и т.д.)
#### 3. Пакетная обработка
- Импорт списка текстов из файла
- Автоматическое создание панелей из списка
- Пакетное переименование панелей
@@ -146,31 +166,17 @@
### Фаза 3: Социальные функции
#### 1. Облачное хранилище
- Сохранение проектов в облаке
- Синхронизация между устройствами
- История версий
#### 2. Шаринг
- Возможность делиться проектами
- Публичная библиотека панелей
- Рейтинг и отзывы
#### 3. Интеграции
- Интеграция с Twitch API
- Автоматическая загрузка панелей в Twitch
- Интеграция с другими платформами (YouTube, Discord)
### Фаза 4: Монетизация
#### 1. Premium функции
- Дополнительные шаблоны
- Расширенные настройки
- Приоритетная поддержка
#### 2. Маркетплейс
- Продажа премиальных шаблонов
- Комиссионные продажи
## Метрики успеха MVP
- Время создания одной панели: < 30 секунд