185 lines
16 KiB
HTML
185 lines
16 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="color-scheme" content="dark">
|
||
<title>Orbit Console · 星轨控制台</title>
|
||
<link rel="stylesheet" href="/console/styles.css">
|
||
</head>
|
||
<body>
|
||
<div class="ambient ambient-one"></div>
|
||
<div class="ambient ambient-two"></div>
|
||
<div class="app-shell">
|
||
<aside class="sidebar">
|
||
<div class="brand">
|
||
<div class="brand-mark"><span></span><span></span><span></span></div>
|
||
<div><strong>Orbit</strong><small>星轨控制台</small></div>
|
||
</div>
|
||
<div class="workspace-label">CONTROL PLANE</div>
|
||
<nav class="nav-list" aria-label="控制台导航">
|
||
<button class="nav-item active" data-view="overview"><span class="nav-icon">⌂</span><span>总览</span><em>01</em></button>
|
||
<button class="nav-item" data-view="tasks"><span class="nav-icon">◇</span><span>任务执行</span><em>02</em></button>
|
||
<button class="nav-item" data-view="schedules"><span class="nav-icon">◷</span><span>定时计划</span><em>03</em></button>
|
||
<button class="nav-item" data-view="workflows"><span class="nav-icon">⌘</span><span>流程实例</span><em>04</em></button>
|
||
<button class="nav-item" data-view="subscriptions"><span class="nav-icon">⌁</span><span>结果订阅</span><em>05</em></button>
|
||
</nav>
|
||
<div class="sidebar-bottom">
|
||
<div class="rail-card">
|
||
<div class="rail-card-top"><span class="status-dot"></span><span id="side-status">等待连接</span></div>
|
||
<p id="side-endpoint">API 未连接</p>
|
||
<div class="rail-progress"><span id="side-progress"></span></div>
|
||
</div>
|
||
<div class="sidebar-foot"><span class="pulse-dot"></span> Pulse · Weave <span class="foot-version">v1</span></div>
|
||
</div>
|
||
</aside>
|
||
|
||
<main class="main-content">
|
||
<header class="topbar">
|
||
<div class="crumbs"><span>Orbit</span><b>/</b><strong id="page-title">总览</strong></div>
|
||
<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="refresh-button" title="刷新数据" aria-label="刷新数据">↻</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="page-view active" id="view-overview" data-page="overview">
|
||
<section class="hero" id="overview">
|
||
<div class="hero-copy">
|
||
<div class="eyebrow"><span class="eyebrow-line"></span> ORBIT CONTROL PLANE</div>
|
||
<h1>让每一次执行<br><span>都清晰可见。</span></h1>
|
||
<p>任务、定时、流程和交付状态，在一块屏幕上保持有序运转。</p>
|
||
<div class="hero-actions">
|
||
<button class="primary-button" data-view="tasks">查看任务 <span>↗</span></button>
|
||
<button class="quiet-button" id="connect-hero">连接环境</button>
|
||
</div>
|
||
</div>
|
||
<div class="hero-visual" aria-hidden="true">
|
||
<div class="orbit-ring ring-one"></div>
|
||
<div class="orbit-ring ring-two"></div>
|
||
<div class="orbit-ring ring-three"></div>
|
||
<div class="orbit-core"><span>O</span></div>
|
||
<div class="orbit-node node-a"></div><div class="orbit-node node-b"></div><div class="orbit-node node-c"></div>
|
||
<div class="hero-visual-label"><b>LIVE</b><span>任务流持续观测</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="metric-grid" aria-label="运行概览">
|
||
<article class="metric-card metric-highlight"><div class="metric-top"><span>服务状态</span><span class="metric-icon green">✦</span></div><strong id="metric-health">—</strong><small id="metric-health-sub">等待就绪检查</small><div class="sparkline green-line"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div></article>
|
||
<article class="metric-card"><div class="metric-top"><span>任务总览</span><span class="metric-icon purple">◇</span></div><strong id="metric-tasks">—</strong><small id="metric-tasks-sub">连接凭据后加载</small><div class="mini-bar"><i id="task-bar-succeeded"></i><i id="task-bar-running"></i><i id="task-bar-waiting"></i><i id="task-bar-other"></i></div></article>
|
||
<article class="metric-card"><div class="metric-top"><span>流程实例</span><span class="metric-icon blue">⌘</span></div><strong id="metric-workflows">—</strong><small id="metric-workflows-sub">等待工作流权限</small><div class="sparkline blue-line"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div></article>
|
||
<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 地址</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">队列 ID</label><div class="input-wrap"><span class="input-prefix">#</span><input id="queue-id" type="text" placeholder="从凭据文件自动读取"></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>
|
||
</article>
|
||
</section>
|
||
</div>
|
||
|
||
<div class="page-view" id="view-tasks" data-page="tasks">
|
||
<section class="content-grid single-column">
|
||
<article class="panel wide-panel" id="tasks">
|
||
<div class="panel-heading"><div><span class="panel-kicker">PULSE / TASKS</span><h2>任务执行流</h2></div><div class="panel-tools"><span class="table-count" id="task-count">0 项</span><button class="text-button" data-view="overview">返回总览 <span>←</span></button></div></div>
|
||
<div class="table-wrap"><table><thead><tr><th>任务</th><th>处理器</th><th>状态</th><th>修订</th><th>创建时间</th></tr></thead><tbody id="task-table"><tr><td colspan="5" class="empty-row"><span class="empty-icon">◇</span><b>还没有任务数据</b><small>连接一个具备 tasks:read 权限的凭据后自动加载</small></td></tr></tbody></table></div>
|
||
</article>
|
||
</section>
|
||
</div>
|
||
|
||
<div class="page-view" id="view-schedules" data-page="schedules">
|
||
<section class="content-grid single-column">
|
||
<article class="panel" id="schedules"><div class="panel-heading"><div><span class="panel-kicker">PULSE / SCHEDULES</span><h2>定时计划</h2></div><span class="table-count" id="schedule-page-hint">点击计划查看详情</span></div><div class="schedule-list" id="schedule-list"><div class="empty-compact"><span>◷</span><div><b>等待计划数据</b><small>需要 schedules:read 权限</small></div></div></div></article>
|
||
</section>
|
||
</div>
|
||
|
||
<div class="page-view" id="view-workflows" data-page="workflows">
|
||
<section class="content-grid single-column">
|
||
<article class="panel" id="workflows"><div class="panel-heading"><div><span class="panel-kicker">WEAVE / WORKFLOWS</span><h2>流程实例</h2></div><span class="table-count">点击实例查看详情</span></div><div class="workflow-list" id="workflow-list"><div class="empty-compact"><span>⌘</span><div><b>等待流程数据</b><small>需要 workflows:read 权限</small></div></div></div></article>
|
||
</section>
|
||
</div>
|
||
|
||
<div class="page-view" id="view-subscriptions" data-page="subscriptions">
|
||
<section class="content-grid single-column">
|
||
<article class="panel" id="subscriptions"><div class="panel-heading"><div><span class="panel-kicker">EVENTS / DELIVERY</span><h2>结果订阅</h2></div><span class="live-label-small"><i></i>自动刷新</span></div><div class="subscription-list" id="subscription-list"><div class="empty-compact"><span>⌁</span><div><b>等待订阅数据</b><small>需要 events:read 权限</small></div></div></div></article>
|
||
</section>
|
||
</div>
|
||
|
||
<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="task-drawer-backdrop" hidden>
|
||
<aside class="task-drawer" role="dialog" aria-modal="true" aria-labelledby="detail-title">
|
||
<div class="drawer-header">
|
||
<div><span class="panel-kicker">PULSE / TASK DETAIL</span><h2 id="detail-title">任务详情</h2><small class="drawer-id" id="detail-id">—</small></div>
|
||
<button class="icon-button" id="close-task-drawer" type="button" aria-label="关闭任务详情">×</button>
|
||
</div>
|
||
<div class="drawer-status-line"><span class="state-pill" id="detail-state">—</span><span id="detail-updated">—</span></div>
|
||
<div class="detail-grid">
|
||
<div><span>处理器</span><b id="detail-handler">—</b></div>
|
||
<div><span>修订</span><b id="detail-revision">—</b></div>
|
||
<div><span>执行尝试</span><b id="detail-attempt-count">—</b></div>
|
||
<div><span>效果状态</span><b id="detail-effect">—</b></div>
|
||
<div><span>创建时间</span><b id="detail-created">—</b></div>
|
||
<div><span>截止时间</span><b id="detail-deadline">—</b></div>
|
||
</div>
|
||
<div class="detail-block" id="detail-result-block" hidden><div class="detail-block-heading"><span>最终结果</span><small>只读快照</small></div><pre id="detail-result"></pre></div>
|
||
<div class="detail-block"><div class="detail-block-heading"><span>执行时间线</span><small id="detail-attempts-count">加载中</small></div><div class="detail-list" id="detail-attempts"><div class="detail-loading">正在读取尝试历史…</div></div></div>
|
||
<div class="detail-block"><div class="detail-block-heading"><span>操作审计</span><small id="detail-operations-count">加载中</small></div><div class="detail-list" id="detail-operations"><div class="detail-loading">正在读取操作审计…</div></div></div>
|
||
<div class="drawer-actions" id="detail-actions" hidden>
|
||
<button class="quiet-button danger-button" id="task-cancel-button" type="button">取消任务</button>
|
||
<button class="primary-button compact" id="task-retry-button" type="button">安全重试 <span>→</span></button>
|
||
</div>
|
||
<p class="drawer-note" id="detail-action-note">写操作需要对应的管理权限；服务端会再次校验版本、状态、幂等键和队列范围。</p>
|
||
<form class="action-form" id="task-action-form" hidden>
|
||
<div class="action-form-heading"><span class="panel-kicker" id="action-kicker">TASK CONTROL</span><h3 id="action-title">任务操作</h3></div>
|
||
<p id="action-description"></p>
|
||
<label class="field-label" for="action-reason">操作原因</label><textarea id="action-reason" rows="3" maxlength="1024" placeholder="说明本次操作的原因"></textarea>
|
||
<div id="action-evidence-wrap"><label class="field-label" for="action-evidence">证据引用</label><input id="action-evidence" type="text" maxlength="512" placeholder="例如 evidence:reconcile-001"></div>
|
||
<div id="action-timeout-wrap"><label class="field-label" for="action-timeout">新任务总时限（毫秒）</label><input id="action-timeout" type="number" min="1" max="2592000000" step="1" value="60000"></div>
|
||
<label class="check-row" id="action-safe-wrap"><input id="action-safe" type="checkbox"><span>我确认旧执行已经结束，按原业务身份重新执行是安全的。</span></label>
|
||
<div class="action-form-buttons"><button class="quiet-button" id="action-cancel" type="button">返回</button><button class="primary-button compact" id="action-submit" type="submit">提交操作 <span>→</span></button></div>
|
||
<div class="action-error" id="action-error" role="alert"></div>
|
||
</form>
|
||
</aside>
|
||
</div>
|
||
<div class="drawer-backdrop" id="schedule-drawer-backdrop" hidden>
|
||
<aside class="task-drawer schedule-drawer" role="dialog" aria-modal="true" aria-labelledby="schedule-detail-title">
|
||
<div class="drawer-header">
|
||
<div><span class="panel-kicker">PULSE / SCHEDULE DETAIL</span><h2 id="schedule-detail-title">定时计划</h2><small class="drawer-id" id="schedule-detail-id">—</small></div>
|
||
<button class="icon-button" id="close-schedule-drawer" type="button" aria-label="关闭计划详情">×</button>
|
||
</div>
|
||
<div class="drawer-status-line"><span class="state-pill" id="schedule-detail-state">—</span><span id="schedule-detail-updated">—</span></div>
|
||
<div class="detail-grid">
|
||
<div><span>计划名称</span><b id="schedule-detail-name">—</b></div>
|
||
<div><span>队列</span><b id="schedule-detail-queue">—</b></div>
|
||
<div><span>控制修订</span><b id="schedule-detail-revision">—</b></div>
|
||
<div><span>当前版本</span><b id="schedule-detail-version">—</b></div>
|
||
<div><span>下一次触发</span><b id="schedule-detail-next">—</b></div>
|
||
<div><span>时区</span><b id="schedule-detail-timezone">—</b></div>
|
||
</div>
|
||
<div class="detail-block"><div class="detail-block-heading"><span>当前版本规则</span><small id="schedule-detail-rule-kind">—</small></div><div class="schedule-rule-card" id="schedule-detail-rule">等待计划数据…</div></div>
|
||
<div class="detail-block"><div class="detail-block-heading"><span>最近触发记录</span><small id="schedule-occurrences-count">加载中</small></div><div class="detail-list" id="schedule-occurrences"><div class="detail-loading">正在读取触发记录…</div></div></div>
|
||
<div class="drawer-actions" id="schedule-actions" hidden><button class="quiet-button" id="schedule-control-button" type="button">暂停计划</button></div>
|
||
<p class="drawer-note" id="schedule-action-note">计划控制需要 schedules:manage 权限；暂停只停止未来触发，已经创建的任务继续执行。</p>
|
||
<form class="action-form" id="schedule-action-form" hidden>
|
||
<div class="action-form-heading"><span class="panel-kicker">SCHEDULE CONTROL</span><h3 id="schedule-action-title">暂停计划</h3></div>
|
||
<p id="schedule-action-description">暂停后不会再创建新的任务。</p>
|
||
<label class="field-label" for="schedule-action-reason">操作原因</label><textarea id="schedule-action-reason" rows="3" maxlength="1024" placeholder="说明本次计划控制的原因"></textarea>
|
||
<div class="action-form-buttons"><button class="quiet-button" id="schedule-action-cancel" type="button">返回</button><button class="primary-button compact" id="schedule-action-submit" type="submit">提交控制 →</button></div>
|
||
<div class="action-error" id="schedule-action-error" role="alert"></div>
|
||
</form>
|
||
</aside>
|
||
</div>
|
||
<div class="toast" id="toast" role="status"></div>
|
||
<script src="/console/app.js"></script>
|
||
</body>
|
||
</html>
|