vue-pult/doc/ФУТЕР_VERSION_INFO.md

VERSION INFO - Информация о версии в футере

📋 Описание

VersionInfo - это правая секция футера, отображающая копирайт информацию и версию приложения. Предоставляет пользователям информацию о продукте и его текущей версии.

---

Архитектура

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

• Компонент: Часть Footer.tsx
• Позиция: Правая часть футера
• Видимость: Частично адаптивная (копирайт скрыт на очень маленьких экранах)

Структура отображаемых данных

interface VersionInfoData {
  copyright: string;    // Копирайт информация
  version: string;      // Версия приложения
}

---

Функциональность

1. Отображение копирайта

<span className="hidden sm:inline">© 2024 NEWPULT</span>

• Показывает информацию об авторских правах
• Скрыта на очень маленьких экранах (< 640px)

2. Разделитель

<span>•</span>

• Визуальная точка-разделитель между копирайтом и версией

3. Отображение версии

<span>v1.0.0</span>

• Показывает текущую версию приложения
• Всегда видима на всех экранах

---

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

HTML разметка

<div className="flex items-center gap-2 text-xs text-gray-400">
  <span className="hidden sm:inline">© 2024 NEWPULT</span>
  <span>•</span>
  <span>v1.0.0</span>
</div>

---

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

CSS классы

/* Контейнер */
.flex.items-center.gap-2.text-xs.text-gray-400

/* Копирайт - скрыт до sm размера */  
.hidden.sm:inline

/* Разделитель и версия - всегда видимы */
/* Используют базовые стили контейнера */

Адаптивное поведение

Mobile (< 640px)

• v1.0.0

• Копирайт скрыт для экономии места
• Разделитель и версия остаются видимыми

Small и выше (≥ 640px)

© 2024 NEWPULT • v1.0.0

• Полная информация отображается

Логика адаптивности

// Копирайт появляется только на экранах sm и больше
className="hidden sm:inline"

// Версия всегда видима (без условных классов)
<span>v1.0.0</span>

---

Конфигурация версии

Текущая реализация

// Статическая версия в коде
<span>v1.0.0</span>

Улучшенная реализация (предложение)

// Версия из package.json
import packageJson from '../../../package.json';

const VersionInfo = () => {
  return <span>v{packageJson.version}</span>;
};

Версия из переменных окружения

// Версия из environment variables
const version = process.env.REACT_APP_VERSION || '1.0.0';
<span>v{version}</span>

---

Позиционирование в футере

Расположение между элементами

[Подключения] [Система] [     Пользователь     ] [   ВЕРСИЯ   ]
   Локальный    CPU: 35%      Пульт: #8         © 2024 NEWPULT
   Внешний     RAM: 45%     Админ: Иванов И.           •
               Disk: 75%    Uptime: 02:15:30        v1.0.0

Выравнивание

// justify-between в родительском контейнере размещает 
// этот элемент в правой части футера
<div className="h-full flex items-center justify-between">
  {/* Левая часть */}
  {/* Центральная часть */}
  {/* ПРАВАЯ ЧАСТЬ */}
  <div className="flex items-center gap-2 text-xs text-gray-400">
    {/* VersionInfo здесь */}
  </div>
</div>

---

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

1. Статичность данных

• Копирайт: Захардкожен в коде ("© 2024 NEWPULT")
• Версия: Статическое значение ("v1.0.0")
• Нет динамического обновления: Изменения только при новой сборке

2. Минималистичный дизайн

• Простой серый текст
• Маленький размер шрифта (text-xs)
• Ненавязчивое позиционирование

3. Приоритизация версии

• Версия всегда видима
• Копирайт может быть скрыт для экономии места
• Версия критична для технической поддержки

---

Управление версиями

Рекомендуемые подходы

1. Семантическое версионирование (SemVer)

v1.0.0 - MAJOR.MINOR.PATCH
v1.2.3 - 1 мажорная, 2 минорная, 3 патч версия

2. Автоматическое обновление из package.json

// vite.config.ts или webpack.config.js
const packageJson = require('./package.json');

export default {
  define: {
    'process.env.APP_VERSION': JSON.stringify(packageJson.version),
  },
};

// В компоненте
const version = process.env.APP_VERSION || '1.0.0';

3. CI/CD интеграция

// Автоматическое обновление при деплое
const version = process.env.BUILD_NUMBER || 
                process.env.GIT_COMMIT?.substring(0, 7) || 
                '1.0.0';

---

Расширение функциональности

Потенциальные улучшения

1. Детальная информация о версии

interface DetailedVersionInfo {
  version: string;        // "1.0.0"
  buildNumber: string;    // "2024010901"  
  gitCommit: string;      // "a1b2c3d"
  buildDate: string;      // "2024-01-09"
  environment: string;    // "production"
}

2. Интерактивная версия с тултипом

<Tooltip content={`
  Версия: v${version}
  Сборка: ${buildNumber}
  Дата: ${buildDate}
  Коммит: ${gitCommit}
`}>
  <span className="cursor-help">v{version}</span>
</Tooltip>

3. Цветовая индикация среды

const getEnvironmentColor = (env: string) => {
  switch (env) {
    case 'production': return 'text-green-400';
    case 'staging': return 'text-yellow-400';  
    case 'development': return 'text-blue-400';
    default: return 'text-gray-400';
  }
};

<span className={getEnvironmentColor(environment)}>
  v{version}
</span>

4. Ссылка на changelog

<a 
  href="/changelog" 
  className="text-xs text-gray-400 hover:text-gray-300 underline"
>
  v{version}
</a>

---

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

Package.json интеграция

{
  "name": "newpult",
  "version": "1.0.0",
  "scripts": {
    "build": "vite build --mode production",
    "version:bump": "npm version patch && git push && git push --tags"
  }
}

Автоматизация обновления

# Автоматическое обновление версии при деплое
npm version patch  # 1.0.0 -> 1.0.1
npm version minor  # 1.0.0 -> 1.1.0  
npm version major  # 1.0.0 -> 2.0.0

---

Тестирование

Тестовые сценарии

1. Корректное отображение версии на всех экранах
2. Скрытие копирайта на маленьких экранах (< 640px)
3. Показ копирайта на больших экранах (≥ 640px)
4. Правильное позиционирование в правой части футера
5. Стилизация текста (размер, цвет, отступы)

Unit тесты

describe('VersionInfo', () => {
  test('shows version on all screen sizes', () => {
    render(<VersionInfo />);
    expect(screen.getByText(/v1\.0\.0/)).toBeVisible();
  });

  test('hides copyright on small screens', () => {
    render(<VersionInfo />);
    const copyright = screen.getByText(/© 2024 NEWPULT/);
    expect(copyright).toHaveClass('hidden', 'sm:inline');
  });
});

---

Безопасность и конфиденциальность

Соображения

1. Версия не содержит чувствительной информации
2. Копирайт указывает на владельца продукта
3. Публичная информация - безопасна для отображения
4. Не раскрывает внутреннюю архитектуру или уязвимости

Рекомендации

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

---

Связь с брендингом

Элементы бренда

• "NEWPULT": Название продукта в копирайте
• "© 2024": Актуальный год авторских прав
• Цветовая схема: Серый цвет соответствует общей теме

Консистентность

• Соответствует общему стилю приложения
• Гармонирует с другими элементами футера
• Поддерживает профессиональный вид интерфейса

---

Заключение

VersionInfo служит важной идентификационной функцией, предоставляя пользователям информацию о текущей версии продукта и авторских правах. Несмотря на свою простоту, компонент играет ключевую роль в поддержке пользователей и идентификации версии при решении технических вопросов.

---

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