mirror of
https://github.com/Ku6epXBOCTuK/easy-png-tools.git
synced 2026-09-14 21:46:35 +00:00
11 KiB
11 KiB
План: главная страница как рабочая область с цепочкой
Статус: план к выполнению. Заменяет идею отдельной страницы рабочего пространства.
1. Модель
- Главная страница — это рабочая область. Без выбранного инструмента на ней большой поиск: начните вводить название — список отфильтровывается; выбор разворачивает инструмент прямо здесь, без перехода.
- Развернутый инструмент выглядит как привычная страница: слева исходник, справа результат со своей кнопкой скачивания, параметры — в отдельной карточке под сценой.
- Под результатом рядом с кнопкой скачивания — кнопка «⛓ Chain with…»: добавляет пустую секцию, внутри которой такой же поиск; выбор заполняет секцию следующим инструментом. Так цепочка растёт сколько угодно.
- Каждая заполненная секция цепи — полноценная: свои параметры, своё превью, своя кнопка скачивания промежуточного результата. Крестик убирает секцию; кнопка «✂ Remove chain» снимает всю цепь разом (без подтверждения).
- Чекбокс «Показать маску» живёт в карточке параметров базового инструмента и влияет только на его превью: в цепь всегда передаётся сам результат.
- Сетка-каталог инструментов переезжает на отдельную страницу
/list-tools— для SEO и визуального поиска. Основная работа происходит на главной; в шапке появляются ссылки на обе. - Прямые адреса
/tools/<id>сохраняются: тот же развернутый инструмент для глубоких ссылок. - Цепочка переживает перезагрузку (автосохранение в localStorage). Экспорт/импорт файлом отложен до появления CLI/wasm-части.
2. Архитектура
- Страница инструмента уже собрана как самодостаточный компонент, принимающий запись реестра, — он и становится встраиваемым блоком. Маршруты
/tools/[id]и главная используют один и тот же компонент: первая — по адресу из URL, вторая — по выбору из поиска. - Состояние главной: выбран ли инструмент; если да — рендерится блок инструмента, целиком владеющий своим исходником, параметрами, результатом и цепочкой.
- Смена инструмента на главной (через повторный поиск) сбрасывает блок целиком.
- Цепочка хранится массивом шагов; у пустого звена инструмент ещё не выбран — такие звенья не сохраняются в localStorage и не участвуют в прогоне.
- Исполнение — последовательная свёртка: выход каждого звена — вход следующего; результаты всех звеньев доступны их секциям. Общий авто-раннер даёт токен отмены и задержку ~300 мс.
3. Переиспользование и доработки существующего
Готовое берётся как есть: SourceCard, Preview, ParamForm, DownloadButton, EmptyState, модуль пайплайна, авто-раннер, PNG_OUTPUT.
Доработки:
- Блок страницы инструмента — расширяется секцией цепочки: список заполненных звеньев, каждое со своими параметрами, превью и скачиванием, плюс пустые звенья с поиском. Кнопки «⛓» и «✂ Remove chain» — рядом со скачиванием базового результата.
ParamsCard— опциональный блок «Показать маску» (флаг preview у инструмента + двусторонний флаг).- Карточка результата — упрощается: получает готовую картинку, маска уходит в карточку параметров.
- Существующая главная-каталог — переезжает на маршрут
/list-toolsпочти без изменений.
Удаляется: черновой маршрут рабочего пространства и его компоненты списка/селектора — вместо них новые, под вертикальную модель.
4. Новые компоненты
ToolSearch.svelte— поиск с нечётким совпадением: поле ввода, отфильтрованный список (регистронезависимая подпоследовательность по названию и описанию, приоритет совпадению с начала), клавиатура ↑↓ Enter Esc; два размера — герой на главной и компактный внутри пустого звена. Предлагает только инструменты-трансформеры.ChainStep.svelte— секция одного звена: пустое звено показывает компактный поиск; заполненное — заголовок с номером и крестиком, форму параметров, превью результата, кнопку скачивания.ChainBar.svelte— строка под результатом базового инструмента: «⛓ Chain with…» и «✂ Remove chain» (видна только при непустой цепи).
5. Этапы и проверки
- A. Поиск и главная —
ToolSearch, герой поиска на главной, встраивание блока инструмента, перенос каталога на/list-tools, ссылки в шапке. Проверка:check/build, визуально. - B. Цепочка — состояние цепи в блоке инструмента, пустые звенья с поиском, прогон, промежуточные превью и скачивания, ошибки звеньев. Проверка: смоук §8 пп. 1–6.
- C. Маска и упрощение — блок маски в
ParamsCard, упрощение карточки результата. Проверка: смоук §8 п. 7. - D. Хранение и итог — автосохранение и восстановление цепочки, удаление чернового маршрута рабочего пространства, полный регресс каталога,
test/check/build.
6. Смоук-чеклист
- На главной — большое поле поиска; ввод фильтрует список по мере набора; Enter выбирает подсвеченный.
- Выбранный инструмент разворачивается на той же странице: исходник, параметры, результат.
- «⛓ Chain with…» добавляет пустую секцию с компактным поиском; выбор заполняет её.
- У каждой секции своё превью и своё скачивание промежуточного результата.
- Крестик убирает секцию; «✂ Remove chain» снимает все звенья разом.
- Ошибка звена — баннер «Шаг N (имя): …»; последние успешные результаты секций не исчезают.
- «Показать маску» переключает превью базового инструмента; в цепь идёт результат, скачивание базового отдаёт результат, не маску.
- Перезагрузка восстанавливает цепочку заполненных звеньев; пустые звенья при этом исчезают.
- Быстрые правки подряд — один финальный пересчёт всей вертикали.
/list-toolsоткрывает старый каталог по категориям; прямые адреса/tools/<id>работают.
7. Критерии готовности
- Работа начинается с главной: поиск → инструмент → цепочка звеньями, каждый со своим превью и скачиванием.
- Отдельной страницы рабочего пространства нет; каталог доступен на
/list-tools; прямые ссылки инструментов работают. - Пустые звенья не попадают в сохранение и не ломают прогон.
test/check/buildзелёные, смоук §6 пройден.
8. Что сознательно не делаем
- Ветвления и прицепывание от середины цепи — новое звено всегда добавляется в конец.
- Пипетка и маски внутри звеньев цепи — они остаются фичей базового инструмента.
- Экспорт и импорт цепочки файлом — отложено до появления CLI/wasm-части.
- Несколько параллельных инструментов на главной одновременно — один активный блок за раз.