e9a8171252
- Sprint 7: Electronic patient card (MedcardScreen rewritten with hero passport, 5 tabs, bidirectional links with past appointments) - Sprint 8: 5th home variant "Светлая плитка" (HomeSplashScreen) - Sprint 9: Tweaks "Дизайн" section (Клод / Прозрачная карточка) with plate versions of Profile, Appts, Appt details and Medcard in screens-plate.jsx; fallback to Клод for other screens Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
683 lines
45 KiB
JavaScript
683 lines
45 KiB
JavaScript
// Описания экранов прототипа — для коллаборативного ревью.
|
||
// Читается двумя UI-слоями:
|
||
// 1. Плашка над телефоном в Tweaks-режиме «Описания»
|
||
// 2. Экран `docs` (список всех экранов с разворачивающимися описаниями)
|
||
|
||
export const SCREEN_DOCS = {
|
||
'home:cards': {
|
||
title: 'Главная 1 · Карточки',
|
||
category: 'Главная',
|
||
goal: 'Быстрый старт: записаться или увидеть ближайший приём. Приветствие + один доминирующий CTA + фасетная сетка входов.',
|
||
tasks: [
|
||
'Нажать «Записаться» и попасть в 4-шаговый флоу',
|
||
'Увидеть ближайший приём и открыть его детали',
|
||
'Выбрать специализацию (browse) или быстрое действие (телемед, тест слуха)',
|
||
'Прочитать статью врача',
|
||
],
|
||
rationale: [
|
||
'Бежевый градиент шапки — тёплый контакт вместо стерильного белого',
|
||
'Единственная доминирующая CTA тёмный teal + тень — видна сразу',
|
||
'Сетка 3×2 специализаций — browse-режим для пользователя, не знающего врача',
|
||
'Статьи горизонтально — низкий приоритет, не давят вертикально',
|
||
],
|
||
variants: 'В Tweaks «Главный экран»: Карточки / Лента / Таймлайн — три подхода к приоритизации контента',
|
||
},
|
||
'home:list': {
|
||
title: 'Главная 1 · Лента',
|
||
category: 'Главная',
|
||
goal: 'Утилитарная навигация: одна компактная карточка со всеми разделами как в iOS Settings. Для частых пользователей, которым не нужно browse.',
|
||
tasks: [
|
||
'Быстро открыть Медкарту / Анализы / Чат с одного тапа',
|
||
'Увидеть ближайший приём (компактно сверху)',
|
||
'Попасть на запись через первый выделенный пункт',
|
||
],
|
||
rationale: [
|
||
'Одна плотная карточка-список — минимум визуального шума',
|
||
'CTA «Записаться» выделена фоном primary-50 среди остальных',
|
||
'Бейджи справа для счётчиков (непрочитанные в чате)',
|
||
'Без градиентов и крупных CTA — подчёркнуто утилитарно',
|
||
],
|
||
},
|
||
'home:feed': {
|
||
title: 'Главная 1 · Таймлайн',
|
||
category: 'Главная',
|
||
goal: 'Пациент-центричная лента: восстановление, лекарства, ближайший приём — всё, что влияет на самочувствие сегодня. Для послеоперационных.',
|
||
tasks: [
|
||
'Увидеть прогресс восстановления с процентом и «что сегодня»',
|
||
'Отметить приём лекарства (one-tap)',
|
||
'Перейти к ближайшему приёму',
|
||
'Прочитать релевантные статьи',
|
||
],
|
||
rationale: [
|
||
'Первый блок — прогресс операции, а не CTA: для послеоперационных это важнее',
|
||
'Вопрос «Как Ваше самочувствие?» вместо нейтрального приветствия — эмпатия',
|
||
'Лекарство с кнопкой «Принял» — one-tap action',
|
||
'Accent-CTA (красная) для записи — выделяется на фоне тёплых карточек',
|
||
],
|
||
},
|
||
'home:timelineX': {
|
||
title: 'Главная 1 · Таймлайн X',
|
||
category: 'Главная',
|
||
goal: 'Для пациентов с хроническими заболеваниями: поддержание общего понимания «что со мной происходит», ежедневные задачи по здоровью, история наблюдения и лёгкий вход в связь с врачом или AI-помощником.',
|
||
tasks: [
|
||
'Увидеть текущее состояние: диагноз, стадия, ключевые метрики (дни без обострений, комплаенс)',
|
||
'Отметить выполненные ежедневные задачи (полоскание, витамины)',
|
||
'Увидеть запланированные процедуры и осмотры с датами',
|
||
'Быстро спросить AI-помощника или написать лечащему врачу',
|
||
'Пролистать историю наблюдения (визиты, обострения, курсы)',
|
||
'Записаться на следующий осмотр',
|
||
],
|
||
rationale: [
|
||
'Светлый health-status hero (primary-100 → warm-100) — спокойная справка о состоянии, не клинический приговор. Статус «Компенсированная форма» с зелёной точкой + success-цветом сигнализирует «всё стабильно».',
|
||
'Задачи разделены на daily (с streak-счётчиком и огнём 🔥) и scheduled (с датой) — разная природа действий',
|
||
'Промо-блок связи (AI + врач) вынесен отдельным блоком с градиентной AI-карточкой — снять психологический барьер обращения',
|
||
'Вертикальный таймлайн визитов с инициалами врача и цветовой семантикой по типу (диагноз/процедура/терапия/обострение/осмотр) — continuity of care одним взглядом',
|
||
'Рекомендации emoji-карточками горизонтально — лёгкое lifestyle-чтение, не давит на верхние задачи',
|
||
],
|
||
},
|
||
'home:splash': {
|
||
title: 'Главная 1 · Светлая плитка',
|
||
category: 'Главная',
|
||
goal: 'Приветственный дом с крупной типографикой и тёплыми карточками. Фокус на первой записи на приём: ближайшая запись → мои приёмы → запись новой. Ниже — услуги и полезная информация 2×N.',
|
||
tasks: [
|
||
'Увидеть персональное приветствие и открыть поиск врача',
|
||
'Попасть в ближайшую запись (фото врача, дата, время, локация, «Активно»)',
|
||
'Перейти в «Мои приёмы» из контекстной карточки',
|
||
'Нажать тёплый CTA «Записаться на приём → Выбрать удобное время»',
|
||
'Открыть связаться с врачом в чате одним тапом',
|
||
'Пролистать полезную информацию (статья дня, все статьи, цены, контакты)',
|
||
],
|
||
rationale: [
|
||
'Минималистичная шапка (аватар + «Главная» + колокольчик) вместо градиента — акцент сразу на h1-приветствии',
|
||
'Ближайшая запись как выделенная primary-50 карточка с caps-label «БЛИЖАЙШАЯ ЗАПИСЬ» + «★ Активно» — ясный статус и сканируемая структура',
|
||
'Чипы даты/времени белым поверх primary-50 — читаемость и тактильная приглашённость к нажатию',
|
||
'Тёплая warm-100 карточка записи с декоративными кругами и белой вложенной кнопкой — единственный визуальный «горячий» CTA на экране, притягивает глаз',
|
||
'Сетки 2×1 и 2×2 с одинаковыми тайлами (круглая teal-иконка, sub/main тексты) — ритмичная, предсказуемая плитка, легко сканируется',
|
||
'Все 8 CTA-карточек видны без скролла или в 1 свайп — плотная, но не перегруженная сетка',
|
||
],
|
||
variants: 'В Tweaks «Главный экран»: Карточки / Лента / Таймлайн / Таймлайн X / Светлая плитка — разные приоритеты контента.',
|
||
},
|
||
'home-v2': {
|
||
title: 'Главная 2',
|
||
category: 'Главная',
|
||
goal: 'Search-first layout: универсальная поисковая строка вверху — врач, симптом, услуга, дата. Для пользователя, который точно знает, что ищет.',
|
||
tasks: [
|
||
'Ввести симптом или ФИО врача → получить релевантный результат',
|
||
'Попасть в Контакты или Цены через тайлы',
|
||
'Увидеть статистику клиники (формирование доверия)',
|
||
],
|
||
rationale: [
|
||
'Поисковая строка вверху + AI-бейдж — сигнал «умный поиск»',
|
||
'Тайлы Контакты/Цены/Анализы/Восстановление — частые разделы в один тап',
|
||
'Градиентная карточка статистики — эмоциональный контакт с клиникой',
|
||
'Бордер primary-300 на stats-карточке — демонстрация «живого» цвета в палитре Бриз',
|
||
],
|
||
},
|
||
'doctors': {
|
||
title: 'Врачи · список',
|
||
category: 'Врачи и запись',
|
||
goal: 'Список всех врачей клиники с поиском, фильтрами и тремя вариантами представления карточек.',
|
||
tasks: [
|
||
'Найти врача по ФИО или специализации',
|
||
'Отфильтровать по «свободно сегодня», «кандидаты наук», «детские»',
|
||
'Открыть карточку врача → записаться',
|
||
],
|
||
rationale: [
|
||
'Пиллы-фильтры горизонтально скроллятся — помещаются все на узких экранах',
|
||
'Три варианта карточек (rich/list/photo) — под разные привычки сканирования',
|
||
'Пиллы вынесены из карточки — общий фильтр для всего списка',
|
||
],
|
||
variants: 'В Tweaks «Карточки врачей»: Карточки+ / Список / Плитка',
|
||
},
|
||
'doctor': {
|
||
title: 'Карточка врача',
|
||
category: 'Врачи и запись',
|
||
goal: 'Подробная карточка врача: регалии, рейтинг, цены, расписание, отзывы. Всё для решения «записаться — не записаться».',
|
||
tasks: [
|
||
'Увидеть аватар, имя, специализацию, рейтинг, стоимость',
|
||
'Прочитать образование и специализацию',
|
||
'Посмотреть расписание (таб)',
|
||
'Прочитать отзывы (таб)',
|
||
'Нажать «Записаться» внизу → сразу на выбор времени',
|
||
],
|
||
rationale: [
|
||
'Три равных stat-карточки: опыт, рейтинг, цена — ключевая инфа сразу',
|
||
'Сегментед-контрол для вкладок — компактно, iOS-паттерн',
|
||
'Фиксированная CTA внизу с backdrop-blur — не теряется при прокрутке',
|
||
'Чип «К.м.н.» warm-цветом — выделяет научную степень',
|
||
],
|
||
},
|
||
'booking-specs': {
|
||
title: 'Запись: специализация',
|
||
category: 'Флоу записи',
|
||
goal: 'Шаг 1 из 4: выбор направления. Для пользователей, которые не знают конкретного врача.',
|
||
tasks: [
|
||
'Переключиться между «Взрослому / Ребёнку / Онлайн»',
|
||
'Выбрать специализацию из сетки 2×2',
|
||
'Перейти к списку врачей специализации',
|
||
],
|
||
rationale: [
|
||
'Сегментед 3 варианта сразу — быстрый split аудитории',
|
||
'Крупные карточки специализаций с иконкой, названием, кол-вом врачей, минимальной ценой',
|
||
'«Шаг 1 из 4» в шапке — прогресс флоу виден',
|
||
],
|
||
},
|
||
'booking-doctor': {
|
||
title: 'Запись: выбор врача',
|
||
category: 'Флоу записи',
|
||
goal: 'Шаг 2 из 4: список врачей выбранной специализации с поиском и фильтрами.',
|
||
tasks: [
|
||
'Найти конкретного врача по ФИО',
|
||
'Отфильтровать по «свободно сегодня», «детские»',
|
||
'Выбрать врача → перейти к выбору времени',
|
||
],
|
||
rationale: [
|
||
'Та же логика, что и в tab «Врачи», но filter по специализации уже применён',
|
||
'Rich-карточка с ближайшим временем приёма — дополнительный фильтр «когда»',
|
||
],
|
||
},
|
||
'booking-time': {
|
||
title: 'Запись: дата и время',
|
||
category: 'Флоу записи',
|
||
goal: 'Шаг 3 из 4: выбор даты и времени. Ключевой шаг флоу — тут пользователь принимает финальное решение.',
|
||
tasks: [
|
||
'Увидеть выбранного врача (повтор сверху)',
|
||
'Выбрать дату из горизонтального скролла (7 дней)',
|
||
'Выбрать время из трёх групп (Утро/День/Вечер)',
|
||
'Нажать «Выбрать · [дата], [время]» → подтверждение',
|
||
],
|
||
rationale: [
|
||
'Дата как горизонтальные тайлы 54px — mobile-friendly, помещаются 5-6 на экране',
|
||
'Слоты в сетке 4 колонки — легко сканировать',
|
||
'Занятые слоты disabled с зачёркиванием — чтобы пользователь не пробовал',
|
||
'CTA закреплена снизу с текущим выбором — пользователь всегда знает, что выберет',
|
||
],
|
||
},
|
||
'booking-confirm': {
|
||
title: 'Запись: подтверждение',
|
||
category: 'Флоу записи',
|
||
goal: 'Шаг 4 из 4: финальный обзор перед подтверждением. Выбор формата (очно/онлайн) и комментарий для врача.',
|
||
tasks: [
|
||
'Проверить врача, дату, время, адрес',
|
||
'Выбрать очно или онлайн',
|
||
'Написать комментарий для врача (симптомы)',
|
||
'Увидеть стоимость',
|
||
'Подтвердить запись',
|
||
],
|
||
rationale: [
|
||
'Вся инфа в одной карточке-таблице — одним взглядом',
|
||
'Формат приёма — 2 крупных варианта, выбор чёткий',
|
||
'Комментарий опциональный, но есть — врач лучше готовится',
|
||
'Warm-плашка про отмену за 3 часа — ожидание поставлено сразу',
|
||
],
|
||
},
|
||
'booking-success': {
|
||
title: 'Запись: успех',
|
||
category: 'Флоу записи',
|
||
goal: 'Визуальное подтверждение успешной записи с ключевой информацией для встречи.',
|
||
tasks: [
|
||
'Убедиться, что запись состоялась',
|
||
'Запомнить адрес и кабинет',
|
||
'Перейти к «Моим приёмам» или на главную',
|
||
],
|
||
rationale: [
|
||
'Полноэкранный modal (таббар скрыт) — фокус на событии',
|
||
'Большая primary-галочка с ореолом — эмоциональный момент',
|
||
'Адрес выделен отдельно — пользователь часто возвращается смотреть',
|
||
'Два выхода: appts (для чекинга) и главная (для продолжения)',
|
||
],
|
||
},
|
||
'appts': {
|
||
title: 'Мои приёмы',
|
||
category: 'Приёмы и результаты',
|
||
goal: 'Предстоящие и прошедшие приёмы. Основная точка контроля для активных пациентов.',
|
||
tasks: [
|
||
'Переключиться между предстоящими и прошедшими',
|
||
'Открыть детали приёма',
|
||
'Записаться на новый приём (CTA внизу)',
|
||
],
|
||
rationale: [
|
||
'Сегментед с счётчиком предстоящих — важно знать, сколько запланировано',
|
||
'Разный фон карточек: предстоящие — градиент primary-100, прошедшие — белый',
|
||
'Чип «Заключение» на прошедших приёмах с готовым документом',
|
||
],
|
||
},
|
||
'appt': {
|
||
title: 'Детали приёма',
|
||
category: 'Приёмы и результаты',
|
||
goal: 'Полная карточка приёма: дата/время, врач, адрес, контакты, заключение с диагнозом, назначениями и связкой с медкартой (для прошедших).',
|
||
tasks: [
|
||
'Увидеть дату, время, тип приёма',
|
||
'Открыть карточку врача',
|
||
'Посмотреть адрес на карте',
|
||
'Позвонить в клинику',
|
||
'Отменить или перенести (для предстоящих)',
|
||
'Прочитать заключение, диагноз с кодом МКБ, назначения (для прошедших)',
|
||
'Перейти в электронную карту или к результатам обследований',
|
||
],
|
||
rationale: [
|
||
'Крупное время 42px monospace-narrow — главное, что пациент ищет',
|
||
'Адрес отдельной секцией с кнопкой карты — частый re-check',
|
||
'Кнопка «Отменить» приглушённым danger — чтобы случайно не нажать',
|
||
'Перенос primary — предполагаемое действие',
|
||
'Блок заключения: диагноз+код МКБ, conclusion-текст, список назначений с иконкой — та же структура, что в «Посещениях» медкарты',
|
||
'CTA «В медкарте» и «Результаты» — двунаправленная связь с электронной картой',
|
||
],
|
||
},
|
||
'results': {
|
||
title: 'Анализы и обследования',
|
||
category: 'Приёмы и результаты',
|
||
goal: 'Список всех анализов и обследований. Часть медкарты, но с фокусом на конкретные документы.',
|
||
tasks: [
|
||
'Увидеть все результаты с датой и врачом',
|
||
'Отфильтровать по типу',
|
||
'Открыть результат (аудио/эндоскопия/лаб)',
|
||
],
|
||
rationale: [
|
||
'Статус «Готово» / «В работе» — чип цветом справа',
|
||
'Разные иконки для типов результата (audio/image/lab) — быстрая семантика',
|
||
'Pending-результаты приглушены opacity: .7 — нельзя открыть',
|
||
],
|
||
},
|
||
'result-audio': {
|
||
title: 'Аудиограмма',
|
||
category: 'Приёмы и результаты',
|
||
goal: 'Экран просмотра аудиограммы: график, заключение сурдолога, рекомендация.',
|
||
tasks: [
|
||
'Увидеть график слуха для двух ушей',
|
||
'Прочитать заключение',
|
||
'Получить рекомендацию по контролю',
|
||
'Скачать PDF',
|
||
],
|
||
rationale: [
|
||
'SVG-график с сеткой, легендой (правое/левое), зелёной зоной «норма» — стандарт аудиологии',
|
||
'Круги + сплошная линия для правого уха, крестики + пунктир для левого — международная нотация',
|
||
'Рекомендация выделена primary-50 фоном — подсказка действия',
|
||
],
|
||
},
|
||
'result': {
|
||
title: 'Эндоскопия носоглотки',
|
||
category: 'Приёмы и результаты',
|
||
goal: 'Просмотр результата эндоскопического обследования: снимки, диагноз, рекомендации.',
|
||
tasks: [
|
||
'Увидеть кто и когда провёл исследование',
|
||
'Просмотреть 4 снимка (сетка 2×2)',
|
||
'Открыть любой снимок в полноэкранном режиме',
|
||
'Прочитать диагноз и заключение',
|
||
'Выполнить рекомендации (нумерованный список)',
|
||
'Скачать PDF или обсудить с врачом',
|
||
],
|
||
rationale: [
|
||
'CSS-мокапы эндоскопических снимков: радиальный градиент + блик — имитация медицинского изображения',
|
||
'Диагноз отдельной карточкой с чипом warm — самое важное',
|
||
'Рекомендации нумерованы — чёткий порядок действий',
|
||
'Полноэкранный просмотр с точками-навигацией — удобный UX для галерей',
|
||
],
|
||
},
|
||
'recovery': {
|
||
title: 'Восстановление',
|
||
category: 'Здоровье',
|
||
goal: 'Трекер восстановления после операции: прогресс по дням, лекарства, контрольные осмотры.',
|
||
tasks: [
|
||
'Увидеть процент восстановления',
|
||
'Отметить приём лекарства',
|
||
'Увидеть план восстановления по дням (таймлайн)',
|
||
'Связаться с хирургом в чате (chat:doctor-syndaev)',
|
||
],
|
||
rationale: [
|
||
'Тёмная primary-карточка вверху — «важно», вне обычной иерархии',
|
||
'Прогресс-бар на белом фоне контрастно на тёмном',
|
||
'Лекарства с счётчиком доз (2/4) — пользователь видит прогресс',
|
||
'Таймлайн с линией между шагами, галочки для сделанных, активный день с кольцом',
|
||
],
|
||
},
|
||
'audiotest': {
|
||
title: 'Тест слуха',
|
||
category: 'Здоровье',
|
||
goal: 'Трёхминутный тест слуха в приложении. Скрининг, а не диагноз.',
|
||
tasks: [
|
||
'Прочитать инструкции (наушники, тихое место, не торопиться)',
|
||
'Пройти тест (кнопка «Слышу» при каждом тоне)',
|
||
'Увидеть результат по каждому уху',
|
||
'Записаться к сурдологу, если нужно',
|
||
],
|
||
rationale: [
|
||
'Три стадии: intro → test → done — чёткая структура',
|
||
'Крупная анимированная волна (pulse) — объект фокуса внимания',
|
||
'Большая кнопка «Слышу» — one-tap действие, выбор быстрый',
|
||
'В результате разные цвета по ушам (success/warning) — сразу видно где норма',
|
||
'CTA «Записаться к сурдологу» — естественное продолжение',
|
||
],
|
||
},
|
||
'chat': {
|
||
title: 'Чаты · список',
|
||
category: 'Коммуникации',
|
||
goal: 'Центр всех коммуникаций с клиникой: AI-помощник, врач, администратор.',
|
||
tasks: [
|
||
'Открыть чат с AI-помощником для быстрого вопроса',
|
||
'Продолжить диалог с врачом',
|
||
'Написать в регистратуру',
|
||
'Начать новый чат с другим врачом',
|
||
],
|
||
rationale: [
|
||
'AI выделен featured-карточкой с градиентом и AI-бейджем — показать как новая возможность',
|
||
'Остальные в обычном списке с аватаром, online-точкой, бейджем непрочитанных',
|
||
'Непрочитанные выделены fg-1 текстом и accent-бейджем — сразу видно',
|
||
'Плашка снизу: чат с врачом ограничен 14 днями — ожидания пользователя правильные',
|
||
],
|
||
},
|
||
'chat:ai': {
|
||
title: 'Чат: AI-помощник',
|
||
category: 'Коммуникации',
|
||
goal: 'Приватный диалог с AI-помощником клиники: напоминания, помощь с записью, объяснение результатов.',
|
||
tasks: [
|
||
'Задать вопрос о расписании или операции',
|
||
'Получать напоминания о лекарствах',
|
||
'Подтверждать приём препарата',
|
||
'Использовать suggested-reply чипсы для быстрых ответов',
|
||
],
|
||
rationale: [
|
||
'Сообщения от AI — gradient primary-50 → primary-100 + бордер primary-200 — субтильное отличие от человека',
|
||
'Suggested-replies над инпутом — снижает барьер начала диалога',
|
||
'Плейсхолдер «Спросите что-нибудь» вместо «Сообщение» — AI-контекст',
|
||
],
|
||
},
|
||
'chat:doctor-syndaev': {
|
||
title: 'Чат: врач',
|
||
category: 'Коммуникации',
|
||
goal: 'Приватный чат с лечащим врачом. Продолжение консультации после приёма.',
|
||
tasks: [
|
||
'Рассказать о самочувствии между приёмами',
|
||
'Уточнить режим лечения',
|
||
'Согласовать перенос приёма',
|
||
'Нажать кнопку видеозвонка для срочной консультации',
|
||
],
|
||
rationale: [
|
||
'Статус «Онлайн · отвечает 5 мин» — ожидания пациента поставлены',
|
||
'Кнопка video в хедере только у врача — эскалация в видеозвонок',
|
||
'Обычные iOS-bubbles — привычный паттерн',
|
||
],
|
||
},
|
||
'chat:operator': {
|
||
title: 'Чат: администратор',
|
||
category: 'Коммуникации',
|
||
goal: 'Общение с регистратурой: справки, переносы, оплата, документы.',
|
||
tasks: [
|
||
'Заказать медицинскую справку',
|
||
'Перенести приём',
|
||
'Уточнить счёт к оплате',
|
||
'Позвонить по кнопке в хедере',
|
||
],
|
||
rationale: [
|
||
'Часы работы в подписи — пользователь знает, когда ждать ответ',
|
||
'Кнопка phone в хедере — альтернатива чату',
|
||
'Иконка 📞 на аватаре — тип коммуникации визуально закодирован',
|
||
],
|
||
},
|
||
'profile': {
|
||
title: 'Профиль',
|
||
category: 'Сервис',
|
||
goal: 'Профиль пациента с группировкой по темам: здоровье, оплата, клиника, настройки.',
|
||
tasks: [
|
||
'Увидеть имя, возраст, телефон',
|
||
'Перейти к медкарте, анализам, лекарствам',
|
||
'Проверить способы оплаты и бонусы',
|
||
'Показать QR пациента',
|
||
],
|
||
rationale: [
|
||
'Градиентная карточка профиля с аватаром и QR-чипом — личное пространство',
|
||
'Секции-группы как в iOS Settings — знакомый паттерн',
|
||
'Бейджи на некоторых пунктах (Серебро у бонусов) — достижения',
|
||
],
|
||
},
|
||
'qr': {
|
||
title: 'QR пациента',
|
||
category: 'Сервис',
|
||
goal: 'QR-код пациента для быстрой идентификации на ресепшене. Полноэкранный modal.',
|
||
tasks: [
|
||
'Показать QR сотруднику',
|
||
'Увидеть номер пациента',
|
||
],
|
||
rationale: [
|
||
'Тёмный primary-gradient фон — пользователь воспринимает как важный билет',
|
||
'Большой QR на белой карточке — максимальный контраст для сканера',
|
||
'Таббар скрыт — фокус на QR',
|
||
'Плашка внизу: код обновляется каждые 60 сек — сигнал безопасности',
|
||
],
|
||
},
|
||
'telemed': {
|
||
title: 'Видеозвонок',
|
||
category: 'Коммуникации',
|
||
goal: 'Видеозвонок с врачом. Full-screen экран «в разговоре».',
|
||
tasks: [
|
||
'Вести разговор с врачом',
|
||
'Свернуть (кнопка вниз)',
|
||
'Завершить звонок (красная кнопка)',
|
||
'Переключить микрофон / видео / чат',
|
||
],
|
||
rationale: [
|
||
'Тёмный фон — стандартная метафора видеозвонка',
|
||
'Self-preview окошко в углу — пользователь видит себя',
|
||
'Красный таймер с мигающей точкой — идёт запись/звонок',
|
||
'Крупные контрольные кнопки снизу — критичные действия большими хит-зонами',
|
||
],
|
||
},
|
||
'medcard': {
|
||
title: 'Электронная карта пациента',
|
||
category: 'Здоровье',
|
||
goal: 'Полная амбулаторная карта в телефоне: паспорт пациента, аллергии, диагнозы, история посещений с заключениями, активные назначения, прививки, операции.',
|
||
tasks: [
|
||
'Увидеть паспорт: ФИО, ДР, № карты, полис, группа крови',
|
||
'Проверить аллергии и их реакции перед назначением препарата',
|
||
'Просмотреть хронические диагнозы с кодом МКБ и лечащим врачом',
|
||
'Открыть посещение → попасть в детали приёма с заключением и назначениями',
|
||
'Увидеть активный курс лекарств и перейти к расписанию приёма',
|
||
'Просмотреть историю прививок с партиями и операций с исходами',
|
||
],
|
||
rationale: [
|
||
'Hero-блок с паспортом + QR + № карты — сразу понятен контекст («моя карта»)',
|
||
'Сегмент-табы (Общее / Посещения / Назначения / Прививки / Операции) — разделяем 5 разных типов данных без вертикального скролла в одну ленту',
|
||
'Аллергии в первой секции Общего — критическая инфа видна без переключения табов',
|
||
'Чипсы severity (Опасная/Средняя/Лёгкая) — быстрое считывание риска',
|
||
'Каждое посещение — тап-область с заключением и связью «Открыть» на карточку приёма (двунаправленная навигация)',
|
||
'Назначения разделены на активные (с крупной иконкой-таблеткой) и завершённые (компактный список) — фокус на актуальном',
|
||
'Операции с плашкой «Исход» в success-tone — позитивное закрытие эпизода',
|
||
],
|
||
variants: 'Данные пациента едины с Профилем (patient в data.js) — изменение в карте отражается в шапке Профиля, QR и шапке Приёмов.',
|
||
},
|
||
'notifications': {
|
||
title: 'Уведомления',
|
||
category: 'Сервис',
|
||
goal: 'Лента уведомлений: напоминания, готовые заключения, сообщения, акции.',
|
||
tasks: [
|
||
'Просмотреть последние уведомления',
|
||
'Увидеть время каждого',
|
||
],
|
||
rationale: [
|
||
'Разные tint (primary/warning/warm) по типу уведомления — семантика цветом',
|
||
'Первая строка с временем справа — стандарт ленты',
|
||
],
|
||
},
|
||
'articles': {
|
||
title: 'Статьи врачей · список',
|
||
category: 'Информация',
|
||
goal: 'Список всех статей врачей. Образовательный контент, формирует доверие к клинике.',
|
||
tasks: [
|
||
'Отфильтровать по тегу (Дети / Операции / Беременность / Слух)',
|
||
'Открыть статью',
|
||
],
|
||
rationale: [
|
||
'Крупные hero-карточки с emoji и лидом — стимулируют нажатие',
|
||
'Теги как pill-фильтры сверху — выбор по интересу',
|
||
],
|
||
},
|
||
'article': {
|
||
title: 'Статья врача',
|
||
category: 'Информация',
|
||
goal: 'Детальная статья с разметкой: лид, подзаголовки, списки, callout-плашки, карточка автора.',
|
||
tasks: [
|
||
'Прочитать статью',
|
||
'Увидеть автора с контактом',
|
||
'Записаться к автору',
|
||
'Открыть связанные статьи',
|
||
],
|
||
rationale: [
|
||
'Hero с заголовком занимает 72% ширины, emoji 82px справа — журнальный ритм',
|
||
'Плавающие back/bookmark кнопки поверх hero — не мешают картинке',
|
||
'Callout разных tone (danger/warn/info) — визуально маркированные предупреждения',
|
||
'Author card + CTA записи к автору — конверсия из чтения в действие',
|
||
],
|
||
},
|
||
'search': {
|
||
title: 'Поиск',
|
||
category: 'Информация',
|
||
goal: 'Универсальный поиск по врачам, услугам, симптомам, статьям, приёмам.',
|
||
tasks: [
|
||
'Ввести ФИО / симптом / услугу / дату',
|
||
'Получить релевантные результаты по типам',
|
||
'Использовать предложенные чипы-запросы или симптомы',
|
||
'Перейти на выбранный результат',
|
||
],
|
||
rationale: [
|
||
'Autofocus на инпуте — сразу можно печатать',
|
||
'Пустое состояние с популярными запросами — помогает начать',
|
||
'Группировка результатов по типам (Врачи, Услуги, Симптомы…) — лёгкий скан',
|
||
'Date-detection (сегодня, завтра, апр) показывает приёмы — smart-поведение',
|
||
],
|
||
},
|
||
'contacts': {
|
||
title: 'Контакты',
|
||
category: 'Информация',
|
||
goal: 'Адреса клиник, телефон, часы работы, маршруты.',
|
||
tasks: [
|
||
'Позвонить в клинику',
|
||
'Написать в чат',
|
||
'Увидеть адреса с мокапом здания и карты',
|
||
'Построить маршрут',
|
||
],
|
||
rationale: [
|
||
'Primary-darker карточка сверху с телефоном 26px narrow — главный контакт',
|
||
'CSS-мокапы здания и карты для каждого адреса — прототипное решение без реальных изображений',
|
||
'Кнопки «Маршрут / позвонить / видео» в каждой карточке — действия по локации',
|
||
],
|
||
},
|
||
'prices': {
|
||
title: 'Цены',
|
||
category: 'Информация',
|
||
goal: 'Прайс-лист всех услуг с поиском, категориями, группировкой, диапазоном цен.',
|
||
tasks: [
|
||
'Найти услугу по названию',
|
||
'Отфильтровать по категории',
|
||
'Увидеть сгруппированные цены',
|
||
'Записаться прямо с услуги',
|
||
],
|
||
rationale: [
|
||
'Сводка найдено / от-до — сразу понятен разброс цен',
|
||
'Категории как pill-фильтры, группировка в карточках',
|
||
'Цены narrow-шрифтом — акцент на числе',
|
||
],
|
||
},
|
||
'dev-colors': {
|
||
title: 'DEV · Палитра',
|
||
category: 'DEV',
|
||
goal: 'Служебный экран для разработчиков. Все цвета дизайн-системы с hex, ролями, применением.',
|
||
tasks: [
|
||
'Увидеть hex любой CSS-переменной',
|
||
'Переключать палитру в Tweaks и наблюдать изменения',
|
||
'Понять, где используется конкретный цвет',
|
||
'Перейти к примерам применения',
|
||
],
|
||
rationale: [
|
||
'Ключевая полоса из 8 цветов сверху — палитра видна сразу',
|
||
'Группировка по ролям (primary / warm / accent / status / text / surfaces)',
|
||
'Каждая строка: свотч + имя + css-var + hex + описание — полная информация',
|
||
'Подпись «динамически» у групп, меняющихся при переключении палитры',
|
||
],
|
||
},
|
||
'dev-examples': {
|
||
title: 'DEV · Примеры',
|
||
category: 'DEV',
|
||
goal: 'Готовые компоненты дизайн-системы с указанием CSS-переменных, которые они используют.',
|
||
tasks: [
|
||
'Посмотреть, как выглядит любая кнопка/чип/карточка',
|
||
'Прочитать, какие vars внутри',
|
||
'Сверить с экраном DEV · Палитра',
|
||
],
|
||
rationale: [
|
||
'Каждый пример помечен VarTag-монокодами',
|
||
'Секции по типам: кнопки / чипы / поверхности / статусы / текст / аватары / формы / тени',
|
||
],
|
||
},
|
||
'docs': {
|
||
title: 'Документация',
|
||
category: 'DEV',
|
||
goal: 'Единый дизайн-гайд прототипа. Список всех экранов с описаниями — цели, задачи, design-решения.',
|
||
tasks: [
|
||
'Просмотреть все экраны по категориям',
|
||
'Развернуть описание экрана inline',
|
||
'Перейти к реальному экрану для интерактивного просмотра',
|
||
],
|
||
rationale: [
|
||
'Группировка по категориям облегчает навигацию для ревью',
|
||
'Описания collapsed-by-default, чтобы список оставался обозримым',
|
||
'Кнопка «Открыть экран» на каждой карточке — быстрый переход в демо-режим',
|
||
'Работает в паре с toggle «Описания» в Tweaks (плашка над телефоном)',
|
||
],
|
||
},
|
||
};
|
||
|
||
// Резолвер: по текущему screenId и ctx отдаёт правильное описание.
|
||
// Учитывает: варианты главной (homeVariant), compound-маршруты (doctor:id,
|
||
// appt:id, result:id, article:id, chat:id).
|
||
export function getScreenDoc(screenId, ctx) {
|
||
if (!screenId) return null;
|
||
const parts = screenId.split(':');
|
||
const base = parts[0];
|
||
|
||
// home с вариантом: home:cards / home:list / home:feed
|
||
if (base === 'home') {
|
||
const v = ctx?.homeVariant || 'cards';
|
||
return SCREEN_DOCS[`home:${v}`] || SCREEN_DOCS['home:cards'];
|
||
}
|
||
// chat с конкретным id (ai / doctor-syndaev / operator) — отдельные описания
|
||
if (base === 'chat' && parts[1]) {
|
||
return SCREEN_DOCS[screenId] || SCREEN_DOCS['chat'];
|
||
}
|
||
// Generic compound: doctor:xxx → doctor, article:xxx → article и т.д.
|
||
const compounds = ['doctor', 'appt', 'result', 'article', 'booking-doctor', 'booking-time', 'booking-confirm'];
|
||
if (compounds.includes(base)) {
|
||
return SCREEN_DOCS[base] || null;
|
||
}
|
||
return SCREEN_DOCS[screenId] || SCREEN_DOCS[base] || null;
|
||
}
|
||
|
||
// Для экрана «Документация»: список всех уникальных описаний, сгруппированных
|
||
// по категориям. Возвращает упорядоченный массив для рендера.
|
||
export function getAllDocs() {
|
||
const ORDER = ['Главная', 'Врачи и запись', 'Флоу записи', 'Приёмы и результаты', 'Здоровье', 'Коммуникации', 'Информация', 'Сервис', 'DEV'];
|
||
const groups = new Map();
|
||
for (const [key, doc] of Object.entries(SCREEN_DOCS)) {
|
||
if (!groups.has(doc.category)) groups.set(doc.category, []);
|
||
groups.get(doc.category).push({ key, ...doc });
|
||
}
|
||
return ORDER.filter(c => groups.has(c)).map(c => ({ category: c, items: groups.get(c) }));
|
||
}
|
||
|
||
// screenId для навигации из docs screen. Учитывает compound-маршруты.
|
||
export function resolveRouteForDoc(key) {
|
||
// home:cards → переводим в home + homeVariant cards (но через простой nav.set
|
||
// мы не можем поменять homeVariant — это в Tweaks). Поэтому home:* → 'home'.
|
||
if (key.startsWith('home:')) return 'home';
|
||
// chat:ai / chat:doctor-syndaev / chat:operator — полноценные маршруты
|
||
if (key.startsWith('chat:')) return key;
|
||
// generic compounds: нужно подставить пример id
|
||
if (key === 'doctor') return 'doctor:syndaev';
|
||
if (key === 'appt') return 'appt:a1';
|
||
if (key === 'result') return 'result:r2';
|
||
if (key === 'article') return 'article:otitis-kids';
|
||
if (key === 'booking-doctor') return 'booking-doctor:ent';
|
||
if (key === 'booking-time') return 'booking-time:syndaev';
|
||
if (key === 'booking-confirm') return 'booking-confirm:syndaev:1:16:00';
|
||
return key;
|
||
}
|