cancelOperation()}
+/>
+
+// Линейный
+
+
+// Кольцевой
+
+```
+
+##### 💀 Skeleton Loaders - Улучшенные загрузчики
+**Файл**: `frontend/src/components/TableSkeleton.jsx`
+
+**Компоненты**:
+1. **TableSkeleton** - для таблиц (с поддержкой чекбоксов)
+2. **CardSkeleton** - для карточек статистики
+3. **ListSkeleton** - для списков
+4. **FormSkeleton** - для форм
+
+**Использование**:
+```jsx
+import TableSkeleton, { CardSkeleton, ListSkeleton, FormSkeleton } from './components/TableSkeleton'
+
+{loading ? (
+
+) : (
+
+)}
+```
+
+---
+
+#### 5. Keyboard Shortcuts и Command Palette
+
+##### ⌨️ CommandPalette - Глобальный поиск (Ctrl+K)
+**Файлы**:
+- `frontend/src/components/CommandPalette.jsx`
+- Интеграция в `frontend/src/App.jsx`
+
+**Возможности**:
+- ✅ Открытие по Ctrl+K / Cmd+K
+- ✅ Навигация стрелками ↑↓
+- ✅ Фильтрация команд по keywords
+- ✅ Быстрый переход по страницам
+- ✅ Подсветка активной команды
+
+**Горячие клавиши**:
+- `Ctrl+K` - Открыть command palette
+- `↑` `↓` - Навигация по списку
+- `Enter` - Выполнить команду
+- `Esc` - Закрыть
+
+##### 📋 KeyboardShortcutsButton - Справка по горячим клавишам
+**Использование**: Добавлена кнопка в навбар
+
+**Список горячих клавиш**:
+- `Ctrl+K` - Поиск команд
+- `Ctrl+N` - Добавить новую запись
+- `Ctrl+S` - Сохранить
+- `Ctrl+F` - Поиск по таблице
+- `Esc` - Закрыть / Отменить
+- `↑` `↓` - Навигация
+- `Enter` - Подтвердить
+
+---
+
+### 🎨 СРЕДНИЙ ПРИОРИТЕТ
+
+#### 6. Визуальная иерархия
+
+##### 📊 Sparkline - Мини-графики
+**Файл**: `frontend/src/components/Sparkline.jsx`
+
+**Компоненты**:
+1. **Sparkline** - линейный график
+2. **SparklineWithTrend** - с процентом изменения
+3. **SparklineBar** - столбчатый график
+
+**Возможности**:
+- ✅ Чистый SVG без библиотек
+- ✅ Настраиваемые цвета и размеры
+- ✅ Опциональная заливка под графиком
+- ✅ Отображение точек на графике
+
+**Использование**:
+```jsx
+// Простой sparkline
+
+
+// С трендом
+
+
+// Столбчатый
+
+```
+
+---
+
+## 🚀 КАК ИСПОЛЬЗОВАТЬ
+
+### Интеграция в существующие страницы
+
+#### Пример: DomainsNewManager с новыми компонентами
+
+```jsx
+import { useState } from 'react'
+import Breadcrumbs from './components/Breadcrumbs'
+import SavedFilters from './components/SavedFilters'
+import BulkActionsBar from './components/BulkActionsBar'
+import ValidatedInput from './components/ValidatedInput'
+import TableSkeleton from './components/TableSkeleton'
+import { useToast } from './components/ToastContainer'
+
+function DomainsNewManager() {
+ const [selectedItems, setSelectedItems] = useState(new Set())
+ const [loading, setLoading] = useState(false)
+ const [filters, setFilters] = useState({ searchTerm: '', community: '' })
+ const toast = useToast()
+
+ const handleBulkDelete = async () => {
+ try {
+ await api.delete('/domains-new/bulk', { ids: Array.from(selectedItems) })
+ toast.success(`Удалено ${selectedItems.size} доменов`)
+ setSelectedItems(new Set())
+ } catch (e) {
+ toast.error('Ошибка удаления', { duration: 0 })
+ }
+ }
+
+ return (
+
+ {/* Breadcrumbs с кнопкой назад */}
+
+
+ {/* Сохраненные фильтры */}
+
+
+
+
+ {/* Bulk actions */}
+
setSelectedItems(new Set(items.map(i => i.id)))}
+ onDeselectAll={() => setSelectedItems(new Set())}
+ onDelete={handleBulkDelete}
+ onExport={handleBulkExport}
+ />
+
+ {/* Таблица с skeleton loader */}
+ {loading ? (
+
+ ) : (
+
+ )}
+ ` и ` | `
+3. Добавить `` над таблицей
+
+### 3. Использование ValidatedInput вместо обычного input
+Заменить все критичные input'ы (IP, email, домены) на ``
+
+### 4. Skeleton loaders вместо спиннеров
+```jsx
+// Вместо
+{loading && }
+
+// Использовать
+{loading ? : }
+```
+
+---
+
+## 🐛 ИЗВЕСТНЫЕ ОГРАНИЧЕНИЯ
+
+1. **SavedFilters** хранит данные в localStorage (ограничение 5-10MB)
+2. **BulkActionsBar** sticky позиция может конфликтовать с другими sticky элементами
+3. **CommandPalette** не поддерживает вложенные команды
+4. **Sparkline** не имеет интерактивности (нет hover tooltips)
+
+---
+
+## 📝 ЗАКЛЮЧЕНИЕ
+
+Все компоненты разработаны с использованием **чистого Tabler UI** без сторонних библиотек. Компоненты:
+- ✅ Полностью адаптивны
+- ✅ Поддерживают темную тему
+- ✅ Доступны (ARIA labels, keyboard navigation)
+- ✅ Легковесны (нет зависимостей)
+- ✅ Расширяемы через props
+
+**Итого внедрено**: 8 новых компонентов, улучшено 3 существующих, добавлено ~1300 строк кода.
+
+---
+
+**Версия документа**: 1.0
+**Дата**: 2 октября 2025
+**Автор**: AI Assistant (Claude Sonnet 4.5)
+
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 2d89807..04b4440 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -24,6 +24,8 @@ import Dashboard from './Dashboard';
import './App.css';
import { NotifyProvider } from './components/NotifyProvider.jsx';
import SettingsModal from './components/SettingsModal.jsx';
+import ToastContainer from './components/ToastContainer.jsx';
+import CommandPalette, { KeyboardShortcutsButton } from './components/CommandPalette.jsx';
// axios не используется напрямую; сетевые вызовы через src/lib/api.js
// --- Simple i18n (RU/EN) ---
@@ -93,9 +95,11 @@ function App() {
-
-
-
+
+
+
+
+
@@ -314,7 +318,8 @@ function MainLayout() {
-
+
+
@@ -342,6 +347,7 @@ function MainLayout() {
setSettingsOpen(false)} />
+
+ {/* Кнопка "Назад" */}
+ {showBack && (
+
+ )}
+
+ {/* Breadcrumbs */}
+
+
+ {/* Информация о фильтрах */}
+ {filterInfo && (
+
+
+ {filterInfo}
+
+ )}
+
+ {/* Общий счетчик */}
+ {count !== null && count !== undefined && (
+
+ ({count} {count === 1 ? 'запись' : count < 5 ? 'записи' : 'записей'})
+
+ )}
+
+
+
+ {/* Левая часть: информация о выборе */}
+
+
+
+
+ Выбрано: {selectedCount}
+
+
+
+ {/* Кнопка выбрать все / снять выбор */}
+ {!allSelected && totalCount > selectedCount && (
+
+ )}
+
+
+
+
+ {/* Правая часть: действия */}
+
+ {/* Экспорт */}
+ {onExport && (
+
+ )}
+
+ {/* Редактирование */}
+ {onEdit && (
+
+ )}
+
+ {/* Пользовательские действия */}
+ {customActions.map((action, idx) => {
+ const Icon = action.icon
+ return (
+
+ )
+ })}
+
+ {/* Удаление */}
+ {onDelete && (
+
+ )}
+
+
+
+ setIsOpen(false)}
+ style={{ zIndex: 1050 }}
+ >
+
+ {/* Modal */}
+
+
+
+ {/* Search input */}
+
+
+
+
+
+ {
+ setSearchTerm(e.target.value)
+ setSelectedIndex(0)
+ }}
+ />
+
+
+
+ {/* Commands list */}
+
+ {filteredCommands.length === 0 ? (
+
+ Команды не найдены
+
+ ) : (
+
+ {filteredCommands.map((cmd, index) => {
+ const Icon = cmd.icon
+ return (
+
+ )
+ })}
+
+ )}
+
+
+ {/* Footer with hints */}
+
+
+ ↑ ↓ навигация
+ ↵ выбрать
+ Esc закрыть
+
+
+
+
+ setShowModal(false)}
+ >
+
+
+
+
+ Горячие клавиши
+
+
+
+
+ {shortcuts.map((shortcut, index) => (
+
+ {shortcut.description}
+
+ {shortcut.keys.map((key, i) => (
+ {key}
+ ))}
+
+
+ ))}
+
+
+
+
+
+
+
+ {message}
+ {onCancel && (
+
+ )}
+
+
+ {/* Progress bar */}
+
+
+ {/* Статистика */}
+
+ {showCount && total > 0 && (
+
+ Обработано: {current} из {total}
+
+ )}
+ {showPercentage && (
+
+ {percentage.toFixed(0)}%
+
+ )}
+
+
+
+ {message && (
+ {message}
+ )}
+
+ 0 ? { width: `${progress}%` } : {}}
+ >
+
+
+
+
+ )
+}
+
+export default ProgressIndicator
+
diff --git a/frontend/src/components/SavedFilters.jsx b/frontend/src/components/SavedFilters.jsx
new file mode 100644
index 0000000..1baaded
--- /dev/null
+++ b/frontend/src/components/SavedFilters.jsx
@@ -0,0 +1,198 @@
+import { useState, useEffect } from 'react'
+import { IconBookmark, IconBookmarkFilled, IconTrash, IconPlus, IconSearch } from '@tabler/icons-react'
+
+/**
+ * Компонент для управления сохраненными фильтрами
+ * Использует localStorage для хранения
+ */
+function SavedFilters({
+ pageKey, // уникальный ключ страницы (например 'domains', 'servers')
+ currentFilters = {}, // текущие фильтры { searchTerm, filterCommunity, sortField, sortOrder }
+ onApplyFilter = () => {}, // callback для применения фильтра
+ className = ''
+}) {
+ const [savedFilters, setSavedFilters] = useState([])
+ const [showSaveDialog, setShowSaveDialog] = useState(false)
+ const [filterName, setFilterName] = useState('')
+ const [showList, setShowList] = useState(false)
+
+ const storageKey = `savedFilters_${pageKey}`
+
+ // Загрузка сохраненных фильтров из localStorage
+ useEffect(() => {
+ try {
+ const stored = localStorage.getItem(storageKey)
+ if (stored) {
+ setSavedFilters(JSON.parse(stored))
+ }
+ } catch (e) {
+ console.error('Error loading saved filters:', e)
+ }
+ }, [storageKey])
+
+ // Сохранение фильтров в localStorage
+ const saveToStorage = (filters) => {
+ try {
+ localStorage.setItem(storageKey, JSON.stringify(filters))
+ setSavedFilters(filters)
+ } catch (e) {
+ console.error('Error saving filters:', e)
+ }
+ }
+
+ // Сохранить текущий фильтр
+ const handleSaveFilter = () => {
+ if (!filterName.trim()) return
+
+ const newFilter = {
+ id: Date.now(),
+ name: filterName.trim(),
+ filters: { ...currentFilters },
+ createdAt: new Date().toISOString()
+ }
+
+ const updated = [...savedFilters, newFilter]
+ saveToStorage(updated)
+ setFilterName('')
+ setShowSaveDialog(false)
+ window.notify?.success?.('Фильтр сохранен')
+ }
+
+ // Удалить фильтр
+ const handleDeleteFilter = (id) => {
+ const updated = savedFilters.filter(f => f.id !== id)
+ saveToStorage(updated)
+ window.notify?.success?.('Фильтр удален')
+ }
+
+ // Применить фильтр
+ const handleApplyFilter = (filter) => {
+ onApplyFilter(filter.filters)
+ setShowList(false)
+ window.notify?.success?.(`Применен фильтр: ${filter.name}`)
+ }
+
+ // Проверка, есть ли активные фильтры
+ const hasActiveFilters = Object.values(currentFilters).some(v =>
+ v !== '' && v !== null && v !== undefined && v !== 'asc'
+ )
+
+ return (
+
+ {/* Кнопка открытия */}
+
+
+
+ Сохраненные фильтры
+
+ {/* Список сохраненных фильтров */}
+ {savedFilters.length === 0 ? (
+
+ Нет сохраненных фильтров
+
+ ) : (
+
+ {savedFilters.map(filter => (
+
+
+
+
+ ))}
+
+ )}
+
+
+
+ {/* Форма сохранения нового фильтра */}
+ {!showSaveDialog && hasActiveFilters && (
+
+ )}
+
+ {showSaveDialog && (
+
+
+ setFilterName(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') handleSaveFilter()
+ if (e.key === 'Escape') setShowSaveDialog(false)
+ }}
+ autoFocus
+ />
+
+
+
+
+
+
+ )}
+
+ {!hasActiveFilters && !showSaveDialog && (
+
+ Установите фильтры, чтобы сохранить
+
+ )}
+
+
+
+
+ {showPercentage && (
+
+ {isPositive ? '+' : ''}{percentage}%
+
+ )}
+ {label && {label}}
+
+ |
+ {hasCheckbox && (
+ |
+
+ |
+ )}
{Array.from({ length: cols }).map((_, i) => (
-
+
|
))}
@@ -13,8 +21,9 @@ export default function TableSkeleton({ rows = 10, cols = 3 }) {
+ {hasCheckbox && | }
{Array.from({ length: cols }).map((_, i) => (
- |
+ |
))}
@@ -42,4 +51,67 @@ export function TableEmpty({ cols = 3, children }) {
);
}
+/**
+ * Skeleton для карточек статистики на Dashboard
+ */
+export function CardSkeleton({ count = 4 }) {
+ return (
+
+ {Array.from({ length: count }).map((_, i) => (
+
+ ))}
+
+ {Array.from({ length: rows }).map((_, i) => (
+
+ ))}
+
+ {Array.from({ length: fields }).map((_, i) => (
+
+ ))}
+
+
+
+
+ {getIcon()}
+
+
+ {toast.title && (
+
{toast.title}
+ )}
+
{toast.message}
+
+ {/* Действия */}
+ {toast.actions && toast.actions.length > 0 && (
+
+ {toast.actions.map((action, idx) => (
+
+ ))}
+
+ )}
+
+
+
+
+ {toasts.map(toast => (
+
+ ))}
+
+
+ {/* CSS анимации */}
+
+
+ )
+}
+
+export default ToastContainer
+
diff --git a/frontend/src/components/ValidatedInput.jsx b/frontend/src/components/ValidatedInput.jsx
new file mode 100644
index 0000000..7fcb313
--- /dev/null
+++ b/frontend/src/components/ValidatedInput.jsx
@@ -0,0 +1,119 @@
+import { useState, useEffect, useRef } from 'react'
+import { IconCheck, IconX, IconAlertCircle } from '@tabler/icons-react'
+
+/**
+ * Компонент input с inline валидацией и подсказками (Tabler UI стили)
+ */
+function ValidatedInput({
+ type = 'text',
+ value,
+ onChange,
+ onValidate, // функция валидации: (value) => { valid: boolean, message: string }
+ placeholder = '',
+ label = '',
+ required = false,
+ disabled = false,
+ className = '',
+ helpText = '',
+ debounceMs = 300,
+ showSuccessIcon = true,
+ autoFocus = false,
+ ...rest
+}) {
+ const [localValue, setLocalValue] = useState(value || '')
+ const [validation, setValidation] = useState({ valid: null, message: '' })
+ const [isDirty, setIsDirty] = useState(false)
+ const timerRef = useRef(null)
+
+ // Синхронизация с внешним value
+ useEffect(() => {
+ setLocalValue(value || '')
+ }, [value])
+
+ // Валидация с debounce
+ useEffect(() => {
+ if (!isDirty || !onValidate) return
+
+ if (timerRef.current) {
+ clearTimeout(timerRef.current)
+ }
+
+ timerRef.current = setTimeout(() => {
+ const result = onValidate(localValue)
+ setValidation(result)
+ }, debounceMs)
+
+ return () => {
+ if (timerRef.current) {
+ clearTimeout(timerRef.current)
+ }
+ }
+ }, [localValue, isDirty, onValidate, debounceMs])
+
+ const handleChange = (e) => {
+ const newValue = e.target.value
+ setLocalValue(newValue)
+ setIsDirty(true)
+ onChange?.(newValue)
+ }
+
+ const getInputClass = () => {
+ if (!isDirty) return ''
+ if (validation.valid === true) return 'is-valid'
+ if (validation.valid === false) return 'is-invalid'
+ return ''
+ }
+
+ return (
+
+ {/* Label */}
+ {label && (
+
+ )}
+
+ {/* Input с иконкой валидации */}
+
+
+
+ {/* Иконка статуса валидации */}
+ {isDirty && validation.valid !== null && (
+
+ {validation.valid === true && showSuccessIcon ? (
+
+ ) : validation.valid === false ? (
+
+ ) : null}
+
+ )}
+
+
+ {/* Help text или сообщение валидации */}
+ {isDirty && validation.message ? (
+
+ {validation.message}
+
+ ) : helpText ? (
+
+
+ {helpText}
+
+ ) : null}
+