Скриншоты и поддержка документации

Скриншоты помогают кассирам быстрее находить нужные кнопки. Для каждого экрана документация ожидает три варианта изображения:

1. Windows.
2. Android - портретный режим.
3. Android - ландшафтный режим.

На страницах используется общий переключатель вкладок. Если пользователь выбрал, например, Android портрет, остальные блоки скриншотов с тем же переключателем тоже откроются в portrait-варианте.

Куда класть изображения

Папки для изображений:

static/img/rmk/windows/
static/img/rmk/android-portrait/
static/img/rmk/android-landscape/

Пример структуры:

static/
  img/
    rmk/
      windows/
        main-screen.png
        payment-buttons.png
      android-portrait/
        main-screen.png
        payment-buttons.png
      android-landscape/
        main-screen.png
        payment-buttons.png

Как вставить скриншот на страницу

На страницах используется компонент ScreenshotTabs.

import ScreenshotTabs from '@site/src/components/ScreenshotTabs';

<ScreenshotTabs name="main-screen" alt="Главный экран РМК" caption="Главный экран РМК" />

Компонент сам подставит пути:

• /img/rmk/windows/main-screen.png;
• /img/rmk/android-portrait/main-screen.png;
• /img/rmk/android-landscape/main-screen.png.

Как называть файлы

Используйте латиницу, маленькие буквы и дефисы:

• хорошо: main-screen.png;
• хорошо: settings-scanner.png;
• плохо: Главный экран.png;
• плохо: screen 1 final.png.

Рекомендуемый набор скриншотов

Для первого релиза документации достаточно:

Файл	Что показать
main-screen.png	Главный экран РМК
more-actions.png	Меню дополнительных операций
sales-line.png	Строка товара в чеке
payment-buttons.png	Кнопки оплаты
payment-card.png	Оплата картой
marking-codes.png	Список КМ
settings-main.png	Основные настройки РМК
settings-marking.png	Настройки Честного знака
settings-scanner.png	Настройки сканера
kkm-operations.png	Операции ККМ
close-day.png	Закрытие смены
error-example.png	Пример ошибки

Эти файлы уже созданы как 0-байтные плейсхолдеры в каждой платформенной папке. Нужно заменить их реальными PNG с теми же именами.

Как делать скриншоты

1. Откройте нужный экран приложения.
2. Уберите лишние персональные данные, если они видны.
3. Сделайте скриншот.
4. Обрежьте изображение так, чтобы было видно важную часть интерфейса.
5. Сохраните файл в нужную платформенную папку.
6. Вставьте изображение на нужную страницу.
7. Проверьте отображение через npm start.

Как обновлять инструкцию

1. Найдите страницу в docs-site/docs/rmk/.
2. Измените Markdown-текст.
3. Если добавили скриншот, положите его в static/img/rmk/.
4. Запустите локальную проверку:

cd docs-site
npm start

5. Откройте сайт в браузере.
6. Проверьте левое меню, ссылки, заголовки и изображения.
7. Перед публикацией выполните сборку:

npm run build

Как добавить новый раздел

1. Создайте файл в docs-site/docs/rmk/, например reports.md.
2. Добавьте заголовок:

---
id: reports
title: Отчеты
sidebar_position: 9
---

# Отчеты

3. Добавьте файл в docs-site/sidebars.js:

'rmk/reports',

4. Запустите npm start и проверьте меню.

Стиль инструкций

Для пользовательских инструкций используйте один формат:

• кратко описать назначение операции;
• указать путь в меню;
• дать пошаговые действия;
• описать ожидаемый результат;
• добавить блок Что проверить, если операция может завершиться ошибкой;
• добавить скриншот, если экран важный или сложный.

Пример:

## Проверить связь с ККТ

1. Откройте `Операции ККМ`.
2. Нажмите `Проверка связи`.
3. Дождитесь результата.

Ожидаемый результат: РМК показывает успешное подключение, индикатор ККТ становится зеленым.

Если проверка не прошла, проверьте питание ККТ, кабель и выбранный порт.