diff --git a/apps/web/components/layout/Sidebar.tsx b/apps/web/components/layout/Sidebar.tsx index 6b20019..15b4812 100644 --- a/apps/web/components/layout/Sidebar.tsx +++ b/apps/web/components/layout/Sidebar.tsx @@ -67,10 +67,10 @@ const NAV: NavSection[] = [ ], }, { - title: "Варианты и дубли", + title: "Эксперименты", items: [ - { label: "Варианты блоков", href: "/variants/blocks", soon: true }, - { label: "Варианты страниц", href: "/variants/pages", soon: true }, + { label: "Дубли компонентов", href: "/variants/blocks", soon: true }, + { label: "Дубли страниц", href: "/variants/pages", soon: true }, ], }, ]; diff --git a/docs/SPRINTS.md b/docs/SPRINTS.md index b93537e..6105d3f 100644 --- a/docs/SPRINTS.md +++ b/docs/SPRINTS.md @@ -181,159 +181,178 @@ ## Sprint 5 — Все блоки текущего сайта **Цель:** Задокументировать ВСЕ блоки страницы perm.oclinica.ru/lor за один спринт. -Источник: скриншот страницы + CSS сайта. +Источник: скриншот страницы + CSS сайта. Только фронтенд, mock-данные. -### Блоки с реального сайта (сверху вниз) +### Блоки с реального сайта (сверху вниз, по скриншоту /lor) **Шапка и навигация** → `/components/navigation` -- [ ] FE: Топ-бар: адрес «Б. Цитная, 3», ссылки на разделы, телефон /342/ 255-53-84, кнопка «Заказать звонок» (pill) +- [ ] FE: Топ-бар: адрес «Б. Цитная, 3», телефон /342/ 255-53-84, кнопка «Заказать звонок» (pill) - [ ] FE: Логотип «КЛИНИКА УХО ГОРЛО НОС ИМ. ПРОФ. Е.Н. ОЛЕНЕВОЙ» - [ ] FE: Главное меню: Клиника / ЛОР врачи / Заболевания / Вопрос-ответ / ЛОР-операции / Сурдология / Цены / Контакты -- [ ] FE: Убрать `soon` у `/components/navigation` в Sidebar **Hero-баннер** → `/blocks/hero` -- [ ] FE: Левая часть: белый блок, заголовок «ЭНДОСКОПИЧЕСКОЕ...», 3 пункта с галочками, кнопка «Узнать стоимость операции» (primary) +- [ ] FE: Левая часть: белый блок, заголовок «ЭНДОСКОПИЧЕСКОЕ...», 3 пункта с галочками, кнопка «Узнать стоимость операции» - [ ] FE: Правая часть: фото врача, фон #b8e6ed -- [ ] FE: Под баннером: кнопки соцсетей + счётчик просмотров **Вводный текст (CEO-блок)** → `/blocks/ceo` -- [ ] FE: Текст специализации клиники, вопросы-стимулы в формате Q&A (— У вас болит ухо?...) +- [ ] FE: Текст специализации клиники, Q&A вопросы-стимулы **Блок врачей** → `/blocks/doctors` -- [ ] FE: Заголовок «Приём ведут опытные ЛОР врачи» -- [ ] FE: 3 стат-блока: «Ежедневно 27 врачей», «6 кандидатов наук», «Свыше 12 000 операций» -- [ ] FE: Сетка карточек врачей (6 штук) +- [ ] FE: Заголовок «Приём ведут опытные ЛОР врачи» + 3 стат-блока + сетка карточек (mock) **Блок отзывов** → `/blocks/reviews` -- [ ] FE: Заголовок «Отзывы о нас», подзаголовок -- [ ] FE: Карусель: большая кавычка, текст отзыва, ссылка «Читать отзыв полностью», стрелки +- [ ] FE: Карусель: кавычка, текст отзыва, «Читать полностью», стрелки -**Форма записи «Будьте здоровы!»** → `/blocks/contact-forms` -- [ ] FE: Фон #b8e6ed (бирюзовый), заголовок, поля: имя / телефон / выбор врача (select), чекбокс согласия, кнопка «Запишите меня!» - -**Форма «Узнайте стоимость операции»** → на той же странице `/blocks/contact-forms` -- [ ] FE: Белый фон, заголовок, поля: имя / телефон, чекбокс, кнопка «Перезвоните мне» +**Формы записи** → `/blocks/contact-forms` +- [ ] FE: Форма «Будьте здоровы!» (фон #b8e6ed, поля: имя/телефон/врач, кнопка «Запишите меня!») +- [ ] FE: Форма «Узнайте стоимость операции» (белый фон, поля: имя/телефон, кнопка «Перезвоните мне») **Блок новостей** → `/blocks/news` -- [ ] FE: Заголовок «Новости», 4 карточки новостей в ряд (дата + заголовок), кнопка «Все новости» +- [ ] FE: 4 карточки новостей в ряд (дата + заголовок), кнопка «Все новости» (mock) **Footer (подвал)** → `/blocks/contact` -- [ ] FE: 4 колонки ссылок: О клинике / Заболевания / Вопрос-ответ / Операции -- [ ] FE: Логотип внизу, адрес «Пермь, ул. Г. Звезда», иконки соцсетей, часы работы +- [ ] FE: 4 колонки ссылок, логотип, адрес, соцсети, часы работы -### Общее -- [ ] FE: Добавить LLM-блоки v1.0 на каждую страницу блоков -- [ ] FE: Убрать `soon` у всех блоков в Sidebar -- [ ] Docs: Обновить `docs/LLM_CONTEXT.md` — секции по всем блокам +### Общее к Sprint 5 +- [ ] FE: LLM-блоки v1.0 на каждую страницу блоков +- [ ] FE: Убрать `soon` у всех заполненных блоков в Sidebar +- [ ] Docs: Обновить `docs/LLM_CONTEXT.md` -**Результат спринта:** Все блоки текущего сайта задокументированы. +**Результат спринта:** Все блоки текущего сайта задокументированы с mock-данными. --- ## Sprint 6 — Страницы (сборки из блоков) **Цель:** Задокументировать полные страницы как сборки уже готовых блоков. +Данные пока mock — реальные появятся в Sprint 8. ### Задачи -- [ ] Research: Изучить реальную страницу заболевания (напр. perm.oclinica.ru/lor/rinit) — какие блоки там, в каком порядке -- [ ] Research: Изучить страницу /lor/doctors — фильтры, сетка, пагинация -- [ ] FE: Страница `/pages/home` — полная главная (сборка блоков Sprint 5) -- [ ] FE: Страница `/pages/disease` — страница заболевания (сборка по реальной /lor/rinit) -- [ ] FE: Страница `/pages/doctors` — страница врачей с фильтрами и пагинацией +- [ ] Research: Страница заболевания perm.oclinica.ru/lor/rinit — порядок блоков, что отличается от главной +- [ ] Research: Страница врачей /lor/doctors — фильтры, сетка, пагинация +- [ ] FE: `/pages/home` — сборка блоков из Sprint 5 в порядке реальной страницы /lor +- [ ] FE: `/pages/disease` — страница заболевания по /lor/rinit +- [ ] FE: `/pages/doctors` — список врачей с фильтрами (mock) и пагинацией +- [ ] FE: `/pages/prices` — страница цен (Research: реальная структура таблицы) +- [ ] FE: `/pages/contacts` — контакты + карта +- [ ] FE: `/pages/doctor` — профиль врача - [ ] FE: Убрать `soon` у страниц в Sidebar - [ ] Docs: Обновить `docs/LLM_CONTEXT.md` -**Результат спринта:** 3 полные страницы задокументированы в брендбуке. +**Результат спринта:** Все страницы брендбука задокументированы (с mock-данными). --- -## Sprint 7 — Дублирование компонентов и блоков +## Sprint 7 — Авторизация (viewer / editor) -**Цель:** Возможность создавать дубли существующих компонентов и блоков для адаптации под конкретные страницы или разделы. +**Цель:** Реализовать систему ролей из ТЗ: `viewer` видит брендбук, `editor` видит кнопки дублирования. +Требует бэкенд (NestJS) и БД (PostgreSQL + Prisma). -### Концепция -Каждый задокументированный блок/компонент можно «продублировать» — получить копию с другим наполнением (другой врач, другое заболевание, другие тексты). Дубль хранится как вариант и отображается рядом с оригиналом. +### Задачи — бэкенд +- [ ] BE: Prisma-модель `User` (id, email, name, passwordHash, role: viewer/editor, createdAt) +- [ ] BE: Prisma миграция + seed (создать тестовых пользователей: 1 viewer, 1 editor) +- [ ] BE: NestJS модуль `auth` — JWT-авторизация, `/api/auth/login`, `/api/auth/me` +- [ ] BE: JWT-токен в httpOnly cookie (не localStorage) — ФТ-64 +- [ ] BE: Guard для защиты эндпоинтов по роли -### Задачи -- [ ] Design: Определить UI «дублирования» — кнопка Duplicate на каждой карточке блока/компонента -- [ ] FE: Компонент `DuplicateCard` — обёртка над блоком с пометкой «Вариант» и именем -- [ ] FE: На страницах компонентов (buttons, forms, cards) — кнопка «+ Создать вариант» -- [ ] FE: Секция «Варианты» на каждой странице блока — список дублей с метками -- [ ] FE: Статические варианты блоков (задаются в коде, не CRUD): например, Hero для раздела Аллергология -- [ ] Docs: Обновить `docs/LLM_CONTEXT.md` — описание системы вариантов +### Задачи — фронтенд +- [ ] FE: Страница `/login` — форма email + пароль + кнопка «Войти» — ФТ-61 +- [ ] FE: Редирект неавторизованных на `/login` — ФТ-60 +- [ ] FE: После входа — редирект обратно на запрошенную страницу — ФТ-62 +- [ ] FE: В шапке брендбука: имя пользователя, роль, кнопка «Выйти» — ФТ-63 +- [ ] FE: `editor` видит шапку с дополнительными действиями; `viewer` — только чтение -**Результат спринта:** Система вариантов/дублей для компонентов и блоков. +**Результат спринта:** Рабочая авторизация, два типа пользователей, защищённые маршруты. --- -## Sprint 8 — Дублирование страниц +## Sprint 8 — Реальные данные (интеграция с oclinica.ru) -**Цель:** Возможность создавать дубли страниц — шаблон одной страницы адаптируется под другой раздел клиники (ЛОР → Аллергология → Сурдология). +**Цель:** Подключить реальные данные с сайта клиники — врачи, новости, услуги, цены, отзывы. +Данные проксируются через NestJS с кэшем 15 минут — ИНТ-01-04. -### Концепция -Страница заболевания для ЛОР-раздела — это шаблон. Аллергология использует те же блоки, но с другим контентом. Брендбук показывает этот шаблон и его варианты. +### Задачи — бэкенд +- [ ] BE: Research — проверить доступные эндпоинты oclinica.ru (JSON:API Drupal или /node?_format=json) +- [ ] BE: NestJS модуль `oclinica` — HTTP-клиент к oclinica.ru API +- [ ] BE: Кэш TTL 15 минут (in-memory или Redis) — ИНТ-03 +- [ ] BE: Graceful degradation: если API недоступен — возврат mock-данных — ИНТ-04 +- [ ] BE: Эндпоинты: `/api/doctors`, `/api/news`, `/api/services`, `/api/prices`, `/api/reviews` -### Задачи -- [ ] Design: Определить структуру шаблона страницы — какие блоки обязательны, какие опциональны -- [ ] FE: На странице `/pages/disease` — секция «Варианты этой страницы» с примерами для разных разделов -- [ ] FE: Страница `/pages/home` — варианты для Аллергологии (другой Hero, другой CEO-текст) -- [ ] FE: Компонент `PageTemplate` — отображение структуры страницы как схемы блоков -- [ ] Docs: Обновить `docs/LLM_CONTEXT.md` — шаблоны страниц +### Задачи — фронтенд +- [ ] FE: Блок «Наши врачи» (`/blocks/doctors`) — реальные карточки врачей с фото +- [ ] FE: Блок «Новости» (`/blocks/news`) — реальные новости +- [ ] FE: Страницы (`/pages/*`) — замена mock-данных на реальные -**Результат спринта:** Шаблонная система страниц, варианты для разных разделов сайта. +**Результат спринта:** Брендбук показывает реальных врачей, новости, услуги с сайта клиники. --- -## Sprint 9 — Оставшиеся страницы: Цены, Контакты, Врач - -**Цель:** Задокументировать оставшиеся страницы. - -### Задачи -- [ ] Research: Реальная страница цен — структура таблицы, фильтры -- [ ] Research: Реальная страница контактов — карта, адреса клиник, часы, схема проезда -- [ ] Research: Страница профиля врача — структура, блоки -- [ ] FE: Страница `/pages/prices` -- [ ] FE: Страница `/pages/contacts` -- [ ] FE: Страница `/pages/doctor` -- [ ] Docs: Финальное обновление `docs/LLM_CONTEXT.md` - -**Результат спринта:** Все страницы брендбука задокументированы. +## Sprint 9 — Эксперименты: дублирование компонентов + +**Цель:** Реализовать систему создания дублей — `editor` может дублировать любой компонент/блок, +редактировать атрибуты и отправить на согласование. ФТ-50 – ФТ-56. + +### Задачи — бэкенд +- [ ] BE: Prisma-модель `ExperimentalComponent` (id, name, baseComponent, attributes JSON, status, authorId, createdAt, updatedAt) +- [ ] BE: Prisma миграция +- [ ] BE: NestJS модуль `components` — CRUD: `POST /api/components`, `GET /api/components`, `PATCH /api/components/:id`, `DELETE /api/components/:id` +- [ ] BE: Эндпоинт смены статуса: `PATCH /api/components/:id/status` (draft→review→approved) +- [ ] BE: Guard: мутирующие операции только для `editor` — ФТ-52, ФТ-55 + +### Задачи — фронтенд +- [ ] FE: Кнопка «Дублировать» на каждом компоненте/блоке (видна только `editor`) — ФТ-51 +- [ ] FE: Форма редактирования атрибутов дубля — ФТ-52: + - Текстовые поля (заголовки, описания) + - Color picker — только из токенов бренда (`--brand-*`) + - Выбор размера из допустимых значений + - Real-time preview при изменении + - Кнопки: «Сохранить как черновик», «Отмена» +- [ ] FE: Раздел `/variants/blocks` — список всех дублей компонентов — ФТ-50, ФТ-56: + - `viewer`: только approved + - `editor`: все (draft, review, approved) +- [ ] FE: Карточка дубля: название, автор, дата, статус, базовый компонент, превью — ФТ-56 +- [ ] FE: Управление статусом для `editor`: draft→review→approved, удаление draft — ФТ-54, ФТ-55 + +**Результат спринта:** Рабочая система создания и согласования дублей компонентов. --- ## Sprint 10 — Финальная полировка и деплой -**Цель:** Финальный релиз. +**Цель:** Финальный релиз — smoke-тест, адаптивность, деплой бэкенда. ### Задачи -- [ ] FE: Полный smoke-тест всего брендбука +- [ ] BE+FE: Полный smoke-тест всего брендбука (все роли, все страницы) - [ ] FE: LLM-блоки на всех страницах — проверка актуальности -- [ ] FE: Мобильная адаптация — финальная проверка -- [ ] Деплой: автоматический деплой через Gitea Actions → Vercel (при пуше в `main`) -- [ ] Design: Финальный ревью брендбука +- [ ] FE: Мобильная адаптация — финальная проверка (1440 / 768 / 375px) +- [ ] FE: Accessibility-аудит WCAG AA — особенно форма дублирования +- [ ] Деплой BE: выбрать хостинг для NestJS + PostgreSQL (Railway / Render / VPS клиники) +- [ ] Деплой: автоматический деплой через Gitea Actions → Vercel (push в `main`) +- [ ] Docs: Финальное обновление `docs/LLM_CONTEXT.md`, `DEPLOY.md` ### Текущий статус деплоя - **Фронтенд:** https://web-oclinica.vercel.app (Vercel Hobby) - **Команда деплоя:** `cd apps/web && vercel --prod --yes` +- **Бэкенд:** локально (Docker Compose), хостинг выбирается в Sprint 10 -**Результат спринта:** Брендбук полностью готов и задеплоен. +**Результат спринта:** Брендбук полностью готов, оба сервиса задеплоены, реальные данные, роли работают. --- ## Сводная таблица -| Спринт | Тема | Источник / Суть | -|--------|---------------------------------------|------------------------------------------------| -| 1 | Инициализация + Логотип | PDF брендбука | -| 2 | Цвета, Типографика, Оффлайн элементы | PDF брендбука + Oracal каталог | -| 3 | Кнопки и форм-контролы | CSS реального сайта | -| 4 | Карточки, бейджи, алерты | CSS реального сайта | -| 5 | ВСЕ блоки текущего сайта | Все блоки /lor одним спринтом | -| 6 | Страницы (сборки) | Главная + Заболевание + Врачи | -| 7 | Дублирование компонентов и блоков | UI для создания вариантов блоков | -| 8 | Дублирование страниц | Шаблоны страниц + варианты по разделам | -| 9 | Цены, Контакты, Врач | Оставшиеся страницы по реальному сайту | -| 10 | Финальная полировка | Smoke-тест + LLM-блоки + деплой | +| Спринт | Тема | Слой | Суть | +|--------|---------------------------------|---------------|--------------------------------------------------------| +| 1 | Инициализация + Логотип | FE | PDF брендбука, первая страница | +| 2 | Цвета, Типографика, Оффлайн | FE | PDF + Oracal каталог | +| 3 | Кнопки и форм-контролы | FE | CSS реального сайта | +| 4 | Карточки, бейджи, алерты | FE | CSS реального сайта | +| 5 | ВСЕ блоки сайта | FE | Все блоки /lor, mock-данные | +| 6 | Все страницы (сборки) | FE | Сборки из блоков, mock-данные | +| 7 | Авторизация (viewer / editor) | BE + FE | JWT, роли, login-страница, шапка с именем | +| 8 | Реальные данные | BE + FE | NestJS прокси → oclinica.ru, кэш 15 мин | +| 9 | Эксперименты (дубли) | BE + FE | Duplicate button, форма атрибутов, статусы, раздел | +| 10 | Финальная полировка | BE + FE | Smoke-тест, деплой бэкенда, адаптивность | ---