1
This commit is contained in:
aaron
parent
de5cd95742
commit
69f81e6357
@ -614,11 +614,62 @@
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.workspace-panel {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.workspace-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.workspace-tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.workspace-tab {
|
||||
appearance: none;
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
background: rgba(255,255,255,0.03);
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
border-radius: 999px;
|
||||
padding: 9px 12px;
|
||||
font-size: 11px;
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.workspace-tab.active {
|
||||
color: var(--cold);
|
||||
border-color: rgba(126, 200, 255, 0.28);
|
||||
background: rgba(126, 200, 255, 0.12);
|
||||
}
|
||||
|
||||
.tab-pane {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-pane.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.stream-list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.workspace-stream {
|
||||
min-height: 240px;
|
||||
}
|
||||
|
||||
.event-list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
@ -1271,38 +1322,6 @@
|
||||
</div>
|
||||
|
||||
<div class="right-stack">
|
||||
<section class="panel dense-panel">
|
||||
<div class="panel-header">
|
||||
<div>
|
||||
<div class="section-label">Coordination Layer</div>
|
||||
<h2 class="panel-title" style="margin-top: 12px;">信号与执行协同</h2>
|
||||
<div class="panel-sub">把 Agent 状态和最近决策合并观察，减少来回切换</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="coord-grid">
|
||||
<div class="coord-block">
|
||||
<div class="block-head">
|
||||
<div class="section-label">Agent Layer</div>
|
||||
<h3 class="block-title">Crypto Agent 状态</h3>
|
||||
<div class="block-sub">最近信号、平台停机、执行层状态</div>
|
||||
</div>
|
||||
<div class="signal-grid" id="agentSignals">
|
||||
<div class="loading">正在读取 Agent 状态...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="coord-block">
|
||||
<div class="block-head">
|
||||
<div class="section-label">Decision Layer</div>
|
||||
<h3 class="block-title">最近决策预览</h3>
|
||||
<div class="block-sub">最近一轮各平台准备执行的动作</div>
|
||||
</div>
|
||||
<div class="signal-grid" id="decisionPreview">
|
||||
<div class="loading">正在读取决策预览...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel dense-panel">
|
||||
<div class="panel-header">
|
||||
<div>
|
||||
@ -1319,73 +1338,111 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="layout" style="margin-top: 18px;">
|
||||
<div class="left-stack">
|
||||
<section class="panel dense-panel">
|
||||
<div class="panel-header">
|
||||
<div>
|
||||
<div class="section-label">Market Layer</div>
|
||||
<h2 class="panel-title" style="margin-top: 12px;">最近信号流</h2>
|
||||
<div class="panel-sub">数据库最新信号与等级/置信度</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stream-list" id="signalStream">
|
||||
<div class="loading">正在读取信号...</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="panel workspace-panel">
|
||||
<div class="workspace-head">
|
||||
<div>
|
||||
<div class="section-label">Workspace Layer</div>
|
||||
<h2 class="panel-title" style="margin-top: 12px;">交易工作区</h2>
|
||||
<div class="panel-sub">次级明细放进 tab，保留一个干净的管理视角</div>
|
||||
</div>
|
||||
<div class="workspace-tabs" data-tab-group="workspace">
|
||||
<button class="workspace-tab active" data-tab="workspace" data-target="workspaceCoordination">协同</button>
|
||||
<button class="workspace-tab" data-tab="workspace" data-target="workspaceSignals">信号流</button>
|
||||
<button class="workspace-tab" data-tab="workspace" data-target="workspaceExecution">执行流</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right-stack">
|
||||
<section class="panel dense-panel">
|
||||
<div class="panel-header">
|
||||
<div>
|
||||
<div class="section-label">Execution Layer</div>
|
||||
<h2 class="panel-title" style="margin-top: 12px;">执行事件流</h2>
|
||||
<div class="panel-sub">最近执行结果、未执行原因、平台异常</div>
|
||||
<div class="tab-pane active" data-tab-pane="workspace" id="workspaceCoordination">
|
||||
<div class="coord-grid">
|
||||
<div class="coord-block">
|
||||
<div class="block-head">
|
||||
<div class="section-label">Agent Layer</div>
|
||||
<h3 class="block-title">Crypto Agent 状态</h3>
|
||||
<div class="block-sub">最近信号、平台停机、执行层状态</div>
|
||||
</div>
|
||||
<div class="signal-grid" id="agentSignals">
|
||||
<div class="loading">正在读取 Agent 状态...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-row" id="eventFilters">
|
||||
<button class="filter-chip active" data-filter="all">All</button>
|
||||
<button class="filter-chip" data-filter="error">Error</button>
|
||||
<button class="filter-chip" data-filter="warning">Warning</button>
|
||||
<button class="filter-chip" data-filter="hold">Hold</button>
|
||||
<button class="filter-chip" data-filter="success">Success</button>
|
||||
<div class="coord-block">
|
||||
<div class="block-head">
|
||||
<div class="section-label">Decision Layer</div>
|
||||
<h3 class="block-title">最近决策预览</h3>
|
||||
<div class="block-sub">最近一轮各平台准备执行的动作</div>
|
||||
</div>
|
||||
<div class="signal-grid" id="decisionPreview">
|
||||
<div class="loading">正在读取决策预览...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="event-list" id="eventStream">
|
||||
<div class="loading">正在读取执行事件...</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" data-tab-pane="workspace" id="workspaceSignals">
|
||||
<div class="block-head">
|
||||
<div class="section-label">Market Layer</div>
|
||||
<h3 class="block-title">最近信号流</h3>
|
||||
<div class="block-sub">数据库最新信号与等级、置信度、时间分布</div>
|
||||
</div>
|
||||
<div class="stream-list workspace-stream" id="signalStream">
|
||||
<div class="loading">正在读取信号...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" data-tab-pane="workspace" id="workspaceExecution">
|
||||
<div class="block-head">
|
||||
<div class="section-label">Execution Layer</div>
|
||||
<h3 class="block-title">执行事件流</h3>
|
||||
<div class="block-sub">最近执行结果、未执行原因、平台异常</div>
|
||||
</div>
|
||||
<div class="filter-row" id="eventFilters">
|
||||
<button class="filter-chip active" data-filter="all">All</button>
|
||||
<button class="filter-chip" data-filter="error">Error</button>
|
||||
<button class="filter-chip" data-filter="warning">Warning</button>
|
||||
<button class="filter-chip" data-filter="hold">Hold</button>
|
||||
<button class="filter-chip" data-filter="success">Success</button>
|
||||
</div>
|
||||
<div class="event-list workspace-stream" id="eventStream">
|
||||
<div class="loading">正在读取执行事件...</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="ops-grid">
|
||||
<section class="panel unified-section">
|
||||
<div class="panel-header">
|
||||
<div>
|
||||
<div class="section-label">Position Layer</div>
|
||||
<h2 class="panel-title" style="margin-top: 12px;">统一持仓视图</h2>
|
||||
<div class="panel-sub">三端持仓合并，优先看风险与盈亏</div>
|
||||
</div>
|
||||
<section class="panel workspace-panel unified-section">
|
||||
<div class="workspace-head">
|
||||
<div>
|
||||
<div class="section-label">Asset Layer</div>
|
||||
<h2 class="panel-title" style="margin-top: 12px;">资产与挂单</h2>
|
||||
<div class="panel-sub">统一持仓和统一挂单改为切换查看，减少表格同时占屏</div>
|
||||
</div>
|
||||
<div class="workspace-tabs" data-tab-group="asset">
|
||||
<button class="workspace-tab active" data-tab="asset" data-target="assetPositions">持仓</button>
|
||||
<button class="workspace-tab" data-tab="asset" data-target="assetOrders">挂单</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane active" data-tab-pane="asset" id="assetPositions">
|
||||
<div class="block-head">
|
||||
<div class="section-label">Position Layer</div>
|
||||
<h3 class="block-title">统一持仓视图</h3>
|
||||
<div class="block-sub">三端持仓合并，优先看风险与盈亏</div>
|
||||
</div>
|
||||
<div class="table-toolbar" id="positionsToolbar"></div>
|
||||
<div class="unified-table" id="positionsTable">
|
||||
<div class="loading">正在整理跨平台持仓...</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="panel unified-section">
|
||||
<div class="panel-header">
|
||||
<div>
|
||||
<div class="section-label">Order Layer</div>
|
||||
<h2 class="panel-title" style="margin-top: 12px;">统一挂单视图</h2>
|
||||
<div class="panel-sub">入场单、保护单、资金占用一屏观察</div>
|
||||
</div>
|
||||
<div class="tab-pane" data-tab-pane="asset" id="assetOrders">
|
||||
<div class="block-head">
|
||||
<div class="section-label">Order Layer</div>
|
||||
<h3 class="block-title">统一挂单视图</h3>
|
||||
<div class="block-sub">入场单、保护单、资金占用一屏观察</div>
|
||||
</div>
|
||||
<div class="table-toolbar" id="ordersToolbar"></div>
|
||||
<div class="unified-table" id="ordersTable">
|
||||
<div class="loading">正在整理跨平台挂单...</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@ -1464,6 +1521,24 @@
|
||||
el.innerHTML = `<div class="${isError ? 'error-box' : 'empty-box'}" style="margin-bottom: 18px;">${message}</div>`;
|
||||
}
|
||||
|
||||
function initTabs() {
|
||||
document.querySelectorAll('[data-tab-group]').forEach((groupEl) => {
|
||||
const group = groupEl.getAttribute('data-tab-group');
|
||||
const buttons = groupEl.querySelectorAll('[data-tab]');
|
||||
buttons.forEach((button) => {
|
||||
button.addEventListener('click', () => {
|
||||
const target = button.getAttribute('data-target');
|
||||
buttons.forEach((item) => {
|
||||
item.classList.toggle('active', item === button);
|
||||
});
|
||||
document.querySelectorAll(`[data-tab-pane="${group}"]`).forEach((pane) => {
|
||||
pane.classList.toggle('active', pane.id === target);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function toneClassForHealth(status) {
|
||||
if (['error', 'failed', 'stopped'].includes(String(status || '').toLowerCase())) return 'danger';
|
||||
if (['warning', 'halted', 'idle'].includes(String(status || '').toLowerCase())) return 'warn';
|
||||
@ -2088,6 +2163,7 @@
|
||||
});
|
||||
});
|
||||
|
||||
initTabs();
|
||||
applyAutoRefreshState();
|
||||
loadConsole();
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user