denozord
e4394ef35c
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m52s
176 lines
6.5 KiB
Markdown
176 lines
6.5 KiB
Markdown
# 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:
|
|
```bash
|
|
cd frontend
|
|
```
|
|
|
|
3. Установите зависимости:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
4. Запустите проект в режиме разработки:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
5. Откройте браузер и перейдите по адресу: `http://localhost:5173`
|
|
|
|
## 🏗️ Сборка для продакшена
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
Собранные файлы будут находиться в папке `dist/`.
|
|
|
|
## 🎯 Использование
|
|
|
|
### Управление доменами
|
|
|
|
1. **Добавление домена**:
|
|
- Введите имя домена (например: `example.com`)
|
|
- Выберите шлюз (по умолчанию: `SharkFIN`)
|
|
- Нажмите "Добавить"
|
|
|
|
2. **Редактирование**:
|
|
- Нажмите на иконку редактирования рядом с доменом
|
|
- Измените шлюз
|
|
- Нажмите "Сохранить" или "Отмена"
|
|
|
|
3. **Удаление**:
|
|
- Нажмите на иконку удаления
|
|
- Подтвердите удаление в модальном окне
|
|
|
|
### Управление AS
|
|
|
|
Аналогично управлению доменами, но для AS номеров (например: `AS12345`).
|
|
|
|
### Массовые операции
|
|
|
|
1. Введите текущий шлюз в поле "Заменить с"
|
|
2. Введите новый шлюз в поле "Заменить на"
|
|
3. Нажмите "Выполнить замену"
|
|
4. Подтвердите операцию
|
|
|
|
### Сохранение изменений
|
|
|
|
После внесения изменений обязательно нажмите "Сохранить в S3" для записи изменений в базу данных.
|
|
|
|
## 🎨 Кастомизация
|
|
|
|
### Цветовая схема
|
|
|
|
Основные цвета можно изменить в CSS переменных в файле `src/App.css`:
|
|
|
|
```css
|
|
:root {
|
|
--tblr-primary: #206bc4; /* Основной цвет */
|
|
--tblr-success: #2fb344; /* Цвет успеха */
|
|
--tblr-warning: #f59f00; /* Цвет предупреждения */
|
|
--tblr-danger: #d63939; /* Цвет ошибки */
|
|
}
|
|
```
|
|
|
|
### Шрифты
|
|
|
|
Проект использует шрифт Inter. Для изменения шрифта обновите переменную:
|
|
|
|
```css
|
|
--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`:
|
|
|
|
```jsx
|
|
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.
|