denozord
0d9542d7e9
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m28s
424 lines
16 KiB
React
424 lines
16 KiB
React
import { useState, useEffect, createContext, useContext } from 'react';
|
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
import {
|
|
BrowserRouter as Router,
|
|
Routes,
|
|
Route,
|
|
Link,
|
|
useLocation,
|
|
Navigate
|
|
} from 'react-router-dom';
|
|
import {
|
|
IconBrandTabler,
|
|
IconWorld,
|
|
IconNetwork,
|
|
IconSettings,
|
|
IconHome,
|
|
IconDatabase,
|
|
IconServer,
|
|
IconFilter,
|
|
IconDownload,
|
|
IconCreditCard,
|
|
IconMenu2,
|
|
IconArrowsExchange
|
|
} from '@tabler/icons-react';
|
|
import ServerManager from './ServerManager';
|
|
import FilterManager from './FilterManager';
|
|
import EasySwitchManager from './EasySwitchManager';
|
|
import DomainsNewManager from './DomainsNewManager';
|
|
import IPRangesManager from './IPRangesManager';
|
|
import ASNsNewManager from './ASNsNewManager';
|
|
import AutoUrlManager from './AutoUrlManager';
|
|
import BillingManager from './BillingManager';
|
|
import CommunitiesManager from './CommunitiesManager';
|
|
import NetworkConfigManager from './NetworkConfigManager';
|
|
import Dashboard from './Dashboard';
|
|
import MikrotikBackupsManager from './MikrotikBackupsManager.jsx';
|
|
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';
|
|
import ErrorBoundary from './components/ErrorBoundary.jsx';
|
|
import NetworkErrorHandler from './components/NetworkErrorHandler.jsx';
|
|
|
|
// --- Simple i18n (RU/EN) ---
|
|
const LanguageContext = createContext({ lang: 'ru', setLang: () => {}, t: (k) => k });
|
|
|
|
function LanguageProvider({ children }) {
|
|
const [lang, setLang] = useState(() => localStorage.getItem('lang') || 'ru');
|
|
useEffect(() => { localStorage.setItem('lang', lang); }, [lang]);
|
|
const dict = {
|
|
ru: {
|
|
home: 'Главная', data: 'Данные', management: 'Управление', tools: 'Инструменты',
|
|
dashboard: 'Панель', domains: 'Домены', ipRanges: 'IP-диапазоны', asns: 'AS',
|
|
communities: 'Community', servers: 'Серверы', filters: 'Фильтры', billing: 'Биллинг', autoUrls: 'Авто URL',
|
|
easySwitch: 'Easy Switch', networkConfig: 'Сетевые настройки', mikrotikBackups: 'MikroTik Бэкапы',
|
|
light: 'Светлая', dark: 'Тёмная'
|
|
},
|
|
en: {
|
|
home: 'Home', data: 'Data', management: 'Management', tools: 'Tools',
|
|
dashboard: 'Dashboard', domains: 'Domains', ipRanges: 'IP Ranges', asns: 'ASNs',
|
|
communities: 'Communities', servers: 'Servers', filters: 'Filters', billing: 'Billing', autoUrls: 'Auto URLs',
|
|
easySwitch: 'Easy Switch', networkConfig: 'Network Config', mikrotikBackups: 'MikroTik Backups',
|
|
light: 'Light', dark: 'Dark'
|
|
}
|
|
};
|
|
const t = (key) => (dict[lang] && key in dict[lang] ? dict[lang][key] : key);
|
|
return (
|
|
<LanguageContext.Provider value={{ lang, setLang, t }}>
|
|
{children}
|
|
</LanguageContext.Provider>
|
|
);
|
|
}
|
|
|
|
// --- Theme provider (light/dark) ---
|
|
const ThemeContext = createContext({ theme: 'light', setTheme: () => {} });
|
|
|
|
function ThemeProvider({ children }) {
|
|
const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'light');
|
|
useEffect(() => {
|
|
localStorage.setItem('theme', theme);
|
|
document.documentElement.setAttribute('data-bs-theme', theme);
|
|
}, [theme]);
|
|
return (
|
|
<ThemeContext.Provider value={{ theme, setTheme }}>
|
|
{children}
|
|
</ThemeContext.Provider>
|
|
);
|
|
}
|
|
// Единственный экземпляр QueryClient для всего приложения
|
|
const queryClient = new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
refetchOnWindowFocus: false,
|
|
staleTime: 30_000,
|
|
}
|
|
}
|
|
});
|
|
|
|
function App() {
|
|
return (
|
|
<ErrorBoundary>
|
|
<Router>
|
|
<QueryClientProvider client={queryClient}>
|
|
<LanguageProvider>
|
|
<ThemeProvider>
|
|
<ToastContainer>
|
|
<NotifyProvider>
|
|
<NetworkErrorHandler />
|
|
<MainLayout />
|
|
</NotifyProvider>
|
|
</ToastContainer>
|
|
</ThemeProvider>
|
|
</LanguageProvider>
|
|
</QueryClientProvider>
|
|
</Router>
|
|
</ErrorBoundary>
|
|
);
|
|
}
|
|
|
|
function MainLayout() {
|
|
const location = useLocation();
|
|
const { lang, setLang, t } = useContext(LanguageContext);
|
|
const { theme, setTheme } = useContext(ThemeContext);
|
|
// Навбар стал лаконичным: без неиспользуемых уведомлений/иконок
|
|
const [settingsOpen, setSettingsOpen] = useState(false);
|
|
|
|
// Состояние для управления выпадающими меню
|
|
const [dropdownStates, setDropdownStates] = useState({
|
|
data: false,
|
|
management: false,
|
|
tools: false
|
|
});
|
|
|
|
// Закрытие всех выпадающих меню при клике вне их области
|
|
useEffect(() => {
|
|
const handleClickOutside = (event) => {
|
|
if (!event.target.closest('.nav-item.dropdown')) {
|
|
setDropdownStates({
|
|
data: false,
|
|
management: false,
|
|
tools: false
|
|
});
|
|
}
|
|
};
|
|
|
|
document.addEventListener('click', handleClickOutside);
|
|
return () => {
|
|
document.removeEventListener('click', handleClickOutside);
|
|
};
|
|
}, []);
|
|
|
|
const toggleDropdown = (dropdown) => {
|
|
setDropdownStates(prev => {
|
|
// Закрываем все выпадающие меню
|
|
const newState = {
|
|
data: false,
|
|
management: false,
|
|
tools: false
|
|
};
|
|
// Открываем только выбранное меню, если оно было закрыто
|
|
if (!prev[dropdown]) {
|
|
newState[dropdown] = true;
|
|
}
|
|
return newState;
|
|
});
|
|
};
|
|
|
|
const navCategories = [
|
|
{
|
|
id: 'home',
|
|
title: t('home'),
|
|
icon: IconHome,
|
|
path: '/dashboard',
|
|
single: true
|
|
},
|
|
{
|
|
id: 'data',
|
|
title: t('data'),
|
|
icon: IconDatabase,
|
|
items: [
|
|
{ id: 'domains', title: t('domains'), path: '/domains', icon: IconWorld },
|
|
{ id: 'ip-ranges', title: t('ipRanges'), path: '/ip-ranges', icon: IconNetwork },
|
|
{ id: 'asns', title: t('asns'), path: '/asns', icon: IconNetwork },
|
|
{ id: 'communities', title: t('communities'), path: '/communities', icon: IconFilter }
|
|
]
|
|
},
|
|
{
|
|
id: 'management',
|
|
title: t('management'),
|
|
icon: IconServer,
|
|
items: [
|
|
{ id: 'servers', title: t('servers'), path: '/servers', icon: IconServer },
|
|
{ id: 'filters', title: t('filters'), path: '/filters', icon: IconFilter },
|
|
{ id: 'network-config', title: t('networkConfig'), path: '/network-config', icon: IconNetwork },
|
|
{ id: 'easy-switch', title: t('easySwitch'), path: '/easy-switch', icon: IconArrowsExchange },
|
|
{ id: 'billing', title: t('billing'), path: '/billing', icon: IconCreditCard }
|
|
]
|
|
},
|
|
{
|
|
id: 'tools',
|
|
title: t('tools'),
|
|
icon: IconSettings,
|
|
items: [
|
|
{ id: 'auto-urls', title: t('autoUrls'), path: '/auto-urls', icon: IconDownload },
|
|
{ id: 'mikrotik-backups', title: t('mikrotikBackups'), path: '/mikrotik-backups', icon: IconDatabase }
|
|
]
|
|
},
|
|
// Убрали неиспользуемые/неработающие разделы
|
|
];
|
|
|
|
// Определяем активную вкладку по адресу
|
|
const getActiveTab = () => {
|
|
for (const category of navCategories) {
|
|
if (category.single && location.pathname === category.path) {
|
|
return category.id;
|
|
}
|
|
if (category.items) {
|
|
for (const item of category.items) {
|
|
if (location.pathname.startsWith(item.path)) {
|
|
return item.id;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return 'home';
|
|
};
|
|
|
|
const activeTab = getActiveTab();
|
|
|
|
return (
|
|
<div className="page d-flex flex-column min-vh-100">
|
|
{/* Skip link для доступности */}
|
|
<a href="#main-content" className="skip-link">
|
|
Перейти к основному содержанию
|
|
</a>
|
|
|
|
{/* Верхнее меню Tabler Admin */}
|
|
<header className="navbar navbar-expand-md navbar-light d-print-none" style={{boxShadow: '0 1px 0 0 #e9ecef'}}>
|
|
<div className="container-xl">
|
|
{/* Логотип */}
|
|
<div className="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
|
|
<Link to="/" className="navbar-brand d-flex align-items-center">
|
|
<IconBrandTabler className="navbar-brand-icon me-2" />
|
|
<span className="fw-bold">S3 Lists Manager</span>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Кнопка бургера для мобильных */}
|
|
<button
|
|
className="navbar-toggler d-md-none"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#navbar-menu"
|
|
aria-controls="navbar-menu"
|
|
aria-expanded="false"
|
|
aria-label="Toggle navigation"
|
|
>
|
|
<IconMenu2 />
|
|
</button>
|
|
|
|
{/* Основное меню */}
|
|
<div className="collapse navbar-collapse" id="navbar-menu">
|
|
<div className="d-flex flex-column flex-md-row flex-fill align-items-stretch align-items-md-center">
|
|
<ul className="navbar-nav">
|
|
{navCategories.map(category => (
|
|
<li key={category.id} className="nav-item dropdown">
|
|
{category.single ? (
|
|
<Link
|
|
to={category.path}
|
|
className={`nav-link${activeTab === category.id ? ' active' : ''}`}
|
|
>
|
|
<category.icon className="icon icon-tabler" />
|
|
<span className="nav-link-title">{category.title}</span>
|
|
</Link>
|
|
) : (
|
|
<>
|
|
<a
|
|
className={`nav-link dropdown-toggle${activeTab.startsWith(category.id) ? ' active' : ''}`}
|
|
href="#"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
toggleDropdown(category.id);
|
|
}}
|
|
>
|
|
<category.icon className="icon icon-tabler" />
|
|
<span className="nav-link-title">{category.title}</span>
|
|
</a>
|
|
{dropdownStates[category.id] && (
|
|
<div className="dropdown-menu show" onClick={(e) => e.stopPropagation()}>
|
|
<div className="dropdown-menu-columns">
|
|
<div className="dropdown-menu-column">
|
|
{category.items.map(item => (
|
|
<Link
|
|
key={item.id}
|
|
to={item.path}
|
|
className={`dropdown-item${activeTab === item.id ? ' active' : ''}`}
|
|
>
|
|
<item.icon className="icon icon-tabler" />
|
|
{item.title}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Правая часть навбара: язык, тема и действия */}
|
|
<div className="navbar-nav flex-row order-md-last">
|
|
{/* Язык */}
|
|
<div className="nav-item dropdown me-1">
|
|
<a
|
|
href="#"
|
|
className="nav-link px-2 dropdown-toggle"
|
|
data-bs-toggle="dropdown"
|
|
onClick={(e) => e.preventDefault()}
|
|
>
|
|
<span className="badge">{lang.toUpperCase()}</span>
|
|
</a>
|
|
<div className="dropdown-menu dropdown-menu-end">
|
|
<a
|
|
href="#"
|
|
className={`dropdown-item ${lang === 'ru' ? 'active' : ''}`}
|
|
onClick={(e) => { e.preventDefault(); setLang('ru'); }}
|
|
>
|
|
Русский
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className={`dropdown-item ${lang === 'en' ? 'active' : ''}`}
|
|
onClick={(e) => { e.preventDefault(); setLang('en'); }}
|
|
>
|
|
English
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Тема */}
|
|
<div className="nav-item dropdown me-1">
|
|
<a
|
|
href="#"
|
|
className="nav-link px-2 dropdown-toggle"
|
|
data-bs-toggle="dropdown"
|
|
onClick={(e) => e.preventDefault()}
|
|
>
|
|
{theme === 'dark' ? '🌙' : '☀️'}
|
|
</a>
|
|
<div className="dropdown-menu dropdown-menu-end">
|
|
<a
|
|
href="#"
|
|
className={`dropdown-item ${theme === 'light' ? 'active' : ''}`}
|
|
onClick={(e) => { e.preventDefault(); setTheme('light'); }}
|
|
>
|
|
☀️ {t('light')}
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className={`dropdown-item ${theme === 'dark' ? 'active' : ''}`}
|
|
onClick={(e) => { e.preventDefault(); setTheme('dark'); }}
|
|
>
|
|
🌙 {t('dark')}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Горячие клавиши */}
|
|
<div className="nav-item me-1">
|
|
<KeyboardShortcutsButton className="nav-link px-2" />
|
|
</div>
|
|
|
|
{/* Настройки */}
|
|
<div className="nav-item">
|
|
<a
|
|
href="#"
|
|
className="nav-link px-2"
|
|
onClick={(e) => { e.preventDefault(); setSettingsOpen(true); }}
|
|
title="Настройки"
|
|
>
|
|
<IconSettings size={20} />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main id="main-content" className="container-xl mt-4 flex-grow-1" tabIndex="-1">
|
|
<Routes>
|
|
<Route path="/dashboard" element={<Dashboard />} />
|
|
<Route path="/domains" element={<DomainsNewManager />} />
|
|
<Route path="/ip-ranges" element={<IPRangesManager />} />
|
|
<Route path="/asns" element={<ASNsNewManager />} />
|
|
<Route path="/communities" element={<CommunitiesManager />} />
|
|
<Route path="/auto-urls" element={<AutoUrlManager />} />
|
|
<Route path="/servers" element={<ServerManager />} />
|
|
<Route path="/billing" element={<BillingManager />} />
|
|
<Route path="/filters" element={<FilterManager />} />
|
|
<Route path="/network-config" element={<NetworkConfigManager />} />
|
|
<Route path="/easy-switch" element={<EasySwitchManager />} />
|
|
<Route path="/mikrotik-backups" element={<MikrotikBackupsManager />} />
|
|
<Route path="/" element={<Navigate to="/dashboard" replace />} />
|
|
</Routes>
|
|
</main>
|
|
<footer className="footer mt-auto py-2">
|
|
<div className="container-xl text-muted small">
|
|
Версия UI: {import.meta?.env?.VITE_APP_VERSION || 'dev'}
|
|
</div>
|
|
</footer>
|
|
<SettingsModal open={settingsOpen} onClose={() => setSettingsOpen(false)} />
|
|
<CommandPalette />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
|
|
|
|
export default App;
|