feat: добавлены новые компоненты для управления правилами и серверами
All checks were successful
Build and Deploy Gateway / build-and-deploy (push) Successful in 25s
All checks were successful
Build and Deploy Gateway / build-and-deploy (push) Successful in 25s
- Создан компонент RuleEditorDrawer для редактирования правил с поддержкой JSON. - Добавлен компонент ServersPage для отображения и управления серверами. - Реализован компонент SettingsPage для управления подписками и конфигурациями. - Создан компонент Sidebar для навигации по приложению. - Добавлен компонент StatusPane для отображения статуса сервера. - Реализован компонент Toasts для отображения уведомлений. - Создан компонент Topbar для отображения информации о текущем состоянии. - Добавлен модуль country.js для определения страны по тегу сервера. Refs: None
This commit is contained in:
223
src/web/components/RoutingPage.jsx
Normal file
223
src/web/components/RoutingPage.jsx
Normal file
@@ -0,0 +1,223 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import {
|
||||
DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors,
|
||||
} from '@dnd-kit/core';
|
||||
import {
|
||||
arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, useSortable,
|
||||
} from '@dnd-kit/sortable';
|
||||
import { CSS } from '@dnd-kit/utilities';
|
||||
import { ruleTemplates } from '../templates/ruleTemplates.js';
|
||||
import { ruleErrors, hasErrors } from '../utils/validation.js';
|
||||
import { RuleEditorDrawer } from './RuleEditorDrawer.jsx';
|
||||
import { RouteChecker } from './RouteChecker.jsx';
|
||||
import { api } from '../api.js';
|
||||
|
||||
const OUTBOUND_KIND = {
|
||||
direct: { kind: 'success', label: 'direct' },
|
||||
vpn: { kind: 'info', label: 'VPN' },
|
||||
block: { kind: 'danger', label: 'block' },
|
||||
};
|
||||
|
||||
function summary(rule) {
|
||||
const parts = [];
|
||||
const totalDomains = (rule.domains?.length || 0) + (rule.domainSuffixes?.length || 0) + (rule.domainKeywords?.length || 0);
|
||||
if (totalDomains) parts.push(`${totalDomains} дом.`);
|
||||
if (rule.ipCidrs?.length) parts.push(`${rule.ipCidrs.length} CIDR`);
|
||||
if (rule.ports?.length) parts.push(`${rule.ports.length} портов`);
|
||||
if (rule.networks?.length) parts.push(rule.networks.join('/'));
|
||||
return parts.join(' · ') || '—';
|
||||
}
|
||||
|
||||
function SortableRuleRow({ rule, index, total, onEdit, onUpdate, onRemove, conflict }) {
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: rule.id });
|
||||
const style = { transform: CSS.Transform.toString(transform), transition, opacity: isDragging ? 0.5 : 1 };
|
||||
const errors = ruleErrors(rule);
|
||||
const invalid = hasErrors(errors);
|
||||
const ob = OUTBOUND_KIND[rule.outbound] || OUTBOUND_KIND.direct;
|
||||
|
||||
return (
|
||||
<tr ref={setNodeRef} style={style} className={`rule-row ${rule.enabled ? '' : 'disabled'} ${invalid ? 'invalid' : ''}`}>
|
||||
<td style={{ width: 30 }}>
|
||||
<span className="drag-handle" {...attributes} {...listeners} title="Перетащить">⠿</span>
|
||||
</td>
|
||||
<td style={{ width: 36 }} className="muted text-mono">#{index + 1}</td>
|
||||
<td>
|
||||
<div className="flex" style={{ alignItems: 'center' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={rule.enabled !== false}
|
||||
onChange={(e) => onUpdate(rule.id, { enabled: e.target.checked })}
|
||||
style={{ accentColor: 'var(--accent)' }}
|
||||
/>
|
||||
<button className="btn btn-link" style={{ padding: 0, fontWeight: 600 }} onClick={() => onEdit(rule.id)}>
|
||||
{rule.name || '(без названия)'}
|
||||
</button>
|
||||
{invalid && <span className="badge danger">ошибки</span>}
|
||||
{conflict && <span className={`badge ${conflict.severity === 'warning' ? 'warning' : 'info'}`} title={`Перекрывается с #${conflict.conflictWithIndex + 1}`}>конфликт</span>}
|
||||
</div>
|
||||
</td>
|
||||
<td><span className={`badge ${ob.kind}`}>{ob.label}</span></td>
|
||||
<td className="muted" style={{ fontSize: 12 }}>{summary(rule)}</td>
|
||||
<td style={{ textAlign: 'right' }}>
|
||||
<div className="row-actions">
|
||||
<button className="btn btn-ghost sm" onClick={() => onEdit(rule.id)}>Редактировать</button>
|
||||
<button className="btn btn-ghost sm" onClick={() => { if (confirm('Удалить правило?')) onRemove(rule.id); }}>×</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
function TemplatesModal({ open, onClose, onAdd }) {
|
||||
if (!open) return null;
|
||||
return (
|
||||
<div className="modal-backdrop" onClick={onClose}>
|
||||
<div className="modal lg" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="modal-head">
|
||||
<h3>Шаблоны маршрутизации</h3>
|
||||
<button className="btn btn-ghost sm" onClick={onClose}>Закрыть</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="template-grid">
|
||||
{ruleTemplates.map((tpl) => (
|
||||
<div key={tpl.key} className="template-card">
|
||||
<h4>{tpl.label}</h4>
|
||||
<small>{tpl.description}</small>
|
||||
<button className="btn btn-secondary sm" onClick={() => { onAdd(tpl.build()); onClose(); }}>
|
||||
+ Добавить
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function RoutingPage({
|
||||
rules, saveStatus, busy,
|
||||
onAdd, onAddTemplate, onUpdate, onRemove, onSaveNow, onReorder,
|
||||
}) {
|
||||
const [editingId, setEditingId] = useState(null);
|
||||
const [showTemplates, setShowTemplates] = useState(false);
|
||||
const [conflicts, setConflicts] = useState([]);
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
|
||||
useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
const t = setTimeout(() => {
|
||||
api.rules.conflicts().then((data) => { if (!cancelled) setConflicts(data.conflicts || []); }).catch(() => {});
|
||||
}, 600);
|
||||
return () => { cancelled = true; clearTimeout(t); };
|
||||
}, [rules]);
|
||||
|
||||
const conflictsByRuleId = useMemo(() => {
|
||||
const map = {};
|
||||
for (const c of conflicts) map[c.ruleId] = c;
|
||||
return map;
|
||||
}, [conflicts]);
|
||||
|
||||
function handleDragEnd(event) {
|
||||
const { active, over } = event;
|
||||
if (!over || active.id === over.id) return;
|
||||
const oldIndex = rules.findIndex((r) => r.id === active.id);
|
||||
const newIndex = rules.findIndex((r) => r.id === over.id);
|
||||
if (oldIndex < 0 || newIndex < 0) return;
|
||||
onReorder(arrayMove(rules, oldIndex, newIndex));
|
||||
}
|
||||
|
||||
const editing = rules.find((r) => r.id === editingId) || null;
|
||||
|
||||
return (
|
||||
<div className="section-stack">
|
||||
<RouteChecker />
|
||||
|
||||
<div className="card">
|
||||
<div className="card-header">
|
||||
<h2>Правила маршрутизации</h2>
|
||||
<div className="btn-group">
|
||||
<button className="btn btn-secondary sm" onClick={() => setShowTemplates(true)}>Шаблоны</button>
|
||||
<button className="btn btn-primary sm" onClick={() => { const newId = `rule-${Date.now()}`; onAdd(); setTimeout(() => setEditingId(newId), 50); }}>
|
||||
+ Добавить
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{conflicts.length > 0 && (
|
||||
<div className="conflict-banner" style={{ marginBottom: 12 }}>
|
||||
<span>⚠</span>
|
||||
<div>
|
||||
<strong>{conflicts.length} конфликт(ов) обнаружено</strong>
|
||||
<div style={{ marginTop: 4 }}>
|
||||
{conflicts.slice(0, 3).map((c, i) => (
|
||||
<div key={i} style={{ fontSize: 12 }}>
|
||||
#{c.ruleIndex + 1} «{c.ruleName}» перекрывается правилом #{c.conflictWithIndex + 1} «{c.conflictWithName}»
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<small className="muted" style={{ display: 'block', marginBottom: 8 }}>
|
||||
Применяются <strong>сверху вниз</strong>. Перетаскивай ⠿ чтобы менять порядок.
|
||||
</small>
|
||||
|
||||
{rules.length === 0 ? (
|
||||
<div className="empty-state">
|
||||
<h3>Правил пока нет</h3>
|
||||
<p>Добавь шаблон (например «League of Legends → direct») или создай пустое правило.</p>
|
||||
<button className="btn btn-primary" onClick={() => setShowTemplates(true)} style={{ marginTop: 12 }}>
|
||||
Открыть шаблоны
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ overflowX: 'auto' }}>
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>#</th>
|
||||
<th>Правило</th>
|
||||
<th>Outbound</th>
|
||||
<th>Условия</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
|
||||
<SortableContext items={rules.map((r) => r.id)} strategy={verticalListSortingStrategy}>
|
||||
{rules.map((rule, i) => (
|
||||
<SortableRuleRow
|
||||
key={rule.id}
|
||||
rule={rule}
|
||||
index={i}
|
||||
total={rules.length}
|
||||
onEdit={setEditingId}
|
||||
onUpdate={onUpdate}
|
||||
onRemove={onRemove}
|
||||
conflict={conflictsByRuleId[rule.id]}
|
||||
/>
|
||||
))}
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<RuleEditorDrawer
|
||||
rule={editing}
|
||||
onUpdate={onUpdate}
|
||||
onClose={() => setEditingId(null)}
|
||||
onRemove={onRemove}
|
||||
/>
|
||||
<TemplatesModal open={showTemplates} onClose={() => setShowTemplates(false)} onAdd={onAddTemplate} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user