33 lines
1.7 KiB
Markdown
33 lines
1.7 KiB
Markdown
# Документация по переносу кнопки "ESP Диаг" в хедере
|
||
|
||
## Общая структура в React
|
||
- **Расположение**: В AppHeader.tsx, правая часть flex, вторая кнопка.
|
||
- **Тип**: Button элемент с @click={onESPDiagnostic}, title="Диагностика ESP".
|
||
- **Зависимости**: Tailwind CSS, lucide-react (Settings icon).
|
||
- **JSX**: <button class="bg-yellow-600 hover:bg-yellow-700 text-white px-3 py-1.5 rounded text-sm transition-colors" title="Диагностика ESP">
|
||
<Settings class="w-4 h-4" />
|
||
ESP Диаг.
|
||
</button>.
|
||
|
||
## Элементы
|
||
- Иконка: Settings (w-4 h-4, белая).
|
||
- Текст: "ESP Диаг." (text-sm).
|
||
- Title: "Диагностика ESP" (tooltip).
|
||
- Handler: onESPDiagnostic — запускает диагностику ESP через WebSocket.
|
||
|
||
## Стили (Tailwind примеры)
|
||
- Основной: bg-yellow-600 text-white px-3 py-1.5 rounded text-sm transition-colors.
|
||
- Hover: hover:bg-yellow-700.
|
||
- Responsive: text-xs на mobile, min-height 44px touch.
|
||
|
||
## Взаимодействие
|
||
- Клик: Вызывает props.onESPDiagnostic, отправляет команду 'esp-test' via WebSocket, показывает уведомление о статусе.
|
||
- В Dashboard: <AppHeader onESPDiagnostic={handleESPDiagnostic} />.
|
||
|
||
## Vue маппинг
|
||
- <template>: <button @click="onESPDiagnostic" class="bg-yellow-600 hover:bg-yellow-700 ..." title="Диагностика ESP">
|
||
<Settings class="w-4 h-4" />
|
||
ESP Диаг.
|
||
</button>.
|
||
- defineProps: { onESPDiagnostic: Function }.
|
||
- Импорт: import { Settings } from 'lucide-vue-next'. |