-
-
-
-
-
- ⌘K
-
-
-
-
-
+
+
+
+
+
+
-
-
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+ ≡
+ 0
监控品种
+
+ ↗
+ 0
上涨趋势
+
-
-
- ↘
+ 0
下跌趋势
-
-
-
-
-
-
- 0
- 监控品种
-
-
-
-
-
- 0
- 上涨趋势
-
-
-
-
-
- 0
- 下跌趋势
-
-
-
+
-
- 0
- 震荡整理
-
-
+
+ ↔
+ 0
震荡整理
-
-
+
+
+
+
-
-
-
+
+
-
-
+
-
--
--
- --
- --
-
- R1: --
- S1: --
-
+ --
+ --
-
-
-
- 开盘
- --
-
-
- 最高
- --
-
-
- 最低
- --
-
-
- 成交量
- --
-
+
+
+ 开盘
+ --
+
+
+ 最高
+ --
+
+
+ 最低
+ --
+
+
+ 成交量
+ --
- 周期
+ 周期
-
@@ -238,145 +425,107 @@
-
-
-
-
- K线图
-
- MA5
- MA10
- MA20
-
-
-
-
- 历史分析记录
-
-
-
-
+ 历史分析记录
+
-
-
-
-
- AI 思维分析
-
-
-
+
+
+ AI 思维分析
+
-
-
-
-
+
点击"智能分析"按钮获取AI分析结果
-
-
- 技术指标
-
-
-
- MACD
- --
- --
+
+
技术指标
+
+
+
- MACD
+ --
+ --
- RSI
- --
- --
+
+
- RSI
+ --
+ --
- BOLL
- --
- --
+
-
-
+
- BOLL
+ --
+ --
- KDJ
- --
- --
+
+
KDJ
+ --
+ --
-
-
- 关键点位
-
-
-
- 压力
-
R1--
- R2--
+
+
+ 关键点位
+
+
-
- 压力
+
+ R1
+ --
+
+
+ R2
+ --
-
-
- 中枢 (PP)
- --
+
+
-
-
+ 中枢 (PP)
+ --
-
-
- 支撑
-
S1--
- S2--
+
+ 支撑
+
+ S1
+ --
+
+
+ S2
+ --
-
-
- 多周期趋势
-
-
-
-
+
+
-
- 多周期趋势
+
-
-
- 情景预案
-
-
-
-
+
+
情景预案
+
-
AI 四维联合分析报告
- +AI 四维联合分析报告
+
@@ -388,8 +537,8 @@
-
AI 交易建议详情
- +AI 交易建议详情
+
@@ -401,8 +550,8 @@
-
分析记录详情
- +分析记录详情
+
diff --git a/app/static/futures_analysis.js b/app/static/futures_analysis.js
index 4b9be71..cdf84a8 100644
--- a/app/static/futures_analysis.js
+++ b/app/static/futures_analysis.js
@@ -60,28 +60,20 @@ function updateTime() {
}
function initEventListeners() {
- document.getElementById('back-btn').addEventListener('click', showListView);
+ const backBtn = document.getElementById('back-btn');
+ if (backBtn) backBtn.addEventListener('click', showListView);
- document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
+ const themeToggle = document.getElementById('theme-toggle');
+ if (themeToggle) themeToggle.addEventListener('click', toggleTheme);
- // AI交易建议卡片点击事件（已隐藏，暂时注释）
- // const suggestionCard = document.getElementById('suggestion-card');
- // if (suggestionCard) {
- // suggestionCard.addEventListener('click', function() {
- // if (currentDetailData) {
- // showSuggestionModal(currentDetailData);
- // }
- // });
- // }
+ const refreshAllBtn = document.getElementById('refresh-all-btn');
+ if (refreshAllBtn) refreshAllBtn.addEventListener('click', refreshAllSymbols);
- // 刷新全部按钮
- document.getElementById('refresh-all-btn').addEventListener('click', refreshAllSymbols);
+ const aiAnalyzeAllBtn = document.getElementById('ai-analyze-all-btn');
+ if (aiAnalyzeAllBtn) aiAnalyzeAllBtn.addEventListener('click', analyzeAllSymbols);
- // 全部AI分析按钮
- document.getElementById('ai-analyze-all-btn').addEventListener('click', analyzeAllSymbols);
-
- // 详情页刷新按钮
- document.getElementById('refresh-symbol-btn').addEventListener('click', function() {
+ const refreshSymbolBtn = document.getElementById('refresh-symbol-btn');
+ if (refreshSymbolBtn) refreshSymbolBtn.addEventListener('click', function() {
if (currentSymbol) {
refreshSingleSymbol(currentSymbol);
}
@@ -105,19 +97,23 @@ function initEventListeners() {
});
});
- document.getElementById('search-input').addEventListener('input', function() {
+ const searchInput = document.getElementById('search-input');
+ if (searchInput) searchInput.addEventListener('input', function() {
filterFuturesList(this.value);
});
- document.querySelectorAll('.filter-tab').forEach(tab => {
- tab.addEventListener('click', function() {
- document.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active'));
- this.classList.add('active');
- filterByCategory(this.dataset.category);
- });
+ document.querySelectorAll('.pill').forEach(tab => {
+ if (tab.dataset.category) {
+ tab.addEventListener('click', function() {
+ document.querySelectorAll('.pill').forEach(t => t.classList.remove('active'));
+ this.classList.add('active');
+ filterByCategory(this.dataset.category);
+ });
+ }
});
- document.getElementById('sort-select').addEventListener('change', function() {
+ const sortSelect = document.getElementById('sort-select');
+ if (sortSelect) sortSelect.addEventListener('change', function() {
sortFuturesList(this.value);
});
@@ -157,10 +153,13 @@ async function showDetailView(symbol) {
}
async function loadHistoryListForAnalysis(symbol) {
+ console.log(`[AI分析] 开始加载 ${symbol} 的历史分析记录...`);
try {
const response = await fetch(`${API_BASE}/ai-analysis/${symbol}/history?limit=20`);
const data = await response.json();
+ console.log(`[AI分析] API响应:`, data);
+
if (data.success) {
renderHistoryList(data.data);
@@ -168,13 +167,18 @@ async function loadHistoryListForAnalysis(symbol) {
const today = new Date();
const todayStr = today.toISOString().split('T')[0];
+ console.log(`[AI分析] 查找日期: ${todayStr}`);
+ console.log(`[AI分析] 历史记录数量: ${data.data?.length || 0}`);
+
let todayRecord = null;
if (data.data && data.data.length > 0) {
for (const record of data.data) {
const recordDate = new Date(record.analysis_time);
const recordDateStr = recordDate.toISOString().split('T')[0];
+ console.log(`[AI分析] 检查记录: ${record.analysis_time} -> ${recordDateStr}`);
if (recordDateStr === todayStr) {
todayRecord = record;
+ console.log(`[AI分析] ✓ 找到今天的记录!`);
break;
}
}
@@ -182,7 +186,7 @@ async function loadHistoryListForAnalysis(symbol) {
// 4. 根据是否有今天的记录进行不同处理
if (todayRecord) {
- console.log(`找到今天的分析记录: ${symbol} (${todayRecord.analysis_time})`);
+ console.log(`[AI分析] 显示AI分析结果...`);
currentAIAnalysis = {
id: todayRecord.id,
symbol: todayRecord.symbol,
@@ -192,26 +196,33 @@ async function loadHistoryListForAnalysis(symbol) {
displayAIAnalysisResult(currentAIAnalysis);
syncAIToPanels(todayRecord.analysis_data);
} else {
- console.log(`没有找到今天的分析记录: ${symbol}`);
+ console.log(`[AI分析] 没有找到今天的分析记录，显示占位符`);
showAIAnalysisPlaceholder();
}
} else {
+ console.log(`[AI分析] API返回失败，显示占位符`);
showAIAnalysisPlaceholder();
}
} catch (error) {
- console.error('加载历史记录失败:', error);
+ console.error('[AI分析] 加载历史记录失败:', error);
showAIAnalysisPlaceholder();
}
}
function showAIAnalysisPlaceholder() {
+ console.log('[AI分析] 显示占位符...');
const content = document.getElementById('ai-analysis-content');
+ console.log('[AI分析] ai-analysis-content元素:', content);
+ if (!content) {
+ console.error('[AI分析] 错误: 找不到ai-analysis-content元素!');
+ return;
+ }
content.innerHTML = `
-
-
+
`;
+ console.log('[AI分析] 占位符已显示');
}
async function loadWatchedSymbols() {
@@ -462,64 +473,69 @@ function renderFuturesGrid(data) {
}
grid.innerHTML = data.map(item => {
- const isWatched = watchedSymbols.includes(item.symbol);
- const hasAI = item.hasAIAnalysis;
+ const code = item.symbol.replace(/[0-9]/g, '').substring(0, 2);
+ const changeIcon = item.change >= 0 ? '↑' : '↓';
+ const changeSign = item.change >= 0 ? '+' : '';
+ const pctSign = item.changePct >= 0 ? '+' : '';
+
+ let actionPillClass = 'watch';
+ let actionPillText = '观望';
+ if (item.suggestion?.includes('做多') || item.suggestion?.includes('试多')) {
+ actionPillClass = 'do-more';
+ actionPillText = '做多';
+ } else if (item.suggestion?.includes('做空') || item.suggestion?.includes('试空')) {
+ actionPillClass = 'do-more';
+ actionPillText = '做空';
+ }
+
+ const priceClass = item.change >= 0 ? 'up' : 'down';
+ const changeClass = item.change >= 0 ? 'up' : 'down';
+
+ const successRate = item.successRate || 0;
+ const trendScore = item.trendScore || 0;
+ const successColor = successRate >= 70 ? 'var(--color-down)' : successRate >= 60 ? 'var(--color-neutral)' : 'var(--color-up)';
+ const trendColor = trendScore >= 70 ? 'var(--color-down)' : trendScore >= 50 ? 'var(--color-neutral)' : 'var(--color-up)';
+
+ const periods = item.periods || {};
+ const resistance = item.resistance ? formatNumber(item.resistance) : '--';
+ const support = item.support ? formatNumber(item.support) : '--';
return `
-
点击"智能分析"按钮获取AI分析结果
-
-
-
${item.symbol.replace(/[0-9]/g, '').substring(0, 2)}
-
-
+ ${item.name}
- ${item.symbol}
-
+
+
+
- ${code}
+ ${item.name}
+ ${item.symbol}
-
- ${hasAI ? item.suggestion : '--'}
- ¥${formatNumber(item.price)}
-
-
- ${item.change >= 0 ? '+' : ''}${formatNumber(item.change)} (${item.changePct >= 0 ? '+' : ''}${item.changePct.toFixed(2)}%)
-
+
+
¥${formatNumber(item.price)}
+ ${changeIcon} ${changeSign}${formatNumber(item.change)} (${pctSign}${item.changePct.toFixed(2)}%)
-
- 成功率
-
- ${item.successRate}%
+
${actionPillText}
+
+
+
- 成功率 ${successRate}%
+
- 趋势评分
-
-
- ${item.trendScore}
+
+
趋势评分 ${trendScore}
+
- 5M
- 15M
- 30M
- 1H
+
+
- ${!hasAI ? `5M
+ 15M
+ 30M
+ 1H
请先进行AI分析
` : ''}
-
`}).join('');
@@ -552,12 +568,24 @@ function updateStats(data) {
d.suggestion?.includes('观望')
).length;
- document.getElementById('total-count').textContent = total;
- document.getElementById('up-count').textContent = upCount;
- document.getElementById('down-count').textContent = downCount;
- document.getElementById('neutral-count').textContent = neutralCount;
- document.getElementById('count-all').textContent = total;
- document.getElementById('count-watched').textContent = watchedSymbols.length;
+ // 安全检查：确保元素存在再设置textContent
+ const totalCountEl = document.getElementById('total-count');
+ if (totalCountEl) totalCountEl.textContent = total;
+
+ const upCountEl = document.getElementById('up-count');
+ if (upCountEl) upCountEl.textContent = upCount;
+
+ const downCountEl = document.getElementById('down-count');
+ if (downCountEl) downCountEl.textContent = downCount;
+
+ const neutralCountEl = document.getElementById('neutral-count');
+ if (neutralCountEl) neutralCountEl.textContent = neutralCount;
+
+ const countAllEl = document.getElementById('count-all');
+ if (countAllEl) countAllEl.textContent = total;
+
+ const countWatchedEl = document.getElementById('count-watched');
+ if (countWatchedEl) countWatchedEl.textContent = watchedSymbols.length;
}
function filterByTrend(trend) {
@@ -636,60 +664,70 @@ async function loadFuturesDetail(symbol) {
}
function updateDetailView(data) {
- document.getElementById('detail-name').textContent = data.name || '--';
- document.getElementById('detail-symbol').textContent = data.symbol || '--';
+ const nameEl = document.getElementById('detail-name');
+ if (nameEl) nameEl.textContent = data.name || '--';
+
+ const symbolEl = document.getElementById('detail-symbol');
+ if (symbolEl) symbolEl.textContent = data.symbol || '--';
const priceEl = document.getElementById('detail-price');
- priceEl.textContent = '¥' + formatNumber(data.price);
- priceEl.className = 'price-value ' + (data.change >= 0 ? 'up' : 'down');
+ if (priceEl) {
+ priceEl.textContent = '¥' + formatNumber(data.price);
+ priceEl.className = 'price-value ' + (data.change >= 0 ? 'up' : 'down');
+ }
const changeEl = document.getElementById('detail-change');
- changeEl.className = 'price-change ' + (data.change >= 0 ? 'up' : 'down');
- changeEl.innerHTML = ` ${data.change >= 0 ? '+' : ''}${formatNumber(data.change)} (${data.changePct >= 0 ? '+' : ''}${data.changePct.toFixed(2)}%)`;
+ if (changeEl) {
+ changeEl.className = 'price-change ' + (data.change >= 0 ? 'up' : 'down');
+ changeEl.innerHTML = `${data.change >= 0 ? '↑' : '↓'} ${data.change >= 0 ? '+' : ''}${formatNumber(data.change)} (${data.changePct >= 0 ? '+' : ''}${data.changePct.toFixed(2)}%)`;
+ }
- document.getElementById('detail-open').textContent = formatNumber(data.open);
- document.getElementById('detail-high').textContent = formatNumber(data.high);
- document.getElementById('detail-low').textContent = formatNumber(data.low);
- document.getElementById('detail-volume').textContent = formatNumber(data.volume);
+ const openEl = document.getElementById('detail-open');
+ if (openEl) openEl.textContent = formatNumber(data.open);
- const r1 = data.resistances ? data.resistances[0] : data.resistance;
- const s1 = data.supports ? data.supports[0] : data.support;
+ const highEl = document.getElementById('detail-high');
+ if (highEl) highEl.textContent = formatNumber(data.high);
- document.getElementById('detail-r1').textContent = `R1: ${formatNumber(r1)} (${calcPriceChangePercent(data.price, r1)})`;
- document.getElementById('detail-s1').textContent = `S1: ${formatNumber(s1)} (${calcPriceChangePercent(data.price, s1)})`;
+ const lowEl = document.getElementById('detail-low');
+ if (lowEl) lowEl.textContent = formatNumber(data.low);
- const badge = document.getElementById('suggestion-badge');
- badge.textContent = data.suggestion || '--';
- badge.className = 'suggestion-badge ' + (data.suggestionType || 'neutral');
+ const volumeEl = document.getElementById('detail-volume');
+ if (volumeEl) volumeEl.textContent = formatNumber(data.volume);
- document.getElementById('suggestion-reason').textContent = data.suggestionReason || '--';
- document.getElementById('entry-price').textContent = formatNumber(data.entryPrice);
- document.getElementById('target-price').textContent = formatNumber(data.targetPrice);
- document.getElementById('stop-loss').textContent = formatNumber(data.stopLoss);
- document.getElementById('risk-level').textContent = data.riskLevel || '--';
+ // 注意: detail-r1 和 detail-s1 在新HTML中不存在，已移除
+
+ // 注意: suggestion-badge, suggestion-reason, entry-price, target-price, stop-loss, risk-level 在新HTML中不存在，已移除
if (data.macd) {
- document.getElementById('macd-signal').textContent = data.macd.signal;
- document.getElementById('macd-detail').textContent = data.macd.detail;
+ const macdSignalEl = document.getElementById('macd-signal');
+ if (macdSignalEl) macdSignalEl.textContent = data.macd.signal;
+ const macdDetailEl = document.getElementById('macd-detail');
+ if (macdDetailEl) macdDetailEl.textContent = data.macd.detail;
}
if (data.rsi) {
- document.getElementById('rsi-value').textContent = data.rsi.value;
- document.getElementById('rsi-status').textContent = data.rsi.status;
+ const rsiValueEl = document.getElementById('rsi-value');
+ if (rsiValueEl) rsiValueEl.textContent = data.rsi.value;
+ const rsiStatusEl = document.getElementById('rsi-status');
+ if (rsiStatusEl) rsiStatusEl.textContent = data.rsi.status;
}
if (data.boll) {
- document.getElementById('boll-signal').textContent = data.boll.signal;
- document.getElementById('boll-detail').textContent = data.boll.detail;
+ const bollSignalEl = document.getElementById('boll-signal');
+ if (bollSignalEl) bollSignalEl.textContent = data.boll.signal;
+ const bollDetailEl = document.getElementById('boll-detail');
+ if (bollDetailEl) bollDetailEl.textContent = data.boll.detail;
}
if (data.kdj) {
- document.getElementById('kdj-signal').textContent = data.kdj.signal;
- document.getElementById('kdj-detail').textContent = data.kdj.detail;
+ const kdjSignalEl = document.getElementById('kdj-signal');
+ if (kdjSignalEl) kdjSignalEl.textContent = data.kdj.signal;
+ const kdjDetailEl = document.getElementById('kdj-detail');
+ if (kdjDetailEl) kdjDetailEl.textContent = data.kdj.detail;
}
if (data.resistances) {
for (let i = 0; i < 2; i++) {
const el = document.getElementById(`resistance-${i + 1}`);
if (el) {
- el.querySelector('span:last-child').textContent = formatNumber(data.resistances[i]);
+ el.textContent = formatNumber(data.resistances[i]);
}
}
}
@@ -697,36 +735,32 @@ function updateDetailView(data) {
for (let i = 0; i < 2; i++) {
const el = document.getElementById(`support-${i + 1}`);
if (el) {
- el.querySelector('span:last-child').textContent = formatNumber(data.supports[i]);
+ el.textContent = formatNumber(data.supports[i]);
}
}
}
if (data.pivotPoint) {
- document.getElementById('pivot-point').querySelector('span:last-child').textContent = formatNumber(data.pivotPoint);
+ const ppEl = document.getElementById('pivot-point');
+ if (ppEl) ppEl.textContent = formatNumber(data.pivotPoint);
}
if (data.periodConsistency) {
const container = document.getElementById('period-trends');
- const periodNames = { '5': '5分钟', '15': '15分钟', '30': '30分钟', '60': '60分钟' };
- container.innerHTML = Object.entries(data.periodConsistency).map(([period, trend]) => `
-
- 压力 ${hasAI ? formatNumber(item.resistance) : '--'}
- 支撑 ${hasAI ? formatNumber(item.support) : '--'}
-
-
- ${periodNames[period]}
-
- ${trend === 'up' ? '上涨' : trend === 'down' ? '下跌' : '震荡'}
-
-
- `).join('');
+ if (container) {
+ const periodNames = { '5': '5分钟', '15': '15分钟', '30': '30分钟', '60': '60分钟' };
+ container.innerHTML = Object.entries(data.periodConsistency).map(([period, trend]) => `
+
+ ${periodNames[period]}
+
+ ${trend === 'up' ? '上涨' : trend === 'down' ? '下跌' : '震荡'}
+
+
+ `).join('');
+ }
}
- if (data.trendScore !== undefined) {
- document.getElementById('trend-score').textContent = data.trendScore;
- const circle = document.getElementById('score-fill');
- const circumference = 2 * Math.PI * 45;
- const offset = circumference - (data.trendScore / 100) * circumference;
- circle.style.strokeDasharray = circumference;
- circle.style.strokeDashoffset = offset;
- }
+ // 注意: trend-score 和 score-fill 在新HTML中不存在，已移除
}
async function loadHistoryList(symbol) {
@@ -761,8 +795,7 @@ async function loadAIAnalysis() {
} else {
console.log(`合约 ${currentSymbol} 无分析结果`);
content.innerHTML = `
-
-
+
`;
@@ -770,8 +803,7 @@ async function loadAIAnalysis() {
} catch (error) {
console.error(`加载合约 ${currentSymbol} AI分析失败:`, error);
content.innerHTML = `
-
点击"智能分析"按钮获取AI分析结果
-
+
`;
@@ -1681,11 +1713,11 @@ async function runAIAnalysis(forceRefresh = false) {
const content = document.getElementById('ai-analysis-content');
btn.disabled = true;
- btn.innerHTML = '分析中...';
+ btn.textContent = '分析中...';
content.innerHTML = `
-
点击"智能分析"按钮获取AI分析结果
-
+
+
`;
@@ -1700,8 +1732,7 @@ async function runAIAnalysis(forceRefresh = false) {
showToast('success', '分析完成', `${currentSymbol} AI分析已完成`);
} else {
content.innerHTML = `
- ⟳
AI正在分析中...
-
+
`;
@@ -1710,26 +1741,33 @@ async function runAIAnalysis(forceRefresh = false) {
} catch (error) {
console.error('AI分析请求失败:', error);
content.innerHTML = `
-
${data.error || 'AI分析失败，请稍后重试'}
-
+
`;
showToast('error', '请求失败', '网络错误，请稍后重试');
} finally {
btn.disabled = false;
- btn.innerHTML = '智能分析';
+ btn.textContent = '智能分析';
}
}
function displayAIAnalysisResult(data) {
+ console.log('[AI分析] 开始显示AI分析结果...', data);
const content = document.getElementById('ai-analysis-content');
+ console.log('[AI分析] ai-analysis-content元素:', content);
+ if (!content) {
+ console.error('[AI分析] 错误: 找不到ai-analysis-content元素!');
+ return;
+ }
const result = data.result;
const timestamp = new Date(data.analysis_time).toLocaleString('zh-CN');
+ console.log('[AI分析] 分析结果数据:', result);
+
const direction = result.trading_suggestion?.direction || '观望';
const directionClass = direction === '做多' ? 'long' : direction === '做空' ? 'short' : 'neutral';
- const directionIcon = direction === '做多' ? 'fa-arrow-up' : direction === '做空' ? 'fa-arrow-down' : 'fa-arrows-left-right';
+ const directionIcon = direction === '做多' ? '↑' : direction === '做空' ? '↓' : '↔';
const confidence = result.trading_suggestion?.confidence || 0;
const entryMin = result.trading_suggestion?.entry_range?.min || '--';
@@ -1737,13 +1775,14 @@ function displayAIAnalysisResult(data) {
const stopLoss = result.trading_suggestion?.stop_loss || '--';
const positionSize = result.trading_suggestion?.position_size || '--';
+ console.log('[AI分析] 生成HTML模板...');
content.innerHTML = `
`;
+ console.log('[AI分析] HTML已设置到DOM');
+
// 同步AI分析数据到主面板各个卡片
syncAIToPanels(result);
+ console.log('[AI分析] AI分析结果显示完成');
}
function syncAIToPanels(result) {
@@ -1814,23 +1856,23 @@ function syncAIToPanels(result) {
// 3. 同步到关键点位卡片
if (pivotPoints.r1) {
const r1El = document.getElementById('resistance-1');
- if (r1El) r1El.querySelector('span:last-child').textContent = pivotPoints.r1;
+ if (r1El) r1El.textContent = pivotPoints.r1;
}
if (pivotPoints.r2) {
const r2El = document.getElementById('resistance-2');
- if (r2El) r2El.querySelector('span:last-child').textContent = pivotPoints.r2;
+ if (r2El) r2El.textContent = pivotPoints.r2;
}
if (pivotPoints.pp) {
const ppEl = document.getElementById('pivot-point');
- if (ppEl) ppEl.querySelector('span:last-child').textContent = pivotPoints.pp;
+ if (ppEl) ppEl.textContent = pivotPoints.pp;
}
if (pivotPoints.s1) {
const s1El = document.getElementById('support-1');
- if (s1El) s1El.querySelector('span:last-child').textContent = pivotPoints.s1;
+ if (s1El) s1El.textContent = pivotPoints.s1;
}
if (pivotPoints.s2) {
const s2El = document.getElementById('support-2');
- if (s2El) s2El.querySelector('span:last-child').textContent = pivotPoints.s2;
+ if (s2El) s2El.textContent = pivotPoints.s2;
}
// 4. 同步到多周期趋势卡片
diff --git a/data/new_ui/desktop/prototype_desktop_light.html b/data/new_ui/desktop/prototype_desktop_light.html
new file mode 100644
index 0000000..961876e
--- /dev/null
+++ b/data/new_ui/desktop/prototype_desktop_light.html
@@ -0,0 +1,462 @@
+
+
+
+
+
+ 期货智析 - Web Prototype (Apple Style)
+
+
+
+
+
+
+
+ 期货智析 - 品种详情页 (Apple Style)
+
+
+
+
+
+
+
+ 期货智析 - AI 分析报告 (Apple Style)
+
+
+
+
+
+
+ 期货智析 - Mobile Detail (Apple Style)
+
+
+
+
+ 期货智析 - Mobile Prototype (Apple Style)
+
+
+
+
+ 期货智析 - Mobile Report (Apple Style)
+
+
+
+
+ 期货智析 - Tablet Detail
+
+
+
+
+ 期货智析 - Tablet List (Compact 3-Col)
+
+
+
+
+ 期货智析 - Tablet Report (Right Drawer)
+
+
+
+
+
网络错误，请检查网络连接
${result.summary || '暂无总结'}
-
+ ${directionIcon}
${direction}
@@ -1775,16 +1814,19 @@ function displayAIAnalysisResult(data) {
- 分析时间: ${timestamp}
+ 🕐 分析时间: ${timestamp}
◈ 期货智析
+
+
+ 品种分析
+ 自选
+ 市场概览
+ 风险预警
+
+ LIVE
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/data/new_ui/desktop/prototype_detail.html b/data/new_ui/desktop/prototype_detail.html
new file mode 100644
index 0000000..9ef9a08
--- /dev/null
+++ b/data/new_ui/desktop/prototype_detail.html
@@ -0,0 +1,352 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ 全部 32
+ 能源
+ 金属
+ 农产品
+ 金融
+
+
+
+
+
+
+
+ ≡
+ 32
监控品种
+
+
+ ↗
+ 7
上涨趋势
+
+
+ ↘
+ 10
下跌趋势
+
+
+ ↔
+ 15
震荡整理
+
+
+
+
+
+
+
+
+
+
+ SC
+ 原油
+ SC2606
+
+
+ ¥644.5
+ ↓ -13.3 (-2.02%)
+ 观望
+
+
+
+
+ 成功率 60%
+
+
+
+ 趋势评分 30
+
+
+
+ 5M
+ 15M
+ 30M
+ 1H
+
+
+
+ 压力 642.4
+ 支撑 631.7
+
+ 详情 →
+
+
+
+
+
+
+
+
+ FU
+ 燃油
+ FU2606
+
+
+ ¥4,680
+ ↑ +72 (+1.56%)
+ 做多
+
+
+
+
+ 成功率 85%
+
+
+
+ 趋势评分 65
+
+
+
+ 5M
+ 15M
+ 30M
+ 1H
+
+
+
+ 压力 4,600
+ 支撑 4,530
+
+ 详情 →
+
+
+
+
+
+
+
+ AG
+ 沪银
+ AG2606
+
+
+ ¥18,643
+ ↑ +413 (+2.27%)
+ 做多 (短线反弹)
+
+
+
+
+ 成功率 60%
+
+
+
+ 趋势评分 60
+
+
+
+ 5M
+ 15M
+ 30M
+ 1H
+
+
+
+ 压力 18,685
+ 支撑 18,584
+
+ 详情 →
+
+
+
+
+
+
+
+ AU
+ 沪金
+ AU2606
+
+
+ ¥993.34
+ ↑ +4.36 (+0.44%)
+ 观望
+
+
+
+
+ 成功率 60%
+
+
+
+ 趋势评分 40
+
+
+
+ 5M
+ 15M
+ 30M
+ 1H
+
+
+
+ 压力 993
+ 支撑 989.5
+
+ 详情 →
+
+
+
+
+
+
+
+ CU
+ 沪铜
+ CU2606
+
+
+ ¥104,770
+ ↑ +1,090 (+1.05%)
+ 做多
+
+
+
+
+ 成功率 85%
+
+
+
+ 趋势评分 65
+
+
+
+ 5M
+ 15M
+ 30M
+ 1H
+
+
+
+ 压力 105,250
+ 支撑 104,450
+
+ 详情 →
+
+
+
+
+
+
+ NI
+ 沪镍
+ NI2606
+
+
+ ¥143,330
+ ↓ -440 (-0.31%)
+ 观望
+
+
+
+
+ 成功率 60%
+
+
+
+ 趋势评分 45
+
+
+
+ 5M
+ 15M
+ 30M
+ 1H
+
+
+
+ 压力 144,550
+ 支撑 143,940
+
+ 详情 →
+ ← 返回
+ 原油 SC2606
+
+
+ 🔔
+ ⋮
+
+
+
+
+
+
\ No newline at end of file
diff --git a/data/new_ui/desktop/prototype_report.html b/data/new_ui/desktop/prototype_report.html
new file mode 100644
index 0000000..1097b92
--- /dev/null
+++ b/data/new_ui/desktop/prototype_report.html
@@ -0,0 +1,340 @@
+
+
+
+
+
+
+
+
+
+
+ SC2606
+ SC
+
+
+ 644.5
+ ↓ -13.3 (-2.02%)
+
+
+ 开 657.8
+ 高 664.8
+ 低 630.2
+ 量 1,668,293
+
+
+
+
+
+
+
+
+
+ 分时
+ 5M
+ 15M
+ 30M
+ 1H
+ MA5: 652.1 MA10: 655.4 MA20: 660.2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 📉
+ K 线图区域 (ECharts / TradingView)
+ 15 分钟周期 | 2026-05-23
+
+
+
+
+
+
+
+
+
+
+
+ AI 思维分析
+ 智能
+
+
+ SC2606 呈多周期空头排列，均线全面压制且量能极度萎缩，短期 30/60 分钟 KDJ 进入超卖区但无底背离与放量配合，整体处于缩量阴跌格局。
+
+
+
+ 建议方向观望
+ 置信度30%
+ 入场区间640.5 - 642.5
+ 止损位645.5
+
+
+
+
+ 技术指标
+
+
+
+
+ MACD
+ Down
+ 零轴下
+
+
+ KDJ
+ 超卖
+ 未金叉
+
+
+ RSI
+ --
+ --
+
+
+ BOLL
+ --
+ --
+
+
+
+
+ 📍 关键点位
+
+ R1 (阻力)
+ 642.4
+
+
+ R2 (阻力)
+ 648.8
+
+
+ PP (中枢)
+ 638.1
+
+
+ S1 (支撑)
+ 631.7
+
+
+ S2 (支撑)
+ 627.4
+
+
+
+
+ 🕒 多周期趋势
+
+
+ 60M 偏空
+ 30M 震荡
+ 15M 偏空
+ 5M 震荡
+
+
+
+
+ 🕰 历史分析记录
+ SC2606 呈多周期空头排列...
+
+ 查看全部 →
+
+
+
+
+
\ No newline at end of file
diff --git a/data/new_ui/mobile/prototype_mobile_detail.html b/data/new_ui/mobile/prototype_mobile_detail.html
new file mode 100644
index 0000000..2f3139e
--- /dev/null
+++ b/data/new_ui/mobile/prototype_mobile_detail.html
@@ -0,0 +1,280 @@
+
+
+
+
+
+
+
+
+
+ 📄 SC2606 AI 分析报告
+
+ 2026/5/23 18:04
+ ✕
+
+
+
+
+ "SC2606 呈多周期空头排列，均线全面压制且量能极度萎缩，短期 30/60 分钟 KDJ 进入超卖区但无底背离与放量配合，整体处于缩量阴跌格局。建议观望或极轻仓逢高试空。"
+
+
+
+
+
+
+
+ 🔵 AI 思维分析
+
+
+
+
+
+ | 周期 | +MACD | +成交量 | +KDJ 状态 | +结论 | +
|---|---|---|---|---|
| 60 分钟 | +Down | +极度缩量 | +超卖 | +空头趋势明确，下跌动能衰竭但无资金承接。 | +
| 30 分钟 | +Down | +缩量 | +超卖 | +超卖引发技术性反弹预期，但缺乏量能验证。 | +
| 15 分钟 | +Down | +缩量 | +中性偏弱 | +反弹力度羸弱，受制于 MA10/20 压制。 | +
| 5 分钟 | +Neutral | +极度缩量 | +中性 | +微观结构处于无序震荡，等待放量选择方向。 | +
+
+
+
+
+
+ 入场区间
+ 640.5-642.5
+
+
+ 止损位
+ 645.5
+
+
+ 建议仓位
+ 轻仓
+
+
+ 纪律评分
+ 4/11
+
+
+
+
+ 🟣 KDJ 诊断
+
+
+
+
+ 当前状态
+ 30/60 分钟超卖区
+
+
+ 背离情况
+ 无底背离 (价格新低 KDJ 未新低)
+
+
+ 钝化
+ 否
+
+
+ 建议
+ 超卖区仅提示反弹概率，非反转信号。严禁左侧接飞刀。
+
+
+
+
+ 📍 关键点位
+
+
+
+
+ R2
+ 648.8
+
+
+ R1
+ 642.4
+
+
+ PP
+ 638.1
+
+
+ S1
+ 631.7
+
+
+ S2
+ 627.4
+
+
+
+ ⚠️ 风险提示
+
+ ▸
+ 技术指标具有滞后性，历史表现不代表未来。
+
+
+ ▸
+ 需结合基本面和市场情绪综合判断。
+
+
+ ▸
+ SC2606 为远月合约，流动性极差，买卖价差大，实际交易滑点可能远超技术测算。
+
+
+
+
+
+
\ No newline at end of file
diff --git a/data/new_ui/mobile/prototype_mobile_light.html b/data/new_ui/mobile/prototype_mobile_light.html
new file mode 100644
index 0000000..2d7dbb9
--- /dev/null
+++ b/data/new_ui/mobile/prototype_mobile_light.html
@@ -0,0 +1,369 @@
+
+
+
+
+
+
+ 9:41
+
+
+
+
+
+
+ ←
+ 原油 SC2606
+
+ 🔔
+ ⋮
+
+
+
+
+
+
+
+
+ 644.5
+
+ ↓ 13.3
+ -2.02%
+
+
+
+ 开 657.8
+ 高 664.8
+ 低 630.2
+ 量 1.6M
+
+
+
+
+
+
+ 5M
+ 15M
+ 1H
+ 日
+
+
+
+ K 线图区域
+
+
+
+
+ AI 分析
+ 指标
+ 点位
+
+
+
+
+
+ 🧠 思维分析
+ 智能
+
+
+ SC2606 呈多周期空头排列，均线全面压制且量能极度萎缩。建议观望或极轻仓逢高试空。
+
+
+
+ 置信度30%
+ 止损位645.5
+ 入场640.5-642.5
+ 仓位轻仓
+
+
+
+
+ 📊 技术指标
+
+
+
+
+ MACD
+ Down
+
+
+ KDJ
+ 超卖
+
+
+ RSI
+ --
+
+
+ BOLL
+ --
+
+
+
+
+ 📍 关键点位
+
+ R1
+ 642.4
+
+
+ PP (中枢)
+ 638.1
+
+
+ S1
+ 631.7
+
+
+
+
+ 🕰 历史分析记录
+ 查看 >
+
+
+
+
+
+
\ No newline at end of file
diff --git a/data/new_ui/mobile/prototype_mobile_report.html b/data/new_ui/mobile/prototype_mobile_report.html
new file mode 100644
index 0000000..4286e38
--- /dev/null
+++ b/data/new_ui/mobile/prototype_mobile_report.html
@@ -0,0 +1,247 @@
+
+
+
+
+
+
+ 9:41
+ 🔋
+
+
+
+
+
+
+
+ 期货智析
+
+
+ 🔍
+ ⋮
+
+
+
+
+
+
+
+
+
+ 全部
+ 自选
+ 能源
+ 金属
+ 农产品
+
+
+
+
+
+
+
+
+ 32
监控
7
上涨
10
下跌
15
震荡
+
+
+
+
+
+
+ SC 原油
+ SC2606
+
+
+ 644.5
+ ↓ 2.02%
+
+
+ 观望
+
+ 评分
+
+
+
+
+ 压力 642.4
+ 支撑 631.7
+
+
+
+
+
+
+
+ FU 燃油
+ FU2606
+
+
+ 4,680
+ ↑ 1.56%
+
+
+ 做多
+
+ 评分
+
+
+
+
+ 压力 4,600
+ 支撑 4,530
+
+
+
+
+
+
+
+ AG 沪银
+ AG2606
+
+
+ 18,643
+ ↑ 2.27%
+
+
+ 做多 (反弹)
+
+ 评分
+
+
+
+
+ 压力 18,685
+ 支撑 18,584
+
+
+
+
+
+
+ AU 沪金
+ AU2606
+
+
+ 993.34
+ ↑ 0.44%
+
+
+ 观望
+
+ 评分
+
+
+
+
+ 压力 993
+ 支撑 989.5
+
+
+
+
+
+
+ CU 沪铜
+ CU2606
+
+
+ 104,770
+ ↑ 1.05%
+
+
+ 做多
+
+ 评分
+
+
+
+
+ 压力 105,250
+ 支撑 104,450
+
+
+
+
+
+ 首页
+
+
+
+ 自选
+
+
+
+ 分析
+
+
+
+ 我的
+
+
+
+
+
+
\ No newline at end of file
diff --git a/data/new_ui/pad/prototype_tablet_detail.html b/data/new_ui/pad/prototype_tablet_detail.html
new file mode 100644
index 0000000..13e521b
--- /dev/null
+++ b/data/new_ui/pad/prototype_tablet_detail.html
@@ -0,0 +1,242 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ AI 分析报告
+
+ ✕
+
+
+
+ "SC2606 呈多周期空头排列，均线全面压制且量能极度萎缩。建议观望或极轻仓逢高试空。"
+
+
+ 🔵 思维分析
+
+
+
+
+ 60M 周期
+ 超卖 空头趋势明确
+
+
+ 30M 周期
+ 超卖 缺乏量能验证
+
+
+ 15M 周期
+ 中性 受均线压制
+
+
+
+
+
+
+ 入场区间
+ 640.5-642.5
+
+
+ 止损位
+ 645.5
+
+
+ 仓位
+ 轻仓
+
+
+ 评分
+ 4/11
+ ⚠️ 风险提示
+
+
+
+
+
+ •
+ 技术指标具有滞后性，历史表现不代表未来。
+
+
+ •
+ SC2606 为远月合约，流动性极差，注意滑点风险。
+
+
+
+
+
+
\ No newline at end of file
diff --git a/data/new_ui/pad/prototype_tablet_list.html b/data/new_ui/pad/prototype_tablet_list.html
new file mode 100644
index 0000000..44d3606
--- /dev/null
+++ b/data/new_ui/pad/prototype_tablet_list.html
@@ -0,0 +1,348 @@
+
+
+
+
+
+
+
+
+ ← 返回
+ 原油 SC2606
+
+ 🔔
+ ⋮
+
+
+
+
+
+
+
+
+
+
+
+
+ 644.5
+ ↓ -2.02%
+
+
+
+ 5M
+ 15M
+ 30M
+ 1H
+
+
+
+
+
+ K 线图区域
+ MA5: 652 | MA10: 655 | MA20: 660
+
+
+
+
+
+
+
+ 🧠 AI 分析智能
+ SC2606 呈多周期空头排列，建议观望或极轻仓逢高试空。
+ 置信度30%
+ 止损位645.5
+
+
+
+
+ 📊 技术指标
+
+
+
+
+
+
+ MACD
Down
KDJ
超卖
RSI
--
BOLL
--
+
+
+
+ 关键点位
+ R1642.4
+ PP638.1
+ S1631.7
+
+
+ 🕒 多周期
+
+ 60M 偏空
+ 30M 震荡
+ 15M 偏空
+
+
+ 🕰 历史分析记录：SC2606 呈多周期空头排列...
+ 查看全部 →
+
+
+
+
+
+
\ No newline at end of file
diff --git a/data/new_ui/pad/prototype_tablet_report.html b/data/new_ui/pad/prototype_tablet_report.html
new file mode 100644
index 0000000..f4eb086
--- /dev/null
+++ b/data/new_ui/pad/prototype_tablet_report.html
@@ -0,0 +1,209 @@
+
+
+
+
+
+
+
+
+ ◈ 期货智析
+ 🔍 搜索品种...
+
+
+
+
+
+
+
+
+
+
+ ≡
+ 32
监控
+
+
+ ↗
+ 7
上涨
+
+
+ ↘
+ 10
下跌
+
+
+ ↔
+ 15
震荡
+
+
+ 全部
+ 能源
+ 金属
+ 农产品
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 首页
+ 自选
+ +
+ 分析
+ 我的
+
+
+
+
+
+
\ No newline at end of file
diff --git a/data/期货智析_UI设计规范_v2_Dark.md b/data/期货智析_UI设计规范_v2_Dark.md
new file mode 100644
index 0000000..b3a365f
--- /dev/null
+++ b/data/期货智析_UI设计规范_v2_Dark.md
@@ -0,0 +1,351 @@
+# 期货智析 — UI 设计规范 v2.0 (Dark Terminal)
+
+> **方案 A：专业交易终端风格**
+> 基于深色模式重新设计，参考 Bloomberg Terminal、TradingView Pro 等专业交易工具。
+> 核心目标：减少视觉疲劳、突出数据本身、增强专业感。
+
+---
+
+## 1. 设计原则
+
+| 原则 | 说明 |
+|------|------|
+| **深色优先** | 全局深色背景，降低长时间盯盘的视觉疲劳 |
+| **数据高亮** | 关键价格、涨跌幅使用高对比色，在深色背景上更醒目 |
+| **硬朗专业** | 减小圆角（6px），减少柔和阴影，使用边框和分隔线划分区域 |
+| **蓝色品牌** | 品牌色从紫色改为蓝色，更符合金融/科技专业工具的调性 |
+| **信息分层** | 利用背景色阶（`#0D1117` → `#161B22` → `#21262D`）构建清晰的层级 |
+
+---
+
+## 2. 色彩系统
+
+### 2.1 背景色阶（核心）
+
+| 名称 | HEX | 用途 |
+|------|-----|------|
+| Page BG | `#0D1117` | 页面最底层背景 |
+| Card BG | `#161B22` | 卡片、面板背景 |
+| Hover BG | `#21262D` | 卡片 Hover 态、次级区块 |
+| Input BG | `#010409` | 输入框、深色嵌套区域 |
+| Border | `#30363D` | 卡片边框、分割线 |
+| Border-Light | `#484F58` | 次要边框、表格线 |
+
+### 2.2 文字色阶
+
+| 名称 | HEX | 用途 |
+|------|-----|------|
+| Text Primary | `#C9D1D9` | 主标题、重要数值 |
+| Text Secondary | `#8B949E` | 副标题、标签、辅助说明 |
+| Text Tertiary | `#6E7681` | 禁用态、占位符、时间戳 |
+| Text Inverse | `#FFFFFF` | 深色按钮上的文字 |
+
+### 2.3 功能色（Dark Mode 适配）
+
+> 相比浅色模式，深色模式下的功能色需要提高亮度以保证对比度。
+
+| 名称 | HEX | 用途 |
+|------|-----|------|
+| 上涨 | `#F85149` | 价格上涨、做多信号 |
+| 上涨-淡 | `rgba(248, 81, 73, 0.15)` | 上涨背景遮罩 |
+| 下跌 | `#3FB950` | 价格下跌、做空信号 |
+| 下跌-淡 | `rgba(63, 185, 80, 0.15)` | 下跌背景遮罩 |
+| 观望/中性 | `#D29922` | 观望信号、震荡状态 |
+| 观望-淡 | `rgba(210, 153, 34, 0.15)` | 观望背景遮罩 |
+
+### 2.4 品牌色（蓝色系）
+
+| 名称 | HEX | 用途 |
+|------|-----|------|
+| Brand Primary | `#58A6FF` | 导航高亮、主按钮、选中态、链接 |
+| Brand Secondary | `#1F6FEB` | 按钮 Hover、强调 |
+| Brand Pale | `rgba(88, 166, 255, 0.15)` | 选中背景、轻量强调 |
+| Brand Border | `#58A6FF` | 选中边框 |
+
+### 2.5 AI / 智能色系
+
+> 保持紫色系以区分 AI 内容，但在深色模式下调整饱和度。
+
+| 名称 | HEX | 用途 |
+|------|-----|------|
+| AI Primary | `#A371F7` | AI 模块标题、智能按钮 |
+| AI BG | `rgba(163, 113, 247, 0.1)` | AI 分析区域背景 |
+| AI Border | `#A371F7` | AI 模块边框 |
+
+### 2.6 色调样例板
+
+```
+┌──────────────────────────────────────────────────────────────┐
+│ 背景色阶（深 → 浅） │
+│ ██████ #0D1117 ██████ #161B22 ██████ #21262D │
+│ ██████ #30363D ██████ #484F58 │
+├──────────────────────────────────────────────────────────────┤
+│ 文字色阶（亮 → 暗） │
+│ ██████ #C9D1D9 ██████ #8B949E ██████ #6E7681 │
+│ ██████ #FFFFFF │
+├──────────────────────────────────────────────────────────────┤
+│ 功能色（高亮） │
+│ ██████ #F85149 ██████ #3FB950 ██████ #D29922 │
+──────────────────────────────────────────────────────────────┤
+│ 品牌色（蓝） & AI色（紫） │
+│ ██████ #58A6FF ██████ #1F6FEB ██████ #A371F7 │
+└──────────────────────────────────────────────────────────────┘
+```
+
+### 2.7 CSS 变量定义
+
+```css
+:root {
+ /* 背景 */
+ --bg-page: #0D1117;
+ --bg-card: #161B22;
+ --bg-hover: #21262D;
+ --bg-input: #010409;
+ --border-default: #30363D;
+ --border-light: #484F58;
+
+ /* 文字 */
+ --text-primary: #C9D1D9;
+ --text-secondary: #8B949E;
+ --text-tertiary: #6E7681;
+ --text-inverse: #FFFFFF;
+
+ /* 功能色 */
+ --color-up: #F85149;
+ --color-up-bg: rgba(248, 81, 73, 0.15);
+ --color-down: #3FB950;
+ --color-down-bg: rgba(63, 185, 80, 0.15);
+ --color-neutral: #D29922;
+ --color-neutral-bg: rgba(210, 153, 34, 0.15);
+
+ /* 品牌色 */
+ --color-brand: #58A6FF;
+ --color-brand-hover: #1F6FEB;
+ --color-brand-bg: rgba(88, 166, 255, 0.15);
+
+ /* AI色 */
+ --color-ai: #A371F7;
+ --color-ai-bg: rgba(163, 113, 247, 0.1);
+}
+```
+
+---
+
+## 3. 字体系统
+
+### 3.1 字体族
+
+```css
+font-family:
+ 'SF Mono', 'Fira Code', 'Roboto Mono',
+ 'PingFang SC', 'Microsoft YaHei',
+ monospace, sans-serif;
+```
+
+> **注**：金融终端推荐使用等宽字体显示数字和代码，增强专业感。
+
+### 3.2 字号阶梯
+
+| 层级 | 字号 | 字重 | 行高 | 用途 |
+|------|------|------|------|------|
+| H1 | 20px | 600 | 28px | 页面主标题（深色下不宜过大） |
+| H2 | 16px | 600 | 24px | 模块标题 |
+| H3 | 14px | 600 | 20px | 卡片标题 |
+| Body | 13px | 400 | 20px | 正文内容 |
+| Body-S | 12px | 400 | 18px | 辅助说明 |
+| Caption | 11px | 400 | 16px | 极小标注 |
+| Num-L | 24px | 700 | — | 卡片价格（改用 24px 更紧凑） |
+| Num-M | 18px | 700 | — | 详情页价格 |
+| Num-S | 12px | 600 | — | 辅助数值 |
+
+---
+
+## 4. 间距与圆角
+
+### 4.1 间距（紧凑化）
+
+深色模式下，适当减小间距可以增加信息密度感。
+
+| Token | 值 | 用途 |
+|-------|-----|------|
+| `space-xs` | 4px | 图标与文字 |
+| `space-sm` | 8px | 卡片内元素 |
+| `space-md` | 12px | 卡片间距 |
+| `space-lg` | 16px | 区块间距 |
+| `space-xl` | 24px | 页面级间距 |
+
+### 4.2 圆角（硬朗化）
+
+| Token | 值 | 用途 |
+|-------|-----|------|
+| `radius-sm` | 4px | 小按钮、标签 |
+| `radius-md` | 6px | 卡片、面板、输入框 |
+| `radius-lg` | 8px | 弹窗 |
+| `radius-full` | 9999px | Pill 标签 |
+
+---
+
+## 5. 组件规范
+
+### 5.1 顶部导航栏
+
+```
+┌────────────────────────────────────────────────────────────────────┐
+│ 期货智析 [品种分析] 自选 市场概览 风险预警 [●LIVE] │
+└────────────────────────────────────────────────────────────────────┘
+```
+
+| 元素 | 规范 |
+|------|------|
+| 高度 | 48px（更紧凑） |
+| 背景 | `#0D1117` + 底边框 `#30363D` |
+| Logo | 图标 + 文字"期货智析"，字号 14px，字重 600，颜色 `#C9D1D9` |
+| 导航项 | 选中态：蓝色文字 `#58A6FF` + 下划线；未选中：灰色 `#8B949E` |
+| LIVE 徽章 | 绿色圆点 `#3FB950` + "LIVE"文字，字号 10px |
+
+### 5.2 搜索与筛选栏
+
+```
+┌────────────────────────────────────────────────────────────────────┐
+│ 🔍 搜索品种... [●网格] [○列表] │
+│ [●全部] [☆自选] [能源] [金属] [农产品] [刷新] [分析] [▼] │
+└────────────────────────────────────────────────────────────────────┘
+```
+
+| 元素 | 规范 |
+|------|------|
+| 搜索框 | 高度 32px，圆角 6px，背景 `#010409`，边框 `#30363D`，文字 `#C9D1D9` |
+| 视图切换 | 图标按钮，选中态蓝色 `#58A6FF` |
+| 分类 Pill | 高度 24px，圆角 4px，选中态蓝色背景 `rgba(88,166,255,0.15)` + 蓝色文字 |
+| 操作按钮 | "刷新"蓝色文字，"分析"蓝色实心按钮 |
+
+### 5.3 统计概览卡片
+
+```
+┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐
+│ ≡ 32 │ │ ↗ 7 │ │ ↘ 10 │ │ ↔ 15 │
+│ 监控品种 │ │ 上涨趋势 │ │ 下跌趋势 │ │ 震荡整理 │
+└──────────┘ └──────────┘ └──────────┘ └──────────┘
+```
+
+| 元素 | 规范 |
+|------|------|
+| 背景 | `#161B22`，边框 `#30363D` |
+| 数值 | 20px/700，`#C9D1D9` |
+| 标签 | 12px/400，`#8B949E` |
+| 图标 | 16×16px，颜色对应状态（涨红/跌绿/震荡橙） |
+
+### 5.4 品种卡片（核心组件 - Dark）
+
+```
+┌──────────────────────────────────────────────────────────┐
+│ SC 原油 ¥644.5 │
+│ SC2606 ↓ -13.3 (-2.02%) │
+├──────────────────────────────────────────────────────────┤
+│ [观望] │
+│ 成功率 ━━━━━━ 60% 趋势评分 30 │
+│ [5M] [15M] [30M] [1H] │
+│ 压力 642.4 支撑 631.7 [↻] [🔔] [★] → │
+└──────────────────────────────────────────────────────────┘
+```
+
+| 元素 | 规范 |
+|------|------|
+| 卡片背景 | `#161B22`，边框 `#30363D`，Hover 时边框变 `#58A6FF` |
+| 品种标识 | 32×32px，圆角 4px，背景 `#21262D`，文字 `#8B949E` |
+| 价格 | 24px/700，`#C9D1D9`（默认），涨跌时变红/绿 |
+| 涨跌幅 | 12px/600，红 `#F85149` / 绿 `#3FB950` |
+| 操作建议 | Pill 标签，高度 20px，圆角 4px，背景用半透明色（如 `rgba(210,153,34,0.15)`），文字用纯色 |
+| 进度条 | 高度 2px（更细），颜色对应状态 |
+| 周期 Pill | 高度 20px，圆角 4px，选中态蓝色边框 + 文字 |
+| 底部工具 | 图标颜色 `#8B949E`，Hover 变 `#C9D1D9` |
+
+### 5.5 K 线图表区（Dark）
+
+| 元素 | 规范 |
+|------|------|
+| 图表背景 | `#0D1117`（与页面背景一致，无边框感） |
+| 网格线 | `#21262D`（极淡） |
+| 蜡烛图 | 阳线 `#F85149`（空心或实心），阴线 `#3FB950` |
+| 均线 | MA5 `#D29922`，MA10 `#58A6FF`，MA20 `#A371F7` |
+| 成交量 | 阳线量柱 `#F85149` (40% 透明度)，阴线量柱 `#3FB950` (40% 透明度) |
+| 坐标轴 | 文字 `#6E7681` |
+
+### 5.6 右侧面板（Dark）
+
+```
+┌────────────────────────────────
+│ 🔊 AI 思维分析 [智能分析] │
+├────────────────────────────────┤
+│ SC2606 呈多周期空头排列... │
+├────────────────────────────────┤
+│ 入场区间 640.5-642.5 │
+│ 止损位 645.5 │
+└────────────────────────────────
+```
+
+| 元素 | 规范 |
+|------|------|
+| 面板背景 | `#161B22`，边框 `#30363D` |
+| 标题 | 14px/600，`#C9D1D9` |
+| AI 按钮 | 紫色渐变背景或紫色文字 |
+| 数据行 | 标签 `#6E7681`，数值 `#C9D1D9` |
+| 分隔线 | `#30363D` |
+
+### 5.7 弹窗（Dark）
+
+| 元素 | 规范 |
+|------|------|
+| 遮罩 | `rgba(0,0,0,0.7)`（更深） |
+| 弹窗背景 | `#161B22`，边框 `#30363D` |
+| 标题栏 | 背景 `#0D1117`，底边框 `#30363D` |
+| 表格头 | 背景 `#0D1117`，文字 `#8B949E` |
+| 表格行 | 背景 `#161B22`，Hover `#21262D` |
+| 风险提示 | 左边框 `#D29922`，背景 `rgba(210,153,34,0.1)` |
+
+---
+
+## 6. 交互规范
+
+### 6.1 状态反馈
+
+| 交互 | 反馈方式 |
+|------|---------|
+| 卡片 Hover | 背景变 `#21262D`，边框变 `#58A6FF` |
+| 按钮 Hover | 背景亮度增加 10% |
+| 按钮 Active | 背景亮度降低 10% |
+| 数据刷新 | 骨架屏（`#21262D` 脉冲动画） |
+
+### 6.2 滚动条
+
+| 元素 | 规范 |
+|------|------|
+| 轨道 | `#0D1117` |
+| 滑块 | `#30363D`，圆角 4px |
+| 滑块 Hover | `#484F58` |
+
+---
+
+## 7. 暗色模式专属优化
+
+1. **对比度检查**：所有文字与背景对比度至少 4.5:1（WCAG AA）。
+2. **避免纯黑纯白**：不使用 `#000000` 和 `#FFFFFF` 作为大面积背景/文字，减少眩光。
+3. **阴影替代**：深色模式下阴影不可见，改用边框颜色变化来体现层级和选中态。
+4. **图片适配**：如有图标/图片，增加 10% 亮度或添加半透明遮罩使其融入深色背景。
+
+---
+
+## 8. 开发资源清单
+
+| 资源 | 说明 |
+|------|------|
+| CSS 变量 | 已提供 `:root` 定义 |
+| 字体 | 推荐 `SF Mono` / `Fira Code` 用于数字 |
+| 图标 | 推荐 `Lucide` 或 `Phosphor Icons`（线性风格，适合深色） |
+| 图表 | `Lightweight Charts`（原生支持深色主题）或 `ECharts` |
+| 组件库 | 建议基于 `Ant Design Dark Theme` 或 `Radix UI` 定制 |
+
+---
+
+*文档版本: v2.0 (Dark Terminal) | 最后更新: 2026-05-23*
+*基于方案 A：专业交易终端风格*
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ AI 分析报告
+
+ ✕
+
+
+
+ "SC2606 呈多周期空头排列，均线全面压制且量能极度萎缩。建议观望或极轻仓逢高试空。"
+
+
+ 🔵 思维分析
+
+
+
+
+ 60M 周期
+ 超卖 空头趋势明确
+
+
+ 30M 周期
+ 超卖 缺乏量能验证
+
+
+ 15M 周期
+ 中性 受均线压制
+
+
+
+
+
+
+ 入场区间
+ 640.5-642.5
+
+
+ 止损位
+ 645.5
+
+
+ 仓位
+ 轻仓
+
+
+ 评分
+ 4/11
+ ⚠️ 风险提示
+
+
+
+
+
+ •
+ 技术指标具有滞后性，历史表现不代表未来。
+
+
+ •
+ SC2606 为远月合约，流动性极差，注意滑点风险。
+
+