'use strict';
const PS = {
status: null,
config: null,
};
// ─── API helpers ───
async function api(method, path, body) {
const opts = {
method,
headers: body ? (body instanceof FormData ? {} : { 'Content-Type': 'application/json' }) : {},
};
if (body && !(body instanceof FormData)) {
opts.body = JSON.stringify(body);
} else if (body instanceof FormData) {
opts.body = body;
}
const res = await fetch(path, opts);
const json = await res.json();
if (!res.ok || !json.success) {
throw new Error(json.error || `HTTP ${res.status}`);
}
return json.data;
}
const get = (path) => api('GET', path);
const post = (path, body) => api('POST', path, body);
const put = (path, body) => api('PUT', path, body);
function showToast(msg, type = 'info') {
const t = document.getElementById('toast');
t.textContent = msg;
t.className = `toast ${type}`;
t.classList.remove('hidden');
clearTimeout(t._timer);
t._timer = setTimeout(() => t.classList.add('hidden'), 3500);
}
function esc(s) {
if (s == null) return '';
const d = document.createElement('div');
d.textContent = String(s);
return d.innerHTML;
}
// ─── Segmented buttons ───
function setSegBtn(id, mode) {
document.querySelectorAll(`#${id} .seg-btn`).forEach(b => {
b.classList.toggle('active', b.dataset.mode === mode);
});
}
function getSegBtn(id) {
const active = document.querySelector(`#${id} .seg-btn.active`);
return active ? active.dataset.mode : '';
}
// Generic seg btn click handler
document.querySelectorAll('.segmented').forEach(seg => {
seg.addEventListener('click', e => {
const btn = e.target.closest('.seg-btn');
if (!btn || !seg.id) return;
seg.querySelectorAll('.seg-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
});
});
// ─── Config accessors ───
function getProxies() { return PS.config && Array.isArray(PS.config.proxies) ? PS.config.proxies : []; }
function getGroups() { return PS.config && Array.isArray(PS.config['proxy-groups']) ? PS.config['proxy-groups'] : []; }
function getRules() { return PS.config && Array.isArray(PS.config.rules) ? PS.config.rules : []; }
function getProxyProviders() {
const pp = PS.config && PS.config['proxy-providers'];
if (!pp || typeof pp !== 'object') return [];
return Object.entries(pp).map(([name, val]) => ({ name, ...val }));
}
function getRuleProviders() {
const rp = PS.config && PS.config['rule-providers'];
if (!rp || typeof rp !== 'object') return [];
return Object.entries(rp).map(([name, val]) => ({ name, ...val }));
}
// ─── Type labels ───
const PROTO_LABELS = {
ss: 'Shadowsocks', ssr: 'ShadowsocksR', vmess: 'VMess', vless: 'VLESS',
trojan: 'Trojan', hysteria: 'Hysteria', hysteria2: 'Hysteria2', tuic: 'TUIC',
wireguard: 'WireGuard', snell: 'Snell', ssh: 'SSH', anytls: 'AnyTLS',
mieru: 'Mieru', http: 'HTTP', socks5: 'SOCKS5', direct: 'DIRECT',
};
function typeLabel(t) { return PROTO_LABELS[t] || t; }
const GROUP_LABELS = { select: 'Выбор', 'url-test': 'Автотест', fallback: 'Резерв', 'load-balance': 'Балансировка', relay: 'Relay' };
function groupTypeLabel(t) { return GROUP_LABELS[t] || t; }
// ─── Load / Save ───
async function loadStatus() {
try {
PS.status = await get('/api/mihomo/status');
renderStatus();
} catch (e) {
console.error('load status', e);
}
}
async function loadConfig() {
try {
PS.config = await get('/api/mihomo/config');
renderAll();
} catch (e) {
console.error('load config', e);
PS.config = {};
renderAll();
showToast('Ошибка загрузки конфига: ' + e.message, 'error');
}
document.getElementById('loading').classList.add('hidden');
}
async function saveFullConfig(restart) {
try {
await put('/api/mihomo/config', PS.config);
showToast('Конфиг сохранён', 'success');
refreshYAMLPreview();
if (restart) {
try {
await post('/api/mihomo/restart', null);
showToast('Mihomo перезапущен', 'success');
} catch (e) {
showToast('Перезапуск не удался: ' + e.message, 'error');
}
await loadStatus();
}
} catch (e) {
showToast('Ошибка сохранения: ' + e.message, 'error');
}
}
async function refreshYAMLPreview() {
try {
const res = await fetch('/api/mihomo/config.yaml');
if (res.ok) {
const el = document.getElementById('yamlPreview');
if (el) el.value = await res.text();
}
} catch (e) { /* ignore */ }
}
// ─── Status rendering ───
function renderStatus() {
const s = PS.status;
if (!s) return;
const text = document.getElementById('statusText');
const headerBadge = document.getElementById('statusBadge');
const toggle = document.getElementById('serviceActive');
const toggleText = document.getElementById('serviceToggleText');
const restartBtn = document.getElementById('restartBtn');
const coreInfo = document.getElementById('coreInfo');
if (s.running) {
text.className = 'svc-badge running'; text.textContent = 'Запущен (PID ' + (s.pid || '?') + ')';
headerBadge.className = 'svc-badge running'; headerBadge.textContent = 'Запущен';
toggle.checked = true; toggleText.textContent = 'Запущен'; restartBtn.disabled = false;
} else {
text.className = 'svc-badge stopped'; text.textContent = 'Остановлен';
headerBadge.className = 'svc-badge stopped'; headerBadge.textContent = 'Остановлен';
toggle.checked = false; toggleText.textContent = 'Остановлен'; restartBtn.disabled = true;
}
const corePath = document.getElementById('corePath');
const coreExists = document.getElementById('coreExists');
const corePid = document.getElementById('corePid');
if (corePath) corePath.textContent = s.core_path || '—';
if (coreExists) coreExists.textContent = s.core_exists ? 'Да' : 'Нет';
if (corePid) corePid.textContent = s.running && s.pid ? s.pid : '—';
if (!s.core_exists) {
coreInfo.classList.remove('hidden');
} else {
coreInfo.classList.add('hidden');
}
document.getElementById('statusBar').classList.remove('hidden');
document.getElementById('loading').classList.add('hidden');
}
// ─── Render all ───
function renderAll() {
renderProxies();
renderGroups();
renderRules();
renderProxyProviders();
renderRuleProviders();
fillSettings();
refreshYAMLPreview();
}
// ─── Render proxies ───
function renderProxies() {
const list = document.getElementById('proxyList');
const empty = document.getElementById('proxyEmpty');
const proxies = getProxies();
list.innerHTML = '';
if (proxies.length === 0) { empty.classList.remove('hidden'); return; }
empty.classList.add('hidden');
proxies.forEach(p => {
const card = document.createElement('div');
card.className = 'proxy-card';
const server = p.type === 'direct' ? '' :
p.type === 'wireguard' ? (p.ip || '—') :
`Сервер${esc(p.server || '—')}
Порт${p.port || '—'}
`;
const tags = [
p.udp ? 'UDP' : '',
p.tls ? 'TLS' : '',
p.network ? `${esc(p.network)}` : '',
].filter(Boolean).join('');
card.innerHTML = `
${server}${tags ? `
${tags}
` : ''}
Узлы${pl || '—'}${more}
${g.url ? `
URL${esc(g.url)}
` : ''}
${g.interval ? `
Интервал${g.interval}с
` : ''}
`;
list.appendChild(card);
});
}
// ─── Render rules ───
function renderRules() {
const list = document.getElementById('rulesList');
const rules = getRules();
list.innerHTML = '';
if (rules.length === 0) { list.innerHTML = 'Нет правил маршрутизации
'; return; }
rules.forEach((rule, i) => {
const parts = rule.split(',');
const type = parts[0] || '';
const value = parts[1] || '';
const target = parts[2] || '';
const flags = parts.slice(3).join(',');
const el = document.createElement('div');
el.className = 'rule-item';
el.innerHTML = `
${esc(type)}
${esc(value || (type === 'MATCH' ? '*' : ''))}
${esc(target)}
${flags ? `${esc(flags)}` : ''}
`;
list.appendChild(el);
});
}
// ─── Render proxy providers ───
function renderProxyProviders() {
const list = document.getElementById('proxyProviderList');
const empty = document.getElementById('proxyProviderEmpty');
const providers = getProxyProviders();
list.innerHTML = '';
if (providers.length === 0) { empty.style.display = ''; return; }
empty.style.display = 'none';
providers.forEach(p => {
const card = document.createElement('div');
card.className = 'proxy-card';
card.innerHTML = `
${p.url ? `
URL${esc(p.url)}
` : ''}
${p.interval ? `
Интервал${p.interval}с
` : ''}
${p.filter ? `
Filter${esc(p.filter)}
` : ''}
${p.url ? `
URL${esc(p.url)}
` : ''}
${p.format ? `
Format${esc(p.format)}
` : ''}
Нет групп прокси. Добавьте группы во вкладке «Группы».
';
return;
}
groupEntries.sort((a, b) => {
const order = ['Selector', 'URLTest', 'Fallback', 'LoadBalance', 'Relay'];
return (order.indexOf(a[1].type) || 99) - (order.indexOf(b[1].type) || 99);
});
for (const [name, g] of groupEntries) {
const card = document.createElement('div');
card.className = 'dash-group-card';
const members = (g.all || []).map(m => {
const p = DA.proxies[m] || DA.groups[m] || {};
const delay = p.history && p.history.length ? p.history[p.history.length - 1].delay : undefined;
const dead = delay === undefined || delay === 0;
let delayText = '—';
let delayClass = 'dash-delay-unknown';
if (!dead) {
delayText = delay + 'ms';
delayClass = delay < 200 ? 'dash-delay-good' : delay < 500 ? 'dash-delay-medium' : 'dash-delay-slow';
}
const isActive = g.now === m;
const type = p.type || '';
return `
${esc(m)}
${esc(type)}
${delayText}
`;
}).join('');
card.innerHTML = `
`;
list.appendChild(card);
}
}
document.addEventListener('click', (e) => {
const proxyItem = e.target.closest('.dash-proxy-item');
if (proxyItem) {
const groupName = proxyItem.dataset.group;
const proxyName = proxyItem.dataset.proxy;
dashSwitchProxy(groupName, proxyName);
}
const pingBtn = e.target.closest('.dash-ping-group-btn');
if (pingBtn) {
const groupName = pingBtn.dataset.group;
const group = DA.groups[groupName];
if (group && group.all) {
for (const name of group.all) {
mihomoAPI('proxies/' + encodeURIComponent(name) + '/delay?timeout=5000&url=https://www.gstatic.com/generate_204').catch(() => {});
}
showToast('Пинг группы ' + groupName + '...', 'info');
setTimeout(() => loadDashProxies().then(() => renderDashGroups()), 3000);
}
}
if (e.target.closest('#dashPingAllBtn')) {
dashPingAll();
}
if (e.target.closest('#dashCloseAllConnsBtn')) {
dashCloseAllConnections();
}
const closeConnBtn = e.target.closest('.dash-conn-close');
if (closeConnBtn) {
dashCloseConnection(closeConnBtn.dataset.id);
}
});
function renderDashConnections() {
const tbody = document.getElementById('dashConnBody');
const countEl = document.getElementById('dashConnCount');
if (!tbody) return;
if (countEl) countEl.textContent = DA.connections.length;
tbody.innerHTML = '';
const conns = DA.connections.slice(0, 100);
for (const c of conns) {
const meta = c.metadata || {};
const host = (meta.host || meta.destinationIP || '') + (meta.destinationPort ? ':' + meta.destinationPort : '');
const chain = (c.chains || []).reverse().join(' → ') || '—';
const tr = document.createElement('tr');
tr.innerHTML = `
${esc(host.length > 40 ? host.slice(0, 40) + '...' : host)} |
${esc(meta.network || '')} |
${esc(chain.length > 30 ? chain.slice(0, 30) + '...' : chain)} |
${formatBytes(c.upload || 0)} |
${formatBytes(c.download || 0)} |
| `;
tbody.appendChild(tr);
}
if (conns.length === 0) {
tbody.innerHTML = '| Нет активных соединений |
';
}
}
function startDashPolling() {
stopDashPolling();
loadDashInitial();
openDashWS();
dashTrafficInterval = setInterval(() => {
DA.totalUp += DA.trafficUp;
DA.totalDown += DA.trafficDown;
document.getElementById('dashUp').textContent = formatBytesPerSec(DA.trafficUp);
document.getElementById('dashDown').textContent = formatBytesPerSec(DA.trafficDown);
document.getElementById('dashUpTotal').textContent = formatBytes(DA.totalUp);
document.getElementById('dashDownTotal').textContent = formatBytes(DA.totalDown);
document.getElementById('dashMem').textContent = formatBytes(DA.memory);
}, 1000);
dashConnsInterval = setInterval(loadDashConnections, 3000);
}
function stopDashPolling() {
if (dashTrafficInterval) { clearInterval(dashTrafficInterval); dashTrafficInterval = null; }
if (dashConnsInterval) { clearInterval(dashConnsInterval); dashConnsInterval = null; }
closeDashWS();
}
function updateDashVisibility() {
const online = document.getElementById('dashOnline');
const offline = document.getElementById('dashOffline');
if (!online || !offline) return;
if (PS.status && PS.status.running) {
online.classList.remove('hidden');
offline.classList.add('hidden');
} else {
online.classList.add('hidden');
offline.classList.remove('hidden');
stopDashPolling();
}
}
// ════════════════════════════════════════════════════════════
// INIT
// ════════════════════════════════════════════════════════════
(async () => {
try { await loadStatus(); } catch (e) { console.error('status', e); }
try { await loadConfig(); } catch (e) { console.error('config', e); }
updateDashVisibility();
if (PS.status && PS.status.running) startDashPolling();
})();