ResultPanel + AnalysisLayout - Двухколоночный интерфейс

Дата: 2026-05-05

Созданные компоненты:

ResultPanel.jsx (6.8 KB) - панель результатов с behavioral profile
AnalysisLayout.jsx (1.8 KB) - двухколоночный layout

ResultPanel - Функционал:

Блок срочности (с цветами)

КРИТИЧЕСКАЯ: #ff4d00 (красный)
ВЫСОКАЯ: #ff9f1a (оранжевый)
УМЕРЕННАЯ: #ffd166 (желтый)
НИЗКАЯ: #238636 (зеленый)

Behavioral Profile карточки (5 типов):

РАС (красная #ff4d00) - 4 пункта поведения
Эпилепсия (оранжевая #ff9f1a) - 4 пункта рисков
Велосипед (синяя #58a6ff) - радиус увеличен 3-5x
Самокат (синяя #58a6ff) - радиус увеличен 2-3x
Не умеет плавать (красная #ff4d00) - критично проверить водоёмы

Grid layout: auto-fit, minWidth 280px Hover эффект: translateY(-2px) + shadow

Секции:

Психотип с рекомендациями (4 пункта)
Немедленные действия (топ-3, нумерованные)
Зоны с приоритетом (топ-5, с оценками)
Ключевые объекты (теги)
Прогноз поведения

AnalysisLayout - Двухколоночный layout:

Структура:

Левая колонка: CaseForm (Steps 1-5)
Правая колонка: MapView (sticky, top: 24px)
Снизу на всю ширину: ResultPanel

Grid: 1fr 1fr, gap 24px, max-width 1800px

Адаптивность:

< 1400px: одна колонка
< 768px: уменьшенные отступы

Placeholder карты до анализа:

Пунктирная рамка
Иконка + текст подсказки

Цветовая палитра ЦОУ:

Фоны: #0a0c0f, #161b22, #1c2128 Границы: #21262d, #30363d Текст: #e6edf3, #8b949e Акценты: #ff4d00, #ff9f1a, #ffd166, #238636, #58a6ff

Файлы:

ResultPanel:

ResultPanel.jsx (6.8 KB)
ResultPanel.css (5.2 KB)
index.jsx

AnalysisLayout:

AnalysisLayout.jsx (1.8 KB)
AnalysisLayout.css (1.4 KB)
index.jsx

Статус:

Блок срочности (4 уровня) Behavioral Profile карточки (5 типов) Психотип секция Немедленные действия (топ-3) Зоны с приоритетом (топ-5) Ключевые объекты Прогноз поведения Двухколоночный layout Sticky карта Адаптивный дизайн Палитра ЦОУ

Дата создания: 2026-05-05

2.8 KiB Raw Blame History