vue-pult/doc/ФУТЕР_ОБЩАЯ_ДОКУМЕНТАЦИЯ.md

ФУТЕР - ОБЩАЯ ДОКУМЕНТАЦИЯ

📋 Оглавление

1. Архитектура футера
2. Структура компонентов
3. Визуальная структура
4. Зависимости
5. Адаптивность

---

Архитектура футера

Местоположение

• Файл: client/src/components/Layout/Footer.tsx
• Используется в: MainLayout.tsx
• Высота: Фиксированная 40px
• Позиционирование: Нижняя часть экрана, всегда видима

Назначение

Футер предоставляет пользователю важную системную информацию и статистику в реальном времени:

• Статус подключений к серверам
• Системная информация (CPU, RAM, Disk)
• Информация о текущем пользователе
• Время работы приложения (uptime)
• Версия и копирайт

---

Структура компонентов

Основные компоненты футера

1. ConnectionIndicator (Индикатор подключения)

• Назначение: Отображает статус подключения к серверу
• Расположение: Левая часть футера
• Типы соединений:
  • Локальный сервер - основной WebSocket
  • Внешний сервер - внешний сервер авторизации

2. SystemInfo (Системная информация)

• Назначение: Отображает загрузку системы
• Расположение: Левая часть футера (скрыта на мобильных)
• Показатели:
  • CPU загрузка (%)
  • RAM использование (%)
  • Disk использование (%)

3. UserInfo (Информация о пользователе)

• Назначение: Показывает данные текущего пользователя
• Расположение: Центральная часть футера
• Данные:
  • ID пульта
  • Имя администратора
  • Время работы (uptime)

4. VersionInfo (Информация о версии)

• Назначение: Копирайт и версия приложения
• Расположение: Правая часть футера
• Содержимое:
  • Копирайт "© 2024 NEWPULT"
  • Версия приложения "v1.0.0"

---

Визуальная структура

┌─────────────────────────────────────────────────────────────────────────┐
│                               ФУТЕР (40px)                              │
├─────────────────────────┬─────────────────────────┬─────────────────────┤
│      ЛЕВАЯ ЧАСТЬ        │      ЦЕНТРАЛЬНАЯ        │      ПРАВАЯ         │
│                         │         ЧАСТЬ           │       ЧАСТЬ         │
│ • Подключения:          │ • Пульт: #8             │ • © 2024 NEWPULT    │
│   ✓ Локальный (25ms)    │ • Админ: Иванов И.      │ • v1.0.0            │
│   ✓ Внешний             │ • Uptime: 02:15:30      │                     │
│ • Система:              │                         │                     │
│   CPU: 35% RAM: 45%     │                         │                     │
│   Disk: 75%             │                         │                     │
└─────────────────────────┴─────────────────────────┴─────────────────────┘

---

Зависимости

Внешние зависимости

// React и хуки
import React, { useEffect, useState } from 'react';

// Иконки Lucide
import { Wifi, WifiOff, Activity, HardDrive, Cpu } from 'lucide-react';

// Контексты приложения
import { useWebSocketContext } from '../../contexts/WebSocketContext';
import { useAuth } from '../../hooks/useAuth';

// Внешний WebSocket менеджер
import { externalWsManager } from '../../lib/externalWebSocket';

Используемые данные

• WebSocketContext: статус подключения к основному серверу
• AuthContext: данные текущего пользователя (ID, имя)
• ExternalWebSocket: статус подключения к внешнему серверу
• Локальное состояние: пинг, системная информация, uptime

---

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

Breakpoints и видимость компонентов

Mobile (< 768px)

// Видимые элементы:
- Индикаторы подключения
- Версия (только "v1.0.0")

// Скрытые элементы:
- Системная информация (CPU, RAM, Disk)
- Информация о пользователе
- Копирайт "© 2024 NEWPULT"

Tablet (768px - 1024px)

// Видимые элементы:
- Индикаторы подключения
- Информация о пользователе (центр)
- Полная правая часть (копирайт + версия)

// Скрытые элементы:
- Системная информация (CPU, RAM, Disk)

Desktop (> 1024px)

// Все элементы видимы:
- Индикаторы подключения
- Системная информация (CPU, RAM, Disk)
- Информация о пользователе
- Копирайт и версия

CSS классы адаптивности

/* Системная информация - только на больших экранах */
.hidden.lg:flex

/* Информация о пользователе - от планшета и выше */
.hidden.md:flex

/* Копирайт - от небольших экранов */
.hidden.sm:inline

---

Особенности реализации

1. Обновление данных в реальном времени

• Пинг: обновляется каждые 5 секунд
• Системная информация: обновляется каждые 10 секунд
• Uptime: обновляется каждую секунду
• Статусы подключений: реагируют на изменения в реальном времени

2. Эмуляция данных

// Пинг (10-50ms)
setPing(Math.floor(Math.random() * 40) + 10);

// CPU загрузка (20-50%)
cpu: Math.floor(Math.random() * 30) + 20

// RAM использование (30-70%)
memory: Math.floor(Math.random() * 40) + 30

// Disk - фиксированное значение
disk: 75

3. Форматирование времени

// Uptime в формате HH:MM:SS
const hours = Math.floor(elapsed / 3600000);
const minutes = Math.floor((elapsed % 3600000) / 60000);
const seconds = Math.floor((elapsed % 60000) / 1000);
setUptime(`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`);

4. Индикаторы состояния

// Подключен: зеленая иконка WiFi
<Wifi className="w-3 h-3 text-green-500" />

// Отключен: красная иконка WiFi с крестом
<WifiOff className="w-3 h-3 text-red-500" />

---

Интеграция с системой

В MainLayout

// Футер размещается внизу layout с фиксированной высотой
<footer className="h-[40px] bg-gray-900 border-t border-gray-700 px-4 flex-shrink-0">
  {/* Футер никогда не сжимается и всегда видим */}
</footer>

Стили

• Фон: bg-gray-900 (темный)
• Граница: border-t border-gray-700 (тонкая серая линия сверху)
• Отступы: px-4 (горизонтальные отступы)
• Флексбокс: flex items-center justify-between (элементы распределены по краям)

---

Заключение

Футер является важной частью пользовательского интерфейса, предоставляя:

• Системную диагностику в реальном времени
• Статус подключений для мониторинга работоспособности
• Контекстную информацию о текущем сеансе работы
• Идентификационные данные приложения

Компонент спроектирован с учетом адаптивности и оптимально использует ограниченное пространство для отображения максимально полезной информации.

---

Дата создания: 2025-01-09
Версия документации: 1.0
Компонент: Footer.tsx