router-lists-ui/frontend

RouterOS Manager - Frontend

Современный веб-интерфейс для управления списками доменов и AS с использованием Tabler UI.

🎨 Особенности

• Современный UI/UX - Полностью переработанный интерфейс в стиле Tabler
• Адаптивный дизайн - Отлично работает на всех устройствах
• Иконки Tabler - Красивые иконки для улучшения пользовательского опыта
• Интерактивные элементы - Анимации, hover-эффекты, модальные окна
• Статистика - Отображение количества элементов в реальном времени
• Поиск - Быстрый поиск по спискам
• Массовые операции - Возможность массового обновления шлюзов
• Подтверждения - Модальные окна для подтверждения важных действий

🚀 Технологии

• React 19 - Современная библиотека для создания пользовательских интерфейсов
• Tabler Icons - Красивые иконки в стиле Tabler
• CSS Variables - Современные CSS переменные для легкой кастомизации
• Responsive Design - Адаптивный дизайн для всех устройств
• Vite - Быстрый сборщик проекта

📦 Установка

1. Убедитесь, что у вас установлен Node.js (версия 16 или выше)

2. Перейдите в папку frontend:

cd frontend

3. Установите зависимости:

npm install

4. Запустите проект в режиме разработки:

npm run dev

5. Откройте браузер и перейдите по адресу: http://localhost:5173

🏗️ Сборка для продакшена

npm run build

Собранные файлы будут находиться в папке dist/.

🎯 Использование

Управление доменами

1. Добавление домена:

   • Введите имя домена (например: example.com)
   • Выберите шлюз (по умолчанию: SharkFIN)
   • Нажмите "Добавить"

2. Редактирование:

   • Нажмите на иконку редактирования рядом с доменом
   • Измените шлюз
   • Нажмите "Сохранить" или "Отмена"

3. Удаление:

   • Нажмите на иконку удаления
   • Подтвердите удаление в модальном окне

Управление AS

Аналогично управлению доменами, но для AS номеров (например: AS12345).

Массовые операции

1. Введите текущий шлюз в поле "Заменить с"
2. Введите новый шлюз в поле "Заменить на"
3. Нажмите "Выполнить замену"
4. Подтвердите операцию

Сохранение изменений

После внесения изменений обязательно нажмите "Сохранить в S3" для записи изменений в базу данных.

🎨 Кастомизация

Цветовая схема

Основные цвета можно изменить в CSS переменных в файле src/App.css:

:root {
  --tblr-primary: #206bc4;      /* Основной цвет */
  --tblr-success: #2fb344;      /* Цвет успеха */
  --tblr-warning: #f59f00;      /* Цвет предупреждения */
  --tblr-danger: #d63939;       /* Цвет ошибки */
}

Шрифты

Проект использует шрифт Inter. Для изменения шрифта обновите переменную:

--tblr-font-family-sans-serif: "Ваш шрифт", -apple-system, BlinkMacSystemFont, ...;

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

Интерфейс полностью адаптивен и оптимизирован для:

• Desktop (1200px+) - Полный интерфейс с боковой панелью
• Tablet (768px - 1199px) - Адаптированный интерфейс
• Mobile (до 767px) - Мобильная версия с выпадающим меню

🔧 Разработка

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

src/
├── App.jsx          # Главный компонент приложения
├── App.css          # Стили Tabler
├── DataManager.jsx  # Компонент управления данными
├── main.jsx         # Точка входа
└── index.css        # Базовые стили

Добавление новых функций

1. Создайте новый компонент в папке src/
2. Импортируйте необходимые иконки из @tabler/icons-react
3. Используйте CSS классы Tabler для стилизации
4. Добавьте адаптивность для мобильных устройств

Иконки

Все иконки импортируются из @tabler/icons-react:

import { IconPlus, IconEdit, IconTrash } from '@tabler/icons-react';

// Использование
<IconPlus className="icon" />

🐛 Отладка

Консоль разработчика

Откройте консоль разработчика (F12) для просмотра ошибок и логов.

Проверка API

Убедитесь, что бэкенд запущен и доступен по адресу /api.

📄 Лицензия

Этот проект использует лицензию MIT.

🤝 Вклад в проект

1. Форкните репозиторий
2. Создайте ветку для новой функции
3. Внесите изменения
4. Создайте Pull Request

📞 Поддержка

Если у вас есть вопросы или проблемы, создайте Issue в репозитории.

---

RouterOS Manager - Современный интерфейс для управления списками с использованием Tabler UI.