miracle/auto_trade_sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(global_config): 添加市场行情JSON查看功能及策略执行概览折叠功能

Browse Source 
在GlobalConfig组件中，新增了市场行情的JSON查看功能，用户可以复制市场数据到剪贴板。同时，优化了策略执行概览的展示逻辑，增加了折叠功能，提升了用户界面的可读性与交互性。这一改动旨在增强用户体验，使得市场信息和策略执行情况更加直观易用。
This commit is contained in:
薇薇安 2026-02-25 15:47:20 +08:00
parent 5a3888d905
commit e0dfb4c31e
1 changed files with 46 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
frontend/src/components/GlobalConfig.jsx
View File

@ -263,6 +263,7 @@ const GlobalConfig = () => {
const [servicesSummary, setServicesSummary] = useState(null)
const [marketOverview, setMarketOverview] = useState(null)
const [showMarketJson, setShowMarketJson] = useState(false)
const [strategyOverviewCollapsed, setStrategyOverviewCollapsed] = useState(true)
const [systemBusy, setSystemBusy] = useState(false)
// 预设方案相关
@ -1303,20 +1304,54 @@ const GlobalConfig = () => {
</div>
</div>
{/* 策略执行概览：当前执行方案与配置项执行情况（易读文字），有数据则展示，无数据也显示区块并提示 */}
{/* 市场行情概览 - JSON 查看（放在策略执行概览上边） */}
{showMarketJson && marketOverview && (
<div style={{ marginTop: '16px' }}>
<div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '6px' }}>
<button
type="button"
className="system-btn"
onClick={() => {
const json = JSON.stringify(marketOverview, null, 2)
navigator.clipboard.writeText(json).then(() => setMessage('已复制到剪贴板')).catch(() => setMessage('复制失败'))
}}
>
复制 JSON
</button>
</div>
<pre style={{ background: '#263238', color: '#aed581', padding: '12px', borderRadius: '6px', overflow: 'auto', maxHeight: '400px', fontSize: '13px', margin: 0 }}>
{JSON.stringify(marketOverview, null, 2)}
</pre>
</div>
)}
{/* 策略执行概览：默认折叠约 2/3，点击展开/收起 */}
<div className="strategy-execution-overview" style={{ marginTop: '20px', padding: '16px', background: '#fafafa', borderRadius: '8px', border: '1px solid #eee' }}>
<h4 style={{ margin: '0 0 12px 0', fontSize: '15px', fontWeight: 600, color: '#333' }}>策略执行概览</h4>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: strategyOverviewCollapsed ? 0 : '12px' }}>
<h4 style={{ margin: 0, fontSize: '15px', fontWeight: 600, color: '#333' }}>策略执行概览</h4>
<button
type="button"
className="system-btn"
onClick={() => setStrategyOverviewCollapsed(v => !v)}
>
{strategyOverviewCollapsed ? '展开' : '收起'}
</button>
</div>
{marketOverview.strategy_execution_overview?.sections?.length > 0 ? (
<>
<p style={{ margin: '0 0 14px 0', fontSize: '13px', color: '#666', lineHeight: 1.5 }}>
以下为当前生效的整体策略执行标准与机制说明（由数据库/Redis 配置生成，刷新市场行情时一并更新）。
</p>
{marketOverview.strategy_execution_overview.sections.map((sec, idx) => (
<div key={idx} style={{ marginBottom: idx < marketOverview.strategy_execution_overview.sections.length - 1 ? '14px' : 0 }}>
<div style={{ fontSize: '13px', fontWeight: 600, color: '#1976d2', marginBottom: '4px' }}>{sec.title}</div>
<div style={{ fontSize: '13px', color: '#444', lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>{sec.content}</div>
</div>
))}
{!strategyOverviewCollapsed && (
<p style={{ margin: '0 0 14px 0', fontSize: '13px', color: '#666', lineHeight: 1.5 }}>
以下为当前生效的整体策略执行标准与机制说明（由数据库/Redis 配置生成，刷新市场行情时一并更新）。
</p>
)}
<div style={{ maxHeight: strategyOverviewCollapsed ? '120px' : 'none', overflow: 'hidden' }}>
{marketOverview.strategy_execution_overview.sections.map((sec, idx) => (
<div key={idx} style={{ marginBottom: idx < marketOverview.strategy_execution_overview.sections.length - 1 ? '14px' : 0 }}>
<div style={{ fontSize: '13px', fontWeight: 600, color: '#1976d2', marginBottom: '4px' }}>{sec.title}</div>
<div style={{ fontSize: '13px', color: '#444', lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>{sec.content}</div>
</div>
))}
</div>
</>
) : (
<p style={{ margin: 0, fontSize: '13px', color: '#888' }}>
@ -1328,25 +1363,6 @@ const GlobalConfig = () => {
) : (
<div style={{ color: '#888', fontSize: '14px' }}>加载中或拉取失败，请点击刷新</div>
)}
{showMarketJson && marketOverview && (
<div style={{ marginTop: '12px' }}>
<div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '6px' }}>
<button
type="button"
className="system-btn"
onClick={() => {
const json = JSON.stringify(marketOverview, null, 2)
navigator.clipboard.writeText(json).then(() => setMessage('已复制到剪贴板')).catch(() => setMessage('复制失败'))
}}
>
复制 JSON
</button>
</div>
<pre style={{ background: '#263238', color: '#aed581', padding: '12px', borderRadius: '6px', overflow: 'auto', maxHeight: '400px', fontSize: '13px', margin: 0 }}>
{JSON.stringify(marketOverview, null, 2)}
</pre>
</div>
)}
</section>
)}