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