aaron/stock-ai-agent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
aaron 2026-02-07 01:18:30 +08:00
parent 161f9feda0
commit cc059b726b
1 changed files with 80 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/paper-trading.html
View File

@ -18,13 +18,23 @@
margin: 0 auto; margin: 0 auto;
} }
/* 固定顶部区域 */
.sticky-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--bg-primary);
padding-bottom: 10px;
}
.trading-header { .trading-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 30px; margin-bottom: 20px;
padding-bottom: 20px; padding: 10px 0 20px 0;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
background: var(--bg-primary);
} }
.trading-title { .trading-title {
@ -57,7 +67,7 @@
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px; gap: 16px;
margin-bottom: 30px; margin-bottom: 20px;
} }
.stat-card { .stat-card {
@ -453,6 +463,8 @@
<div id="app"> <div id="app">
<div class="trading-page"> <div class="trading-page">
<div class="trading-container"> <div class="trading-container">
<!-- 固定顶部区域 -->
<div class="sticky-header">
<!-- 头部 --> <!-- 头部 -->
<div class="trading-header"> <div class="trading-header">
<h1 class="trading-title">模拟交易 <span>Paper Trading</span></h1> <h1 class="trading-title">模拟交易 <span>Paper Trading</span></h1>
@ -461,7 +473,7 @@
<div class="monitor-dot" :class="{ running: monitorRunning }"></div> <div class="monitor-dot" :class="{ running: monitorRunning }"></div>
<span>{{ monitorRunning ? '监控中' : '未启动' }}</span> <span>{{ monitorRunning ? '监控中' : '未启动' }}</span>
</div> </div>
<button class="refresh-btn" @click="refreshData">刷新数据</button> <button class="refresh-btn" @click="manualRefresh">刷新数据</button>
<button class="reset-btn" @click="resetData">重置数据</button> <button class="reset-btn" @click="resetData">重置数据</button>
</div> </div>
</div> </div>
@ -497,7 +509,7 @@
</div> </div>
<!-- 实时价格 --> <!-- 实时价格 -->
<div v-if="Object.keys(latestPrices).length > 0" style="margin-bottom: 20px;"> <div v-if="Object.keys(latestPrices).length > 0" style="margin-bottom: 15px;">
<div class="stat-label" style="margin-bottom: 8px;">实时价格</div> <div class="stat-label" style="margin-bottom: 8px;">实时价格</div>
<div class="price-list"> <div class="price-list">
<div class="price-item" v-for="(price, symbol) in latestPrices" :key="symbol"> <div class="price-item" v-for="(price, symbol) in latestPrices" :key="symbol">
@ -506,6 +518,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- 标签页 --> <!-- 标签页 -->
<div class="tabs"> <div class="tabs">
@ -714,7 +727,7 @@
data() { data() {
return { return {
activeTab: 'active', activeTab: 'active',
loading: false, loading: true, // 只在首次加载时为 true
activeOrders: [], activeOrders: [],
historyOrders: [], historyOrders: [],
stats: { stats: {
@ -731,14 +744,15 @@
}, },
monitorRunning: false, monitorRunning: false,
latestPrices: {}, latestPrices: {},
refreshInterval: null refreshInterval: null,
isFirstLoad: true
}; };
}, },
mounted() { mounted() {
this.refreshData(); this.refreshData();
// 每3秒自动刷新（实时价格更新） // 每3秒自动刷新（静默刷新，不显示 loading）
this.refreshInterval = setInterval(() => { this.refreshInterval = setInterval(() => {
this.refreshData(); this.silentRefresh();
}, 3000); }, 3000);
}, },
beforeUnmount() { beforeUnmount() {
@ -747,8 +761,18 @@
} }
}, },
methods: { methods: {
async refreshData() { // 手动刷新（显示 loading）
async manualRefresh() {
this.loading = true; this.loading = true;
await this.refreshData();
},
// 静默刷新（不显示 loading）
async silentRefresh() {
await this.refreshData();
},
async refreshData() {
try { try {
await Promise.all([ await Promise.all([
this.fetchActiveOrders(), this.fetchActiveOrders(),
@ -760,6 +784,7 @@
console.error('刷新数据失败:', e); console.error('刷新数据失败:', e);
} finally { } finally {
this.loading = false; this.loading = false;
this.isFirstLoad = false;
} }
}, },