126 lines
3.9 KiB
Markdown
126 lines
3.9 KiB
Markdown
# Обновление: Система тем и современный интерфейс
|
||
|
||
## Что добавлено
|
||
|
||
### 🎨 Система тем
|
||
- **5 тем на выбор:**
|
||
- Тёмная (по умолчанию)
|
||
- Светлая
|
||
- Фиолетовая
|
||
- Синяя
|
||
- Зелёная
|
||
|
||
### 🎯 Современный интерфейс в стиле TimeWeb Cloud
|
||
- Чистый и минималистичный дизайн
|
||
- Плавные переходы и анимации
|
||
- Адаптивная вёрстка
|
||
- Улучшенная типографика
|
||
- Современные карточки и кнопки
|
||
- Sticky header
|
||
- Анимированные индикаторы статуса
|
||
|
||
## Установка
|
||
|
||
### 1. Замените App.jsx
|
||
|
||
Переименуйте файлы:
|
||
```
|
||
frontend/src/App.jsx → frontend/src/App_old.jsx (бэкап)
|
||
frontend/src/App_modern.jsx → frontend/src/App.jsx
|
||
```
|
||
|
||
### 2. Перезапустите фронтенд
|
||
|
||
```bash
|
||
cd frontend
|
||
npm run dev
|
||
```
|
||
|
||
## Использование
|
||
|
||
### Смена темы
|
||
|
||
1. Нажмите на иконку палитры (🎨) в правом верхнем углу
|
||
2. Выберите нужную тему из выпадающего меню
|
||
3. Тема сохраняется автоматически
|
||
|
||
### Особенности интерфейса
|
||
|
||
**Header:**
|
||
- Sticky (прилипает к верху при прокрутке)
|
||
- Показывает статус подключения
|
||
- Отображает текущего пользователя и роль
|
||
- Кнопки быстрого доступа
|
||
|
||
**Sidebar:**
|
||
- Список серверов с карточками
|
||
- Кнопки запуска/остановки на каждой карточке
|
||
- Анимированный индикатор статуса (пульсирует когда запущен)
|
||
- Скрывается на мобильных устройствах
|
||
|
||
**Вкладки:**
|
||
- Современный дизайн с подчёркиванием
|
||
- Иконки для каждой вкладки
|
||
- Плавные переходы
|
||
|
||
**Карточки серверов:**
|
||
- Закруглённые углы
|
||
- Тени при наведении
|
||
- Цветовая индикация выбранного сервера
|
||
- Плавные анимации
|
||
|
||
## Темы
|
||
|
||
### Тёмная (Dark)
|
||
- Основной: Серый 900
|
||
- Вторичный: Серый 800
|
||
- Акцент: Синий 600
|
||
|
||
### Светлая (Light)
|
||
- Основной: Серый 50
|
||
- Вторичный: Белый
|
||
- Акцент: Синий 600
|
||
|
||
### Фиолетовая (Purple)
|
||
- Основной: Фиолетовый 950
|
||
- Вторичный: Фиолетовый 900
|
||
- Акцент: Фиолетовый 600
|
||
|
||
### Синяя (Blue)
|
||
- Основной: Синий 950
|
||
- Вторичный: Синий 900
|
||
- Акцент: Синий 500
|
||
|
||
### Зелёная (Green)
|
||
- Основной: Зелёный 950
|
||
- Вторичный: Зелёный 900
|
||
- Акцент: Зелёный 600
|
||
|
||
## Файлы
|
||
|
||
- `frontend/src/App_modern.jsx` - новый App с темами
|
||
- `frontend/src/themes.js` - конфигурация тем
|
||
- `frontend/src/components/ThemeSelector.jsx` - селектор тем
|
||
|
||
## Что дальше
|
||
|
||
Компоненты (Console, FileManager, Stats, ServerSettings) нужно обновить для поддержки тем.
|
||
Они получают `theme` prop с текущей темой.
|
||
|
||
Пример использования в компоненте:
|
||
```jsx
|
||
export default function MyComponent({ theme }) {
|
||
return (
|
||
<div className={`${theme.primary} ${theme.text}`}>
|
||
<button className={`${theme.accent} ${theme.accentHover}`}>
|
||
Кнопка
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
## Готово! 🎉
|
||
|
||
Теперь у вас современный интерфейс с системой тем!
|