1.7 KiB
1.7 KiB
Документация по переносу кнопки "ESP Диаг" в хедере
Общая структура в React
- Расположение: В AppHeader.tsx, правая часть flex, вторая кнопка.
- Тип: Button элемент с @click={onESPDiagnostic}, title="Диагностика ESP".
- Зависимости: Tailwind CSS, lucide-react (Settings icon).
- JSX: ESP Диаг. .
Элементы
- Иконка: 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: .
Vue маппинг
- : <button @click="onESPDiagnostic" class="bg-yellow-600 hover:bg-yellow-700 ..." title="Диагностика ESP"> ESP Диаг. .
- defineProps: { onESPDiagnostic: Function }.
- Импорт: import { Settings } from 'lucide-vue-next'.