+ {snapshot &&
}
+ {stores.length > 0 && (
+
+
品牌金店饰品
+ [s.brand, s.product || '黄金饰品', s.formatted || `${s.price}${s.unit}`])}
+ />
+
+ )}
+ {banks.length > 0 && (
+
+
银行投资金条
+ [b.bank, b.product, b.formatted || `${b.price}${b.unit}`, b.time || '--'])}
+ />
+
+ )}
+ {recycle.length > 0 && (
+
+
黄金回收参考价
+ [r.type, r.purity, r.formatted || `${r.price}${r.unit}`])}
+ />
+
+ )}
+
+ {/* OHLC 概览卡片 */}
+ {snapshot && (
+
+
+ 当日 OHLC
+ {snapshot.unit && 单位: {snapshot.unit}}
+
+
+ {[
+ { label: '开盘', value: snapshot.openPrice, cls: '' },
+ { label: '最高', value: snapshot.highPrice, cls: 'up' },
+ { label: '最低', value: snapshot.lowPrice, cls: 'down' },
+ { label: '现价', value: snapshot.currentPrice, cls: snapshot.changeAmount >= 0 ? 'up' : 'down' },
+ ].map(item => (
+
+ {item.label}
+
+ {item.value > 0 ? item.value.toFixed(2) : '--'}
+
+
+ ))}
+
+ {/* 价格区间条 */}
+ {snapshot.highPrice > snapshot.lowPrice && (
+
+
{snapshot.lowPrice.toFixed(2)}
+
+
{snapshot.highPrice.toFixed(2)}
+
+ )}
+
+ 波动幅度 {(snapshot.highPrice - snapshot.lowPrice).toFixed(2)}
+ 波动率 {(((snapshot.highPrice - snapshot.lowPrice) / (snapshot.lowPrice || 1)) * 100).toFixed(2)}%
+
+
+ )}
+
+ {/* 24小时价格走势图 */}
+ {chartData.length >= 2 && (
+
+
+ {hasHourly ? '近24小时价格走势' : '当日价格区间'}
+ USD/盎司
+
+ {!hasHourly && (
+
⏳ 数据累积中，每小时记录一个价格点，明天可看完整24小时曲线
+ )}
+
+
+
+
+ )}
+
+ {chartData.length < 2 && !snapshot && (
+
暂无日内数据，请稍后刷新
+ )}
+
+
+
+ 近30天价格走势
+ USD/盎司
+
+ {displayData.length > 0 ? (
+
+
+
+ ) : (
+
⏳ 数据累积中，每日记录一个价格点
+ )}
+
+
+ {/* 统计卡片 */}
+ {displayData.length > 0 && (() => {
+ const prices = displayData.map(d => d.price);
+ const high = Math.max(...prices);
+ const low = Math.min(...prices);
+ return (
+
+ {[
+ { label: '30日最高', value: high, cls: 'up' },
+ { label: '30日最低', value: low, cls: 'down' },
+ { label: '30日均价', value: prices.reduce((a, b) => a + b, 0) / prices.length, cls: '' },
+ { label: '最大波动', value: high - low, cls: '' },
+ ].map(item => (
+
+ {item.label}
+ ${item.value.toFixed(0)}
+
+ ))}
+
+ );
+ })()}
+
+ {/* 指定月份明细 */}
+
+
+ 查看指定月份日线
+
+
+
+
+
+ {monthData.length > 0 ? (
+
+
+
+ ) : (
+
该月暂无日线数据
+ )}
+
+
+
+
+ 年度月线走势
+ USD/盎司 (月均)
+
+
+
+
+ {displayData.length > 0 ? (
+
+
+
+ ) : (
+
+ {selectedYear2 >= new Date().getFullYear()
+ ? '⏳ 数据累积中，每月记录一次均价'
+ : '该年度暂无数据'}
+
+ )}
+
+
+ {/* 年度统计 */}
+ {displayData.length > 0 && (() => {
+ const highs = displayData.map(d => d.highPrice);
+ const lows = displayData.map(d => d.lowPrice);
+ const avgs = displayData.map(d => d.avgPrice);
+ return (
+
+ {[
+ { label: '年内最高', value: Math.max(...highs), cls: 'up' },
+ { label: '年内最低', value: Math.min(...lows), cls: 'down' },
+ { label: '年均价格', value: avgs.reduce((a, b) => a + b, 0) / avgs.length, cls: '' },
+ { label: '年度波幅', value: Math.max(...highs) - Math.min(...lows), cls: '' },
+ ].map(item => (
+
+ {item.label}
+ ${item.value.toFixed(0)}
+
+ ))}
+
+ );
+ })()}
+
+ {/*
+ 历年均价对比
+ */}
+ {yearlyCompare.length > 1 && (
+
+
+ 历年均价对比 (最近{yearlyCompare.length}年)
+ USD/盎司
+
+
+ {yearlyCompare.map(item => {
+ const maxPrice = Math.max(...yearlyCompare.map(i => i.price));
+ const pct = (item.price / maxPrice) * 100;
+ return (
+
+
{item.year}
+
+
${item.price.toFixed(0)}
+
+ );
+ })}
+
+
+ )}
+
+ {/* 顶栏 */}
+
+
+
每日金价
+ {lastUpdate && (
+
+ 更新于 {lastUpdate}
+
+
+ )}
+
+
+
+
+ {error && (
+
+ ⚠️ {error}
+
+ )}
+
+ {/* Tab 导航 */}
+
+ {TABS.map(tab => (
+
+ ))}
+
+
+ {/* 内容区 */}
+
+ {renderContent()}
+
+
+ {/* 底栏 */}
+
+ 5分钟自动刷新
+
+