feat: Add Tabler UI support and enhance frontend with new features

2025-07-08 22:50:28 +07:00
parent 50aab806cc
commit 0c1c156bb7
11 changed files with 1983 additions and 154 deletions
@@ -1,12 +1,175 @@
-# React + Vite
+# S3 Lists Manager - Frontend

-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Современный веб-интерфейс для управления списками доменов и AS с использованием Tabler UI.

-Currently, two official plugins are available:
+## 🎨 Особенности

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+- **Современный UI/UX** - Полностью переработанный интерфейс в стиле Tabler
+- **Адаптивный дизайн** - Отлично работает на всех устройствах
+- **Иконки Tabler** - Красивые иконки для улучшения пользовательского опыта
+- **Интерактивные элементы** - Анимации, hover-эффекты, модальные окна
+- **Статистика** - Отображение количества элементов в реальном времени
+- **Поиск** - Быстрый поиск по спискам
+- **Массовые операции** - Возможность массового обновления шлюзов
+- **Подтверждения** - Модальные окна для подтверждения важных действий

-## Expanding the ESLint configuration
+## 🚀 Технологии

-If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
+- **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 в репозитории.
+
+---
+
+**S3 Lists Manager** - Современный интерфейс для управления списками с использованием Tabler UI.