mirror of
https://github.com/Ku6epXBOCTuK/easy-png-tools.git
synced 2026-11-13 17:08:20 +00:00
feat: remove v1 routes and libs
This commit is contained in:
+50
-116
@@ -1,44 +1,26 @@
|
||||
# План: переезд на новый дизайн (refs) — параллельная сборка
|
||||
|
||||
> Статус: C17 **выполнен** (`docs/archive/plan-c17.md`), C18 **выполнен**.
|
||||
> Остались C20 (шаг 6, проверка нового дизайна) — **следующий этап**. C19/C21
|
||||
> (шаг 7, удаление старого) — **отложены**, нет ценности. Они больше не
|
||||
> привязаны к «верности против рефа»: `docs/archive/plan-design-fix.md` закрыт,
|
||||
> аудит против рефа прекращён. Общий tech-debt baseline зафиксирован в
|
||||
> `docs/plan-codebase-quality.md`; legacy cleanup остаётся отложенным. Backlog
|
||||
> №14 (переезд старых файлов в `old/`) — **выполнено**. Покупка домена НЕ была
|
||||
> блокером C17: домен нужен для S1 (`plan-seo.md`) — canonical, sitemap, снятие
|
||||
> `noindex`.
|
||||
> Статус: C17 **выполнен** (`docs/archive/plan-c17.md`), C18 **выполнен**, Q3
|
||||
> (удаление старого UI) **выполнен**. Остался C20 (шаг 6, проверка нового
|
||||
> дизайна) — **следующий этап**. C21 (удалить refs) остаётся отдельной уборкой.
|
||||
> Общий tech-debt baseline и следующие quality-задачи зафиксированы в
|
||||
> `docs/plan-codebase-quality.md`. Покупка домена НЕ была блокером C17: домен
|
||||
> нужен для S1 (`plan-seo.md`) — canonical, sitemap, снятие `noindex`.
|
||||
>
|
||||
> Источники: `refs/` — Next/React-референс (правда по пикселям и интерактиву),
|
||||
> `refs-html/` — статические HTML-снимки для быстрого просмотра в браузере.
|
||||
>
|
||||
> **Стратегия изменена.** Вместо in-place рестайла (старый план A–F, правка
|
||||
> общих компонентов на месте с алиасами токенов) — **параллельная сборка**:
|
||||
> новый дизайн строится отдельно, изолируется от старого, проверяется целиком,
|
||||
> затем становится основным и старый удаляется. Старое приложение остаётся
|
||||
> рабочим и шippable на всём протяжении перехода.
|
||||
> **Историческая стратегия перехода:** сначала новый UI собирался отдельно,
|
||||
> затем стал production, после чего legacy-ветка была удалена Q3. Текущие
|
||||
> критерии относятся только к production UI; старые решения и детали перехода
|
||||
> остаются в архивных планах.
|
||||
|
||||
## 0. Почему меняем стратегию
|
||||
|
||||
- **Старый план (A–F):** правим `ui/*` и страницы на месте, держим старые токены
|
||||
как алиасы, чтобы ничего не сломалось до этапа F. Риск: общие компоненты
|
||||
редактируются вживую → регресс старого UI во время работы, новый дизайн нельзя
|
||||
принять изолированно.
|
||||
- **Новый подход (5 фаз):** (1) строим новый ui-kit, (2) строим новые страницы
|
||||
рядом, не трогая старые, (3) проверяем новый дизайн, (4) делаем его основным,
|
||||
(5) удаляем старый. Ниже фазы 1–5 — это требуемые шаги.
|
||||
- **Главный технический риск и его решение.** Сейчас `web/src/app.css`
|
||||
импортируется в **корневом** `web/src/routes/+layout.svelte:2` и потому
|
||||
грузится на ВСЕХ маршрутах, включая новые. Решение — **не префиксовать новый
|
||||
CSS (никакого `.ds2`), а разнести глобальные стили по layout'ам без
|
||||
наследования**: (а) убрать `import '../app.css'` из корневого layout; (б)
|
||||
старые маршруты обернуть группой `(old)/` с собственным layout, импортирующим
|
||||
`app.css`; (в) новые маршруты (`preview/*`) — собственный layout,
|
||||
импортирующий `design2.css`. SvelteKit делает code-splitting CSS по маршрутам,
|
||||
а стили компонентов скоупятся сами — поэтому глобальные стили каждого дизайна
|
||||
живут только в своей ветке, и префикс-обёртка `.ds2` не нужна. Старые `ui/` и
|
||||
страницы не трогаются до фазы 5.
|
||||
- Переход выполнялся параллельной сборкой, чтобы новый UI можно было проверить
|
||||
независимо; теперь production использует только новые маршруты и `app.css`.
|
||||
- Дизайн-токены и глобальные стили живут в `web/src/app.css`; отдельные layout
|
||||
для удалённого UI-v1 больше не нужны.
|
||||
|
||||
## 1. Источники и их оценка
|
||||
|
||||
@@ -189,68 +171,29 @@
|
||||
> `app.css`; если позже захотим держать новые маршруты внутри группы, `@`
|
||||
> пригодится для сброса родительского layout.
|
||||
|
||||
## 6. Маршрутизация параллельных страниц
|
||||
## 6. Маршрутизация: историческая схема перехода
|
||||
|
||||
Новые страницы живут в **отдельной ветке `preview/*`**, не трогая старые:
|
||||
Во время перехода UI-kit проверялся в отдельной ветке, затем его страницы были
|
||||
перенесены на production-маршруты. Эта схема нужна только для восстановления
|
||||
контекста C17; текущая структура описана в разделе 7, отдельных preview- или
|
||||
legacy-layouts в production больше нет.
|
||||
|
||||
```txt
|
||||
src/routes/+layout.svelte # нейтральный, БЕЗ app.css
|
||||
src/routes/(old)/+layout.svelte # импорт app.css + старая шапка/подвал
|
||||
src/routes/(old)/+page.svelte # / (старое)
|
||||
src/routes/(old)/demo/+page.svelte # /demo
|
||||
src/routes/(old)/list-tools/...
|
||||
src/routes/(old)/tools/[id]/...
|
||||
src/routes/preview/+layout.svelte # импорт design2.css, <AppShell>
|
||||
src/routes/preview/+page.svelte # /preview — воркспейс (index/demo)
|
||||
src/routes/preview/demo/+page.svelte # /preview/demo
|
||||
src/routes/preview/list-tools/+page.svelte
|
||||
src/routes/preview/tools/[id]/+page.svelte
|
||||
```
|
||||
## 7. Фазы выполнения
|
||||
|
||||
- Каждая новая страница импортирует **только** `kit/*`. Старые страницы не
|
||||
изменяются (только перемещены в `(old)/`).
|
||||
- Фаза 4: содержимое `preview/*` переносится на реальные маршруты (move-файлы),
|
||||
группа `(old)/` удаляется, `design2.css` подключается в корневом
|
||||
`+layout.svelte` (как новый основной слой), временный флаг/кнопка убираются.
|
||||
- **C1–C16 — UI-kit и проверка нового дизайна.** Токены, компоненты и
|
||||
интерактивные состояния приняты; детали перехода остаются в архивном
|
||||
`plan-design-fix.md`.
|
||||
- **C17/C18 — production-переход.** Новые страницы перенесены на реальные
|
||||
корневые маршруты; `app.css` стал единственным production-стилем.
|
||||
- **Q3/C19 — cleanup.** Удалены UI-v1, legacy CSS, v1-тесты, fixtures и
|
||||
isolation-конфигурация; production build и verify проверяются отдельно.
|
||||
- **C20 — следующий этап.** Финальный проход по брейкпоинтам и визуальной
|
||||
приёмке production UI.
|
||||
- **C21 — отдельная уборка.** Удалить `refs/` и `refs-html/`, если они больше не
|
||||
нужны.
|
||||
|
||||
## 7. Фазы выполнения (1–5 по запросу)
|
||||
|
||||
Каждая фаза заканчивается зелёными `test`/`check`/`build` и ревью в браузере
|
||||
(обе темы) против `refs-html/`.
|
||||
|
||||
- **Фаза 1 — Фундамент + UI-kit.** Токены §2, `design2.css` по §5, все примитивы
|
||||
§3 и контролы §4 как отдельные компоненты. Критерий: демо-страница kit'а
|
||||
(`/preview` или временная) показывает все состояния (light/dark,
|
||||
hover/disabled, все варианты Button/Segmented/Badge); unit-тесты форм не
|
||||
падают; **старые страницы визуально не изменились** (изоляция работает).
|
||||
|
||||
- **Фаза 2 — Новые страницы.** Под `preview/*` (§6): воркспейс, demo,
|
||||
list-tools, tool-page (двухпанельная раскладка из рефа: settings-panel +
|
||||
preview-panel, step-cards для chain). Критерий: разметка соответствует
|
||||
`refs-html/index.html`, `gradient.html`, `background-remover.html`,
|
||||
`list-tools.html`; интерактив (слайдеры/тоглы/загрузка/автозапуск) работает в
|
||||
новом стиле; старые маршруты продолжают работать как раньше.
|
||||
|
||||
- **Фазa 3 — Проверка нового дизайна.** Смоук §8 (обе темы, узкий экран, 800px),
|
||||
скриншоты против `refs-html/`, прогон старого тест-сьюта для доказательства
|
||||
отсутствия регресса, RU/EN-локализация новых лейблов. Критерий: визуальное
|
||||
совпадение с рефом, зелёные тесты, записанные скриншоты приняты.
|
||||
|
||||
- **Фаза 4 — Сделать новый дизайн основным.** Перенос `preview/*` → реальные
|
||||
маршруты; `design2.css` подключается в корневом `+layout.svelte`; удаление
|
||||
preview-группы и временного флага/кнопки. Старые страницы теперь не
|
||||
используются (мёртвый код), но физически ещё в репо. Критерий: реальные
|
||||
маршруты отдают новый дизайн, тесты зелёные, билд без предупреждений.
|
||||
|
||||
- **Фаза 5 — Удалить старый дизайн.** Удаление старых страниц, старого `ui/`,
|
||||
старого `app.css` (и его токенов), неиспользуемых классов; наведение порядка в
|
||||
`components/` (имя каталога и подпапок — решается на фазе 1; к C17 `kit/` уже
|
||||
разложен в `components/`). Финальный проход по брейкпоинтам 1200/1100/800/480.
|
||||
Критерий: `grep` по старым токенам/классам пуст, build чистый, старый дизайн
|
||||
нигде не упоминается.
|
||||
|
||||
Оценка объёма: Фаза 1 — фундамент+kit (~1 день), Фаза 2 — страницы (~1–2 дня),
|
||||
Фаза 3 — проверка (~полдня), Фаза 4–5 — переключение и чистка (~полдня).
|
||||
Критерии каждого этапа — зелёные `test`/`check`/`build`, отсутствие остаточных
|
||||
legacy-путей в production-коде и ревью в браузере для UI-изменений.
|
||||
|
||||
## 8. Смоук (после фазы 3, контроль на фазе 4)
|
||||
|
||||
@@ -268,14 +211,10 @@ src/routes/preview/tools/[id]/+page.svelte
|
||||
## 9. Открытые вопросы
|
||||
|
||||
- **Имя финального каталога компонентов:** решено на C1 — писали в `kit/`, C17
|
||||
разложил его в `components/` (подпапки fields/layout/ui). На C19 — только
|
||||
разложил его в `components/` (подпапки fields/layout/ui). На C21 — только
|
||||
навести порядок внутри `components/`, переименование не требуется.
|
||||
- **Изоляция через layout:** `app.css` вынесен из корневого layout в
|
||||
`(old)/+layout.svelte`; новый `design2.css` — только в `preview/+layout`.
|
||||
Проверить на фазе 1, что на `/preview/*` не попадают стили старого дизайна
|
||||
(DevTools → вкладка Styles, нет правил из `app.css`).
|
||||
- **Переключатель для проверки:** рекомендую `localStorage`-флаг + кнопка
|
||||
«Preview v2» в старой шапке + группа `preview/*`. Убрать на фазе 4.
|
||||
- **Единый production CSS:** `app.css` подключается в корневом layout; отдельных
|
||||
legacy-layouts и переключателей версий больше нет.
|
||||
- **Mono-лейблы рефа на английском** (`PROCESSING PIPELINE`): завести i18n-
|
||||
ключи, но допустить часть английских брендовых («приборная панель»).
|
||||
- **Версия в шапке/футере:** из `package.json` через `define` или захардкодить —
|
||||
@@ -283,8 +222,8 @@ src/routes/preview/tools/[id]/+page.svelte
|
||||
- **`refs/` и `refs-html/` — одноразовый источник, НЕ поддерживаемый.** После
|
||||
внедрения нового дизайна все правки дизайна делаются сразу в продакшен-коде
|
||||
(`design2.css` + `kit/`), а не в `refs/`. Механизм синхронизации «ref → код»
|
||||
не нужен и не создаётся. `refs/` и `refs-html/` можно удалить из репо на фазе
|
||||
5 (по желанию), они не являются частью рантайма.
|
||||
не нужен и не создаётся. `refs/` и `refs-html/` — только историческая справка;
|
||||
их можно удалить в C21, они не являются частью рантайма.
|
||||
|
||||
## 10. План исполнения (мелкие коммиты)
|
||||
|
||||
@@ -362,10 +301,10 @@ src/routes/preview/tools/[id]/+page.svelte
|
||||
|
||||
### Шаг 5. Сделать новый дизайн основным
|
||||
|
||||
> C17 — **выполнен** (`docs/archive/plan-c17.md`): старый `(old)/` → `/v1/`,
|
||||
> preview-страницы переехали в корень, `app.css` стал корневым. C18 (правки
|
||||
> импортов/редиректов после переноса, проверка билда) — **выполнен**. Остались:
|
||||
> C19 (удаление старого, раскрытие `recommended` на весь код), C20, C21.
|
||||
> C17 — **выполнен** (`docs/archive/plan-c17.md`): production-маршруты
|
||||
> перенесены в корень, `app.css` стал корневым. C18 (правки импортов/редиректов
|
||||
> после переноса, проверка билда) — **выполнен**. Q3 удалил старые UI-маршруты и
|
||||
> код. Остались C20 и C21.
|
||||
|
||||
- [x] **[C17]** Перенести `preview/*` → реальные маршруты (move), удалить
|
||||
`(old)/`, корневой `+layout.svelte` импортирует `design2.css` + новый
|
||||
@@ -387,26 +326,21 @@ src/routes/preview/tools/[id]/+page.svelte
|
||||
|
||||
- [ ] **[C20]** Финальный проход по брейкпоинтам 1200/1100/800/480; build без
|
||||
предупреждений; `grep` по старым токенам/классам пуст. Доказательство
|
||||
отсутствия регресса: старый `v1/` работает и не затронут.
|
||||
отсутствия регресса: production-маршруты и основные пользовательские
|
||||
потоки работают.
|
||||
|
||||
### Шаг 7. Опциональная чистка (отложен, нет срока)
|
||||
### Шаг 7. Cleanup
|
||||
|
||||
- [x] **[C19/Q3]** Удалить старое: маршруты `routes/v1/**`, код `lib/v1/**`,
|
||||
`app_v1.css`, v1-тесты, fixtures и isolation-плагин; убрать v1-исключения
|
||||
из конфигурации и активной документации.
|
||||
- [ ] **[C21]** Удалить `refs/` и `refs-html/` из репо — они больше не источник
|
||||
правды.
|
||||
- [ ] **[C19]** Удалить старое: маршруты `routes/v1/**`, код `lib/v1/**`,
|
||||
`app_v1.css` (и его токены), неиспользуемые классы. **И раскрыть ESLint
|
||||
`recommended` на весь код** — убрать scoped-блок `newCode` в
|
||||
`web/eslint.config.js`, прогнать `lint` и починить всплывшие ошибки.
|
||||
_Примечание: доменные модули (`lib/core`, `lib/registry`, тесты и т.п.) —
|
||||
это не «старый дизайн», у них свой линт-долг; расширение `recommended` на
|
||||
них может выдать много ошибок. Решить на C19: либо чиним сразу, либо
|
||||
расширяем scoped только на `src/routes/**` + `src/lib/components/**`._
|
||||
- [ ] Навести порядок в `components/` (согласовать подпапки, финальное имя
|
||||
каталога).
|
||||
|
||||
> **Удаление v1 не решает никаких текущих задач** и не даёт пользовательской
|
||||
> ценности. Старый код лежит мёртвым, не мешает, не ломает билд. Удалять стоит
|
||||
> только когда нет горящих задач и хочется навести порядок.
|
||||
> C19/Q3 — отдельная cleanup-задача, не источник пользовательской ценности.
|
||||
> После удаления проверяются только production-маршруты и общие модули.
|
||||
>
|
||||
> Если какой-то коммит тянет за собой > 500 строк (например, C6/C7), разбивать
|
||||
> на под-коммиты по 2–4 компонента. Тесты/билд прогонять после каждого коммита,
|
||||
|
||||
Reference in New Issue
Block a user