feat: replace console connection panel with runtime stats
This commit is contained in:
@@ -52,11 +52,19 @@
|
||||
$('queue-id').value = defaultQueue;
|
||||
sessionStorage.setItem('orbit.console.queue', defaultQueue);
|
||||
text('queue-hint', '已使用服务端默认队列配置；也可选择凭据 JSON 覆盖。');
|
||||
renderConnectionSummary();
|
||||
}
|
||||
} catch {
|
||||
// 连接表单仍可使用手工 API 地址和凭据，不因可选配置失败而阻断页面。
|
||||
}
|
||||
}
|
||||
function renderConnectionSummary() {
|
||||
text('summary-api', state.base || location.origin);
|
||||
text('summary-api-hint', state.connected ? '接口响应正常，按 10 秒周期刷新' : 'API 地址自动跟随当前页面');
|
||||
text('summary-queue', state.queue ? shortID(state.queue) : '未配置');
|
||||
text('summary-credential', state.token ? '已载入' : '未载入');
|
||||
text('summary-note', state.token && state.queue ? '已具备读取业务数据的连接条件。' : '服务状态会自动检查；需要业务数据时再加载凭据。');
|
||||
}
|
||||
function setConnection(connected, detail = '') {
|
||||
state.connected = connected;
|
||||
const authenticated = connected && Boolean(state.token && state.queue);
|
||||
@@ -68,6 +76,7 @@
|
||||
document.querySelector('.status-dot').classList.toggle('ready', connected);
|
||||
document.querySelector('.live-chip').classList.toggle('ready', connected);
|
||||
$('live-label').textContent = connected ? '环境在线' : '本地环境';
|
||||
renderConnectionSummary();
|
||||
if (detail) showToast(detail);
|
||||
}
|
||||
async function loadHealth() {
|
||||
@@ -124,6 +133,35 @@
|
||||
row.addEventListener('keydown', event => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); openSubscriptionDetail(row.dataset.subscriptionId); } });
|
||||
});
|
||||
}
|
||||
function renderRuntimeStats(tasks, schedules, workflows, subscriptions) {
|
||||
if (Array.isArray(tasks)) {
|
||||
const counts = tasks.reduce((acc, item) => { const key = stateClass(item.state); acc[key] = (acc[key] || 0) + 1; return acc; }, {});
|
||||
const total = tasks.length;
|
||||
text('stat-success-rate', total ? `${Math.round((counts.succeeded || 0) / total * 100)}%` : '—');
|
||||
text('stat-success-rate-sub', total ? `${counts.succeeded || 0} 成功 / ${total} 项` : '当前没有任务');
|
||||
text('stat-task-total', `${total} 项`);
|
||||
const waiting = (counts.waiting || 0) + (counts.pending || 0);
|
||||
const other = (counts.failed || 0) + (counts.cancelled || 0) + (counts.needs_review || 0);
|
||||
const width = value => `${total ? value / total * 100 : 0}%`;
|
||||
[['succeeded', counts.succeeded || 0], ['running', counts.running || 0], ['waiting', waiting], ['other', other]].forEach(([name, value]) => { $(`stat-bar-${name}`).style.width = width(value); text(`stat-count-${name}`, String(value)); });
|
||||
} else {
|
||||
text('stat-success-rate', '—'); text('stat-success-rate-sub', '暂无任务权限'); text('stat-task-total', '暂无数据');
|
||||
['succeeded', 'running', 'waiting', 'other'].forEach(name => { $(`stat-bar-${name}`).style.width = '0%'; text(`stat-count-${name}`, '—'); });
|
||||
}
|
||||
if (Array.isArray(schedules)) {
|
||||
const active = schedules.filter(item => item.paused !== true).length;
|
||||
text('stat-active-schedules', String(active)); text('stat-active-schedules-sub', `${schedules.length} 项计划 · ${schedules.length - active} 项暂停`);
|
||||
} else { text('stat-active-schedules', '—'); text('stat-active-schedules-sub', '暂无计划权限'); }
|
||||
if (Array.isArray(workflows)) {
|
||||
const review = workflows.filter(item => stateClass(item.state) === 'needs_review').length;
|
||||
text('stat-review-workflows', String(review)); text('stat-review-workflows-sub', `${workflows.length} 项流程实例`);
|
||||
} else { text('stat-review-workflows', '—'); text('stat-review-workflows-sub', '暂无流程权限'); }
|
||||
if (Array.isArray(subscriptions)) {
|
||||
const pending = subscriptions.reduce((sum, item) => sum + (Number(item.pending_count) || 0), 0);
|
||||
text('stat-pending-deliveries', String(pending)); text('stat-pending-deliveries-sub', `${subscriptions.length} 个订阅 · 待确认结果`);
|
||||
} else { text('stat-pending-deliveries', '—'); text('stat-pending-deliveries-sub', '暂无事件权限'); }
|
||||
text('stats-snapshot', state.connected ? `更新于 ${formatTime(new Date())}` : '等待连接');
|
||||
}
|
||||
function escapeHTML(value) { return String(value ?? '').replace(/[&<>'"]/g, char => ({ '&': '&', '<': '<', '>': '>', "'": ''', '"': '"' }[char])); }
|
||||
function formatJSON(value) {
|
||||
if (value === undefined || value === null || value === '') return '';
|
||||
@@ -134,6 +172,8 @@
|
||||
return `console-${prefix}-${id}`.slice(0, 128);
|
||||
}
|
||||
function terminalState(value) { return ['SUCCEEDED', 'FAILED', 'CANCELLED'].includes(value); }
|
||||
function openConnectionSettings() { $('connection-settings-backdrop').hidden = false; document.body.classList.add('drawer-open'); $('api-url').focus(); }
|
||||
function closeConnectionSettings() { $('connection-settings-backdrop').hidden = true; document.body.classList.remove('drawer-open'); }
|
||||
function showTaskDrawer() { $('task-drawer-backdrop').hidden = false; document.body.classList.add('drawer-open'); }
|
||||
function closeTaskDrawer() { $('task-drawer-backdrop').hidden = true; document.body.classList.remove('drawer-open'); closeActionForm(); }
|
||||
function renderDetailList(id, items, emptyText, renderItem) {
|
||||
@@ -413,17 +453,20 @@
|
||||
if (state.loading) return; state.loading = true; $('refresh-button').classList.add('spinning');
|
||||
try {
|
||||
await loadHealth();
|
||||
if (!state.token || !state.queue) { setConnection(true); text('last-updated', `服务在线 · ${formatTime(new Date())}`); return; }
|
||||
const tasks = await request(`/v1/tasks?queue_id=${encodeURIComponent(state.queue)}&limit=20`); renderTasks(extractItems(tasks));
|
||||
if (!state.token || !state.queue) { renderRuntimeStats(null, null, null, null); setConnection(true); text('last-updated', `服务在线 · ${formatTime(new Date())}`); return; }
|
||||
const tasks = await request(`/v1/tasks?queue_id=${encodeURIComponent(state.queue)}&limit=20`); const taskItems = extractItems(tasks); renderTasks(taskItems);
|
||||
const optional = await Promise.allSettled([
|
||||
request(`/v1/schedules?queue_id=${encodeURIComponent(state.queue)}&limit=20`),
|
||||
request('/v1/workflows?limit=20'),
|
||||
request(`/v1/subscriptions?queue_id=${encodeURIComponent(state.queue)}&limit=20`),
|
||||
]);
|
||||
if (optional[0].status === 'fulfilled') renderSchedules(extractItems(optional[0].value));
|
||||
if (optional[1].status === 'fulfilled') renderWorkflows(extractItems(optional[1].value));
|
||||
if (optional[2].status === 'fulfilled') renderSubscriptions(extractItems(optional[2].value));
|
||||
setConnection(true); text('last-updated', `刚刚更新 · ${formatTime(new Date())}`); text('metric-health-sub', '数据库与 Schema 正常');
|
||||
const scheduleItems = optional[0].status === 'fulfilled' ? extractItems(optional[0].value) : null;
|
||||
const workflowItems = optional[1].status === 'fulfilled' ? extractItems(optional[1].value) : null;
|
||||
const subscriptionItems = optional[2].status === 'fulfilled' ? extractItems(optional[2].value) : null;
|
||||
if (scheduleItems) renderSchedules(scheduleItems);
|
||||
if (workflowItems) renderWorkflows(workflowItems);
|
||||
if (subscriptionItems) renderSubscriptions(subscriptionItems);
|
||||
setConnection(true); renderRuntimeStats(taskItems, scheduleItems, workflowItems, subscriptionItems); text('last-updated', `刚刚更新 · ${formatTime(new Date())}`); text('metric-health-sub', '数据库与 Schema 正常');
|
||||
} catch (error) { setConnection(false); showToast(`连接失败：${error.message}`); text('last-updated', '刷新失败'); }
|
||||
finally { state.loading = false; $('refresh-button').classList.remove('spinning'); }
|
||||
}
|
||||
@@ -433,14 +476,15 @@
|
||||
sessionStorage.setItem('orbit.console.queue', state.queue);
|
||||
if (!state.token) showToast('服务状态可以直接查看；选择凭据 JSON 后可读取业务数据');
|
||||
else if (!state.queue) showToast('队列会从凭据 JSON 自动读取，也可配置 ORBIT_CONSOLE_QUEUE_ID');
|
||||
closeConnectionSettings();
|
||||
refresh();
|
||||
}
|
||||
$('connect-button').addEventListener('click', connect); $('connect-hero').addEventListener('click', () => $('connection-panel').scrollIntoView({ behavior: 'smooth', block: 'center' })); $('refresh-button').addEventListener('click', refresh);
|
||||
$('close-task-drawer').addEventListener('click', closeTaskDrawer); $('task-drawer-backdrop').addEventListener('click', event => { if (event.target.id === 'task-drawer-backdrop') closeTaskDrawer(); }); $('action-cancel').addEventListener('click', closeActionForm); $('task-action-form').addEventListener('submit', submitAction); $('task-cancel-button').addEventListener('click', () => openActionForm('cancel')); $('task-retry-button').addEventListener('click', () => openActionForm('retry')); $('close-schedule-drawer').addEventListener('click', closeScheduleDrawer); $('schedule-drawer-backdrop').addEventListener('click', event => { if (event.target.id === 'schedule-drawer-backdrop') closeScheduleDrawer(); }); $('schedule-control-button').addEventListener('click', openScheduleAction); $('schedule-action-cancel').addEventListener('click', closeScheduleAction); $('schedule-action-form').addEventListener('submit', submitScheduleAction); $('close-workflow-drawer').addEventListener('click', closeWorkflowDrawer); $('workflow-drawer-backdrop').addEventListener('click', event => { if (event.target.id === 'workflow-drawer-backdrop') closeWorkflowDrawer(); }); $('workflow-control-button').addEventListener('click', () => openWorkflowAction(state.selectedWorkflow?.paused ? 'RESUME' : 'PAUSE')); $('workflow-cancel-button').addEventListener('click', () => openWorkflowAction('CANCEL')); $('workflow-action-cancel').addEventListener('click', closeWorkflowAction); $('workflow-action-form').addEventListener('submit', submitWorkflowAction); $('close-subscription-drawer').addEventListener('click', closeSubscriptionDrawer); $('subscription-drawer-backdrop').addEventListener('click', event => { if (event.target.id === 'subscription-drawer-backdrop') closeSubscriptionDrawer(); }); $('subscription-control-button').addEventListener('click', openSubscriptionAction); $('subscription-action-cancel').addEventListener('click', closeSubscriptionAction); $('subscription-action-form').addEventListener('submit', submitSubscriptionAction); $('subscription-retry-cancel').addEventListener('click', closeSubscriptionRetry); $('subscription-retry-form').addEventListener('submit', submitSubscriptionRetry); document.addEventListener('keydown', event => { if (event.key === 'Escape') { if (!$('task-action-form').hidden) closeActionForm(); else if (!$('schedule-action-form').hidden) closeScheduleAction(); else if (!$('workflow-action-form').hidden) closeWorkflowAction(); else if (!$('subscription-action-form').hidden) closeSubscriptionAction(); else if (!$('subscription-retry-form').hidden) closeSubscriptionRetry(); else if (!$('task-drawer-backdrop').hidden) closeTaskDrawer(); else if (!$('schedule-drawer-backdrop').hidden) closeScheduleDrawer(); else if (!$('workflow-drawer-backdrop').hidden) closeWorkflowDrawer(); else if (!$('subscription-drawer-backdrop').hidden) closeSubscriptionDrawer(); } });
|
||||
$('connect-button').addEventListener('click', connect); $('connect-hero').addEventListener('click', openConnectionSettings); $('connection-settings-button').addEventListener('click', openConnectionSettings); $('connection-settings-inline').addEventListener('click', openConnectionSettings); $('close-connection-settings').addEventListener('click', closeConnectionSettings); $('connection-settings-backdrop').addEventListener('click', event => { if (event.target.id === 'connection-settings-backdrop') closeConnectionSettings(); }); $('refresh-button').addEventListener('click', refresh);
|
||||
$('close-task-drawer').addEventListener('click', closeTaskDrawer); $('task-drawer-backdrop').addEventListener('click', event => { if (event.target.id === 'task-drawer-backdrop') closeTaskDrawer(); }); $('action-cancel').addEventListener('click', closeActionForm); $('task-action-form').addEventListener('submit', submitAction); $('task-cancel-button').addEventListener('click', () => openActionForm('cancel')); $('task-retry-button').addEventListener('click', () => openActionForm('retry')); $('close-schedule-drawer').addEventListener('click', closeScheduleDrawer); $('schedule-drawer-backdrop').addEventListener('click', event => { if (event.target.id === 'schedule-drawer-backdrop') closeScheduleDrawer(); }); $('schedule-control-button').addEventListener('click', openScheduleAction); $('schedule-action-cancel').addEventListener('click', closeScheduleAction); $('schedule-action-form').addEventListener('submit', submitScheduleAction); $('close-workflow-drawer').addEventListener('click', closeWorkflowDrawer); $('workflow-drawer-backdrop').addEventListener('click', event => { if (event.target.id === 'workflow-drawer-backdrop') closeWorkflowDrawer(); }); $('workflow-control-button').addEventListener('click', () => openWorkflowAction(state.selectedWorkflow?.paused ? 'RESUME' : 'PAUSE')); $('workflow-cancel-button').addEventListener('click', () => openWorkflowAction('CANCEL')); $('workflow-action-cancel').addEventListener('click', closeWorkflowAction); $('workflow-action-form').addEventListener('submit', submitWorkflowAction); $('close-subscription-drawer').addEventListener('click', closeSubscriptionDrawer); $('subscription-drawer-backdrop').addEventListener('click', event => { if (event.target.id === 'subscription-drawer-backdrop') closeSubscriptionDrawer(); }); $('subscription-control-button').addEventListener('click', openSubscriptionAction); $('subscription-action-cancel').addEventListener('click', closeSubscriptionAction); $('subscription-action-form').addEventListener('submit', submitSubscriptionAction); $('subscription-retry-cancel').addEventListener('click', closeSubscriptionRetry); $('subscription-retry-form').addEventListener('submit', submitSubscriptionRetry); document.addEventListener('keydown', event => { if (event.key === 'Escape') { if (!$('connection-settings-backdrop').hidden) closeConnectionSettings(); else if (!$('task-action-form').hidden) closeActionForm(); else if (!$('schedule-action-form').hidden) closeScheduleAction(); else if (!$('workflow-action-form').hidden) closeWorkflowAction(); else if (!$('subscription-action-form').hidden) closeSubscriptionAction(); else if (!$('subscription-retry-form').hidden) closeSubscriptionRetry(); else if (!$('task-drawer-backdrop').hidden) closeTaskDrawer(); else if (!$('schedule-drawer-backdrop').hidden) closeScheduleDrawer(); else if (!$('workflow-drawer-backdrop').hidden) closeWorkflowDrawer(); else if (!$('subscription-drawer-backdrop').hidden) closeSubscriptionDrawer(); } });
|
||||
$('workflow-recovery-actions').addEventListener('click', event => { const button = event.target.closest('[data-recovery-action]'); if (!button) return; let context = {}; try { context = JSON.parse(button.dataset.recoveryContext || '{}'); } catch { showToast('恢复按钮上下文无效，请重新读取流程'); return; } openWorkflowRecovery(button.dataset.recoveryAction, context); }); $('workflow-recovery-cancel').addEventListener('click', closeWorkflowRecovery); $('workflow-recovery-form').addEventListener('submit', submitWorkflowRecovery);
|
||||
document.addEventListener('keydown', event => { if (event.key === 'Escape' && !$('workflow-recovery-form').hidden) closeWorkflowRecovery(); });
|
||||
$('reveal-token').addEventListener('click', () => { const field = $('token'); field.type = field.type === 'password' ? 'text' : 'password'; $('reveal-token').textContent = field.type === 'password' ? '显示' : '隐藏'; });
|
||||
$('credential-file').addEventListener('change', event => { const file = event.target.files?.[0]; if (!file) return; const reader = new FileReader(); reader.onload = () => { try { const credential = JSON.parse(reader.result); const queue = String(credential.queue_id || state.consoleConfig?.default_queue_id || '').trim(); $('token').value = credential.token || ''; $('queue-id').value = queue; state.queue = queue; sessionStorage.setItem('orbit.console.queue', queue); text('queue-hint', queue ? '队列已从凭据 JSON 自动读取；无需手工填写。' : '凭据未附带队列，请配置 ORBIT_CONSOLE_QUEUE_ID。'); showToast(queue ? '凭据已读取，队列已自动填充' : '凭据已读取，但缺少队列配置'); } catch { showToast('凭据 JSON 无法解析'); } }; reader.readAsText(file); });
|
||||
$('credential-file').addEventListener('change', event => { const file = event.target.files?.[0]; if (!file) return; const reader = new FileReader(); reader.onload = () => { try { const credential = JSON.parse(reader.result); const queue = String(credential.queue_id || state.consoleConfig?.default_queue_id || '').trim(); $('token').value = credential.token || ''; $('queue-id').value = queue; state.queue = queue; state.token = String(credential.token || '').trim(); sessionStorage.setItem('orbit.console.queue', queue); text('queue-hint', queue ? '队列已从凭据 JSON 自动读取；无需手工填写。' : '凭据未附带队列，请配置 ORBIT_CONSOLE_QUEUE_ID。'); renderConnectionSummary(); showToast(queue ? '凭据已读取，队列已自动填充' : '凭据已读取，但缺少队列配置'); } catch { showToast('凭据 JSON 无法解析'); } }; reader.readAsText(file); });
|
||||
document.querySelectorAll('[data-view]').forEach(button => button.addEventListener('click', event => { event.preventDefault(); setView(button.dataset.view); }));
|
||||
window.addEventListener('hashchange', () => setView(currentView(), false));
|
||||
setView(currentView(), false);
|
||||
|
||||
@@ -40,6 +40,7 @@
|
||||
<div class="topbar-actions">
|
||||
<span class="live-chip"><i></i><span id="live-label">本地环境</span></span>
|
||||
<span class="last-updated" id="last-updated">尚未刷新</span>
|
||||
<button class="icon-button" id="connection-settings-button" title="连接设置" aria-label="连接设置">⚙</button>
|
||||
<button class="icon-button" id="refresh-button" title="刷新数据" aria-label="刷新数据">↻</button>
|
||||
</div>
|
||||
</header>
|
||||
@@ -52,7 +53,7 @@
|
||||
<p>任务、定时、流程和交付状态，在一块屏幕上保持有序运转。</p>
|
||||
<div class="hero-actions">
|
||||
<button class="primary-button" data-view="tasks">查看任务 <span>↗</span></button>
|
||||
<button class="quiet-button" id="connect-hero">连接环境</button>
|
||||
<button class="quiet-button" id="connect-hero">连接设置</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual" aria-hidden="true">
|
||||
@@ -72,15 +73,31 @@
|
||||
<article class="metric-card"><div class="metric-top"><span>结果订阅</span><span class="metric-icon orange">⌁</span></div><strong id="metric-subscriptions">—</strong><small id="metric-subscriptions-sub">等待事件权限</small><div class="subscription-meter"><span id="subscription-meter-fill"></span></div></article>
|
||||
</section>
|
||||
|
||||
<section class="content-grid single-column">
|
||||
<article class="panel connect-panel" id="connection-panel">
|
||||
<div class="panel-heading"><div><span class="panel-kicker">ENVIRONMENT</span><h2>连接环境</h2></div><span class="connection-state" id="connection-state">未连接</span></div>
|
||||
<p class="panel-description">凭据只在当前浏览器会话中使用，不会上传到 Orbit Console。</p>
|
||||
<label class="field-label" for="api-url">API 地址 <small>自动使用当前页面</small></label><div class="input-wrap"><span class="input-prefix">↗</span><input id="api-url" type="url" value="" placeholder="http://127.0.0.1:8080"></div>
|
||||
<label class="field-label" for="queue-id">队列范围 <small>自动读取</small></label><div class="input-wrap"><span class="input-prefix">#</span><input id="queue-id" type="text" autocomplete="off" placeholder="凭据 JSON 或服务端配置会自动填充"></div><div class="field-hint" id="queue-hint">选择凭据 JSON 后自动填充；也可由服务端配置默认队列。</div>
|
||||
<label class="field-label" for="token">Bearer Token</label><div class="input-wrap"><span class="input-prefix">●</span><input id="token" type="password" placeholder="粘贴开发凭据 token"><button class="reveal-button" id="reveal-token" type="button">显示</button></div>
|
||||
<div class="connect-row"><label class="file-button"><input id="credential-file" type="file" accept="application/json">选择凭据 JSON</label><button class="primary-button compact" id="connect-button">连接 <span>→</span></button></div>
|
||||
<div class="security-note"><span>▣</span><span>当前页面只调用公开 API 和授权接口，不读取数据库。</span></div>
|
||||
<section class="content-grid overview-grid" aria-label="运行统计与连接状态">
|
||||
<article class="panel stats-panel" id="runtime-stats">
|
||||
<div class="panel-heading"><div><span class="panel-kicker">RUNTIME / SNAPSHOT</span><h2>运行统计</h2></div><span class="table-count" id="stats-snapshot">等待数据</span></div>
|
||||
<div class="stat-grid">
|
||||
<div class="stat-tile"><span>任务成功率</span><strong id="stat-success-rate">—</strong><small id="stat-success-rate-sub">等待任务数据</small></div>
|
||||
<div class="stat-tile"><span>活跃计划</span><strong id="stat-active-schedules">—</strong><small id="stat-active-schedules-sub">等待计划数据</small></div>
|
||||
<div class="stat-tile"><span>待核查流程</span><strong id="stat-review-workflows">—</strong><small id="stat-review-workflows-sub">等待流程数据</small></div>
|
||||
<div class="stat-tile"><span>待交付结果</span><strong id="stat-pending-deliveries">—</strong><small id="stat-pending-deliveries-sub">等待订阅数据</small></div>
|
||||
</div>
|
||||
<div class="distribution-block">
|
||||
<div class="distribution-heading"><span>任务状态分布</span><small id="stat-task-total">—</small></div>
|
||||
<div class="distribution-list">
|
||||
<div class="distribution-row"><span>成功</span><div class="status-track"><i id="stat-bar-succeeded"></i></div><b id="stat-count-succeeded">0</b></div>
|
||||
<div class="distribution-row"><span>执行中</span><div class="status-track"><i id="stat-bar-running"></i></div><b id="stat-count-running">0</b></div>
|
||||
<div class="distribution-row"><span>等待</span><div class="status-track"><i id="stat-bar-waiting"></i></div><b id="stat-count-waiting">0</b></div>
|
||||
<div class="distribution-row"><span>异常</span><div class="status-track"><i id="stat-bar-other"></i></div><b id="stat-count-other">0</b></div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="panel connection-summary-panel">
|
||||
<div class="panel-heading"><div><span class="panel-kicker">CONTROL PLANE</span><h2>连接状态</h2></div><span class="connection-state" id="connection-state">未连接</span></div>
|
||||
<div class="connection-summary-copy"><span class="connection-summary-icon">↗</span><div><b id="summary-api">当前页面</b><small id="summary-api-hint">API 地址自动跟随当前页面</small></div></div>
|
||||
<div class="connection-summary-grid"><div><span>队列范围</span><b id="summary-queue">自动配置</b></div><div><span>凭据状态</span><b id="summary-credential">未载入</b></div></div>
|
||||
<p class="connection-summary-note" id="summary-note">服务状态会自动检查；需要业务数据时再加载凭据。</p>
|
||||
<button class="quiet-button" id="connection-settings-inline" type="button">管理连接设置 <span>→</span></button>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
@@ -115,6 +132,20 @@
|
||||
<footer class="page-footer"><span><span class="footer-orbit">◉</span> Orbit Console · 星轨控制台</span><span>数据每 10 秒刷新 · <a href="/version" target="_blank" rel="noreferrer">查看服务版本</a></span></footer>
|
||||
</main>
|
||||
</div>
|
||||
<div class="drawer-backdrop" id="connection-settings-backdrop" hidden>
|
||||
<aside class="task-drawer connection-drawer" role="dialog" aria-modal="true" aria-labelledby="connection-settings-title">
|
||||
<div class="drawer-header">
|
||||
<div><span class="panel-kicker">CONTROL PLANE / SETTINGS</span><h2 id="connection-settings-title">连接设置</h2><small class="drawer-id">凭据只在当前浏览器会话中使用</small></div>
|
||||
<button class="icon-button" id="close-connection-settings" type="button" aria-label="关闭连接设置">×</button>
|
||||
</div>
|
||||
<p class="drawer-note connection-settings-intro">API 地址默认使用当前页面；队列优先读取服务端配置或凭据 JSON。这里不会读取数据库，也不会上传凭据。</p>
|
||||
<label class="field-label" for="api-url">API 地址 <small>自动使用当前页面</small></label><div class="input-wrap"><span class="input-prefix">↗</span><input id="api-url" type="url" value="" placeholder="http://127.0.0.1:8080"></div>
|
||||
<label class="field-label" for="queue-id">队列范围 <small>自动读取</small></label><div class="input-wrap"><span class="input-prefix">#</span><input id="queue-id" type="text" autocomplete="off" placeholder="凭据 JSON 或服务端配置会自动填充"></div><div class="field-hint" id="queue-hint">选择凭据 JSON 后自动填充；也可由服务端配置默认队列。</div>
|
||||
<label class="field-label" for="token">Bearer Token</label><div class="input-wrap"><span class="input-prefix">●</span><input id="token" type="password" placeholder="粘贴开发凭据 token"><button class="reveal-button" id="reveal-token" type="button">显示</button></div>
|
||||
<div class="connect-row"><label class="file-button"><input id="credential-file" type="file" accept="application/json">选择凭据 JSON</label><button class="primary-button compact" id="connect-button" type="button">连接 <span>→</span></button></div>
|
||||
<div class="security-note"><span>▣</span><span>当前页面只调用公开 API 和授权接口，不读取数据库。</span></div>
|
||||
</aside>
|
||||
</div>
|
||||
<div class="drawer-backdrop" id="task-drawer-backdrop" hidden>
|
||||
<aside class="task-drawer" role="dialog" aria-modal="true" aria-labelledby="detail-title">
|
||||
<div class="drawer-header">
|
||||
|
||||
@@ -5,3 +5,4 @@
|
||||
.workflow-row,.subscription-row{cursor:pointer;border-radius:10px;padding-left:7px;padding-right:7px;margin-left:-7px;margin-right:-7px;transition:background .2s}.workflow-row:hover,.workflow-row:focus,.subscription-row:hover,.subscription-row:focus{outline:0;background:rgba(98,230,212,.055)}.workflow-row:focus,.subscription-row:focus{box-shadow:inset 2px 0 0 var(--cyan)}.timeline-dot.leased{background:var(--blue);box-shadow:0 0 0 4px rgba(112,166,255,.1)}.timeline-dot.acked{background:var(--cyan);box-shadow:0 0 0 4px rgba(98,230,212,.1)}.timeline-dot.expired{background:var(--orange);box-shadow:0 0 0 4px rgba(255,179,107,.1)}.timeline-dot.cancelled{background:var(--red);box-shadow:0 0 0 4px rgba(255,120,140,.1)}.workflow-drawer,.subscription-drawer{width:min(640px,100%)}
|
||||
.detail-row-action{border:1px solid rgba(255,179,107,.28);border-radius:8px;padding:6px 9px;color:var(--orange);background:rgba(255,179,107,.07);font:10px inherit;cursor:pointer;white-space:nowrap}.detail-row-action:hover{border-color:rgba(255,179,107,.65);color:#ffe0bb;background:rgba(255,179,107,.13)}
|
||||
.recovery-block{border-color:rgba(255,179,107,.2);background:linear-gradient(135deg,rgba(255,179,107,.045),rgba(98,230,212,.025))}.recovery-intro{margin:0 0 12px;color:#8399b0;font-size:10px;line-height:1.6}.recovery-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.recovery-action-button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;border:1px solid rgba(255,179,107,.2);border-radius:10px;padding:10px 11px;color:#e6f0ff;background:rgba(4,12,23,.4);text-align:left;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}.recovery-action-button:hover,.recovery-action-button:focus{outline:0;border-color:rgba(98,230,212,.6);background:rgba(98,230,212,.08);transform:translateY(-1px)}.recovery-action-button b{font-size:10px;font-weight:650}.recovery-action-button small{color:#7890a8;font-size:9px;line-height:1.4}.recovery-form{border-color:rgba(255,179,107,.22)}.recovery-snapshot{margin:0 0 14px;padding:8px 10px;border-radius:8px;background:rgba(98,230,212,.06);color:#8db4b6;font:10px ui-monospace,SFMono-Regular,Menlo,monospace}.recovery-inline-fields{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px}.recovery-inline-fields select{width:100%;border:1px solid rgba(156,183,218,.15);outline:0;border-radius:9px;background:rgba(4,12,23,.45);color:#dceafb;font:inherit;font-size:10px;padding:10px}.recovery-inline-fields select:focus{border-color:rgba(98,230,212,.58);box-shadow:0 0 0 3px rgba(98,230,212,.07)}@media(max-width:780px){.recovery-action-grid{grid-template-columns:1fr}.recovery-inline-fields{grid-template-columns:1fr}}
|
||||
.overview-grid{grid-template-columns:minmax(0,1.45fr) minmax(300px,.7fr)}.stats-panel,.connection-summary-panel{min-height:326px}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.stat-tile{padding:14px 13px;border:1px solid rgba(156,183,218,.1);border-radius:13px;background:rgba(4,13,24,.28)}.stat-tile span{display:block;color:#7188a3;font-size:9px}.stat-tile strong{display:block;margin-top:10px;color:#e4f1fc;font-size:23px;letter-spacing:-.04em}.stat-tile small{display:block;margin-top:5px;color:#607791;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.distribution-block{margin-top:22px;padding-top:18px;border-top:1px solid rgba(156,183,218,.1)}.distribution-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;color:#afc2d6;font-size:11px}.distribution-heading small{color:#687f99;font-size:9px}.distribution-list{display:grid;gap:10px}.distribution-row{display:grid;grid-template-columns:42px minmax(0,1fr) 28px;gap:10px;align-items:center;color:#7187a1;font-size:9px}.distribution-row b{text-align:right;color:#c1d2e2;font-size:10px;font-weight:500}.status-track{height:5px;border-radius:5px;background:#1c3048;overflow:hidden}.status-track i{display:block;width:0;height:100%;border-radius:5px;transition:width .45s ease}.distribution-row:nth-child(1) .status-track i{background:var(--cyan)}.distribution-row:nth-child(2) .status-track i{background:var(--blue)}.distribution-row:nth-child(3) .status-track i{background:var(--purple)}.distribution-row:nth-child(4) .status-track i{background:var(--orange)}.connection-summary-copy{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid rgba(98,230,212,.12);border-radius:14px;background:rgba(4,15,26,.3)}.connection-summary-icon{display:grid;place-items:center;width:33px;height:33px;border-radius:11px;background:rgba(98,230,212,.1);color:var(--cyan);font-size:17px}.connection-summary-copy b{display:block;color:#d5e5f4;font-size:12px;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.connection-summary-copy small{display:block;margin-top:5px;color:#68809a;font-size:9px}.connection-summary-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:12px;border:1px solid rgba(156,183,218,.1);border-radius:13px;overflow:hidden}.connection-summary-grid>div{padding:12px;background:rgba(4,13,24,.25)}.connection-summary-grid span{display:block;color:#647b96;font-size:9px;margin-bottom:5px}.connection-summary-grid b{display:block;color:#b9cde0;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.connection-summary-note{min-height:31px;margin:15px 0 14px;color:#6f86a0;font-size:10px;line-height:1.6}.connection-summary-panel>.quiet-button{width:100%;justify-content:center}.connection-settings-intro{margin:0 0 18px}.connection-drawer{width:min(510px,100%)}@media(max-width:1200px){.stat-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:780px){.overview-grid{grid-template-columns:1fr}.stat-grid{grid-template-columns:repeat(2,1fr)}.connection-drawer{width:100%}}
|
||||
|
||||
Reference in New Issue
Block a user