Kirill
68 lines
2.9 KiB
Markdown
68 lines
2.9 KiB
Markdown
# DemoOverlay — индикация демо-режима
|
||
|
||
## Контекст
|
||
|
||
Демо-режим активируется через `VITE_DEMO_MODE=true` (`client/.env.local`). Сейчас есть только `DemoBanner` (Alert в потоке страницы, не фиксированный). Нужно добавить постоянную визуальную индикацию — оверлей, который не мешает взаимодействию с сайтом.
|
||
|
||
## Что делаем
|
||
|
||
Новый компонент `DemoOverlay` в `client/src/shared/ui/DemoOverlay.tsx`.
|
||
|
||
Два фиксированных слоя, оба `pointer-events: none`:
|
||
|
||
1. **Водяной знак** — крупная надпись «ДЕМО», полупрозрачная, повёрнута на ~-30°, по центру экрана.
|
||
2. **Плашка** — правый нижний угол, скруглённая полупрозрачная тёмная плашка с текстом «ДЕМО-РЕЖИМ».
|
||
|
||
Оба рендерятся только при `IS_DEMO_MODE === true`.
|
||
|
||
## Размещение
|
||
|
||
В `App.tsx` на одном уровне с `<NoiseOverlay />`, вне роутов:
|
||
|
||
```tsx
|
||
<NoiseOverlay />
|
||
<DemoOverlay />
|
||
```
|
||
|
||
`DemoBanner` (существующий Alert в MainLayout) — не трогаем, остаётся как есть.
|
||
|
||
## Водяной знак
|
||
|
||
- Текст: `ДЕМО`
|
||
- Размер шрифта: `10vw` (адаптивный)
|
||
- Поворот: `rotate(-30deg)`
|
||
- Цвет: `rgba(0,0,0,0.04)` (тёмная тема: `rgba(255,255,255,0.04)`)
|
||
- Позиция: `position: fixed`, `inset: 0`, центрирование через flex
|
||
- z-index: `9990`
|
||
|
||
## Плашка
|
||
|
||
- Текст: `ДЕМО-РЕЖИМ`
|
||
- Позиция: `position: fixed`, `bottom: 16px`, `right: 16px`
|
||
- Фон: `rgba(0,0,0,0.6)` (тёмная тема: `rgba(255,255,255,0.08)`)
|
||
- Цвет текста: `#fff` (тёмная тема: `rgba(255,255,255,0.6)`)
|
||
- Паддинги: `6px 16px`
|
||
- Скругление: `8px`
|
||
- Размер шрифта: `12px`, `font-weight: 600`
|
||
- z-index: `9991`
|
||
|
||
## Тёмная тема
|
||
|
||
Компонент читает тему через `useTheme()` из MUI и применяет соответствующие цвета для watermark и плашки.
|
||
|
||
## Тесты
|
||
|
||
Проверяем:
|
||
- Компонент рендерится когда `IS_DEMO_MODE === true` (водяной знак + плашка видны)
|
||
- Компонент не рендерится когда `IS_DEMO_MODE === false`
|
||
- Плашка в правом нижнем углу (проверяем CSS-свойства)
|
||
- `pointer-events: none` на обоих элементах
|
||
|
||
## Файлы
|
||
|
||
| Действие | Файл |
|
||
|----------|------|
|
||
| Создать | `client/src/shared/ui/DemoOverlay.tsx` |
|
||
| Изменить | `client/src/app/App.tsx` |
|
||
| Создать | `client/src/shared/ui/__tests__/DemoOverlay.test.tsx` |
|