Files
Toolbox/public/tools/markets/index.html
T
yangxiangyuan 41c1821204 feat(markets): add trading calculator tool and optimize app config
1. 新增工具箱页面和A股交易计算工具
2. 配置expo项目信息与eas构建参数
3. 清理无用的worklets依赖
2026-07-08 14:40:53 +08:00

361 lines
17 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Yang's Toolbox · 市场跟踪</title>
<link rel="icon" href="/icons/markets.svg" type="image/svg+xml" />
<link rel="stylesheet" href="/common/common.css" />
<link rel="stylesheet" href="/tools/markets/markets.css" />
</head>
<body>
<main>
<section class="debug" id="m-debug-section" style="display:none">
<div class="debug-actions">
<button id="m-btn-copy" class="btn">复制调试信息</button>
<button id="m-btn-refresh" class="btn">刷新</button>
<button id="m-btn-clear" class="btn">清空</button>
</div>
<div id="m-debug-output" class="debug-output"></div>
</section>
<div class="subtabs">
<button id="m-tab-realtime" class="subtab active">实时数据</button>
<button id="m-tab-archive" class="subtab">封存数据</button>
<button id="m-tab-calendar" class="subtab">证券日历</button>
<button id="m-tab-weekly" class="subtab">指数周报</button>
<button id="m-tab-news" class="subtab">全球新闻</button>
<button id="m-tab-wisdom" class="subtab">理论与实践</button>
<button id="m-tab-tools" class="subtab">工具箱</button>
<div id="m-status" class="status status-inline" style="display:none"></div>
</div>
<div class="markets-layout">
<section id="m-panel-realtime" class="panel">
<div class="bar">
<button id="btn-fetch" class="btn">立即刷新</button>
<input id="rt-date" type="date" />
<button id="rt-btn-prev" class="btn">上一天</button>
<button id="rt-btn-today" class="btn">今天</button>
<button id="rt-btn-next" class="btn">下一天</button>
<button id="rt-btn-save-archive" class="btn">保存至库</button>
<button id="btn-settings" class="btn">设置</button>
<button id="btn-test" class="btn">发送测试邮件</button>
<button id="btn-skills-meta" class="btn">数元汇总</button>
<button id="btn-email-log" class="btn">邮件日志</button>
<span id="threshold-label" class="threshold-label"></span>
</div>
<div id="quotes" class="grid"></div>
</section>
<section id="m-panel-archive" class="panel" style="display:none">
<div class="bar">
<input id="arch-date" type="date" />
<button id="arch-btn-prev" class="btn">上一天</button>
<button id="arch-btn-today" class="btn">今天</button>
<button id="arch-btn-next" class="btn">下一天</button>
<button id="arch-btn-load" class="btn">加载</button>
</div>
<div class="status" id="archive-status" style="display:none"></div>
<div id="archive-view" style="border:1px solid #ddd;border-radius:8px;overflow:hidden"></div>
</section>
<section id="m-panel-calendar" class="panel" style="display:none">
<div class="bar">
<input id="cal-month" type="month" />
<button id="cal-btn-prev" class="btn">上个月</button>
<button id="cal-btn-current" class="btn">本月</button>
<button id="cal-btn-next" class="btn">下个月</button>
<button id="cal-btn-load" class="btn">加载日历</button>
<button id="cal-btn-refresh" class="btn">刷新数据</button>
<button id="cal-btn-ai-verify" class="btn">AI复核本周</button>
</div>
<div id="calendar-status" class="status" style="display:none"></div>
<div id="calendar-summary" class="markets-calendar-summary"></div>
<div class="markets-calendar-board">
<div id="calendar-grid" class="markets-calendar-grid"></div>
<aside id="calendar-detail" class="markets-calendar-detail"></aside>
</div>
</section>
<section id="m-panel-weekly" class="panel" style="display:none">
<div class="bar">
<input id="weekly-week" type="date" />
<button id="weekly-btn-prev" class="btn">上周</button>
<button id="weekly-btn-current" class="btn">本周</button>
<button id="weekly-btn-next" class="btn">下周</button>
<button id="weekly-btn-load" class="btn">加载周报</button>
<button id="weekly-btn-refresh" class="btn">刷新并补存</button>
<button id="btn-weekly-meta" class="btn">周报数元</button>
</div>
<div id="weekly-status" class="status" style="display:none"></div>
<div id="weekly-summary" class="markets-weekly-summary"></div>
<div id="weekly-grid" class="markets-weekly-grid"></div>
</section>
<section id="m-panel-news" class="panel" style="display:none">
<div class="bar">
<input id="news-date" type="date" />
<button id="news-btn-prev" class="btn">◀ 前一天</button>
<button id="news-btn-today" class="btn">昨天</button>
<button id="news-btn-current" class="btn">今天</button>
<button id="news-btn-next" class="btn">后一天 ▶</button>
<button id="news-btn-fetch" class="btn">🔄 手动探针抓取</button>
<button id="news-btn-translate" class="btn">🌐 手工AI翻译</button>
<button id="news-btn-analyze" class="btn">🤖 手工AI研判</button>
<button id="news-btn-logs" class="btn">📋 抓取日志</button>
<span id="news-status" class="status status-inline" style="display:none"></span>
</div>
<div class="news-summary-row" id="news-summary"></div>
<div class="table-responsive">
<table class="data-table" id="news-table">
<thead>
<tr>
<th style="width:55px">大洲</th>
<th style="width:60px">国家</th>
<th style="width:90px">媒体</th>
<th style="width:75px">时间</th>
<th class="news-col-flex">标题</th>
<th class="news-col-flex">简述</th>
<th style="width:50px">链接</th>
<th class="news-col-flex">AI研判</th>
</tr>
</thead>
<tbody id="news-list"></tbody>
</table>
</div>
</section>
<section id="m-panel-wisdom" class="panel" style="display:none">
<iframe id="wisdom-frame" src="/tools/markets/wallstreet_wisdom.html?v=10" style="width:100%;height:calc(100vh - 140px);border:none;"></iframe>
</section>
<section id="m-panel-tools" class="panel" style="display:none">
<div class="tools-container">
<!-- 工具一:交易计算 -->
<div class="tool-card" id="tool-calc">
<div class="tool-card-header">
<h3>1、交易计算</h3>
</div>
<div class="tool-card-body">
<div class="calc-input-row">
<label class="calc-label">原始价格</label>
<input type="number" id="calc-price" class="calc-input" placeholder="输入价格" step="0.01" min="0" />
<label class="calc-label">股数</label>
<input type="number" id="calc-shares" class="calc-input" placeholder="输入股数" step="100" min="100" />
<label class="calc-label">幅度</label>
<div class="calc-amount-group">
<select id="calc-amount-select" class="calc-select">
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
</select>
<input type="number" id="calc-amount-input" class="calc-input calc-input-sm" placeholder="自定义%" step="0.1" min="0" />
</div>
<div class="calc-radio-group">
<label class="calc-radio">
<input type="radio" name="calc-direction" value="up" checked />
<span class="calc-radio-label calc-radio-up">涨</span>
</label>
<label class="calc-radio">
<input type="radio" name="calc-direction" value="down" />
<span class="calc-radio-label calc-radio-down">跌</span>
</label>
<span id="calc-sign-display" class="calc-sign-display">+</span>
</div>
<label class="calc-label">成交金额</label>
<input type="text" id="calc-buy-amount" class="calc-input calc-result-input" readonly />
<button id="btn-calc" class="btn">计算</button>
</div>
<div class="calc-result-row">
<span class="calc-result-label">计算得到,最终价格</span>
<input type="text" id="calc-result-price" class="calc-input calc-result-input" readonly />
<span class="calc-result-label">(含交易费</span>
<input type="text" id="calc-result-fee" class="calc-input calc-result-input" readonly />
<span class="calc-result-label">),股数</span>
<input type="text" id="calc-result-shares" class="calc-input calc-result-input" readonly />
<span class="calc-result-label">最终成交金额</span>
<input type="text" id="calc-sell-amount" class="calc-input calc-result-input" readonly />
<span class="calc-result-label">差额</span>
<input type="text" id="calc-diff" class="calc-input calc-result-input" readonly />
</div>
</div>
</div>
<!-- 未来工具预留区域 -->
<div class="tools-placeholder" id="tools-placeholder">
<p class="tools-placeholder-text">更多工具开发中...</p>
</div>
</div>
</section>
</div>
</main>
<div id="settings-modal" class="modal hidden">
<div class="modal-body">
<h3>市场配置</h3>
<label>监控列表(JSON)</label>
<textarea id="wl" rows="6" placeholder='[{"label":"沪市","symbol":"sh000001","source":"sina"}]'></textarea>
<label>跌幅告警阈值(%)</label>
<input id="th" type="number" step="0.1" value="-2" />
<label>邮件配置(JSON)</label>
<textarea id="mail" rows="6" placeholder='{"enabled":false,"from":"","to":[""],"smtp":{"host":"","port":465,"secure":true,"auth":{"user":"","pass":""}}}'></textarea>
<div class="modal-actions">
<button id="btn-format-json" class="btn">格式化 JSON</button>
<button id="btn-save" class="btn">保存</button>
<button id="btn-close" class="btn">关闭</button>
</div>
</div>
</div>
<div id="skills-meta-modal" class="modal hidden">
<div class="modal-body skills-meta-body">
<div class="skills-meta-header">
<h3>数元汇总</h3>
<div id="skills-meta-stats" class="skills-meta-stats"></div>
</div>
<div class="skills-meta-content">
<div class="skills-meta-section">
<div class="skills-meta-section-title">📊 卡片数据源总览</div>
<div class="skills-meta-table-wrap">
<table class="skills-meta-table">
<thead><tr>
<th>卡片</th><th>代号</th><th>主源</th><th>备源</th><th>频率</th><th>最近数据</th><th>状态</th>
</tr></thead>
<tbody id="skills-meta-tbody"></tbody>
</table>
</div>
</div>
<div class="skills-meta-section">
<div class="skills-meta-section-title">🏗️ Skill 构成简述</div>
<div id="skills-meta-structure" class="skills-meta-structure"></div>
</div>
<div class="skills-meta-section">
<div class="skills-meta-section-title">⚠️ 异常排查</div>
<div id="skills-meta-anomalies" class="skills-meta-anomalies"></div>
<div class="skills-meta-section-title" style="margin-top:12px">🔗 数据源连通性</div>
<div id="skills-meta-heartbeats" class="skills-meta-heartbeats"></div>
</div>
</div>
<div class="modal-actions">
<button id="btn-skills-meta-close" class="btn">关闭</button>
</div>
</div>
</div>
<div id="email-log-modal" class="modal hidden">
<div class="modal-body" style="width:90vw;max-width:1000px;max-height:85vh;display:flex;flex-direction:column;overflow:hidden">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-shrink:0">
<h3 style="margin:0;font-size:18px;color:#111827">邮件日志</h3>
<div style="display:flex;gap:8px;align-items:center">
<span id="email-log-count" style="font-size:13px;color:#64748b">共 0 条</span>
<button id="btn-email-log-refresh" class="btn" style="font-size:13px;padding:6px 12px">刷新</button>
<button id="btn-email-log-close" class="btn" style="font-size:13px;padding:6px 12px">关闭</button>
</div>
</div>
<div style="overflow:auto;flex:1">
<table class="email-log-table">
<thead>
<tr>
<th style="width:60px">ID</th>
<th style="width:100px">时间</th>
<th style="width:100px">来源</th>
<th style="width:180px">告警ID</th>
<th>主题</th>
<th style="width:80px">状态</th>
<th>详情</th>
</tr>
</thead>
<tbody id="email-log-tbody"></tbody>
</table>
</div>
</div>
</div>
<div id="weekly-meta-modal" class="modal hidden">
<div class="modal-body skills-meta-body">
<div class="skills-meta-header">
<h3>指数周报 · 数元汇总</h3>
<div id="weekly-meta-stats" class="skills-meta-stats"></div>
</div>
<div class="skills-meta-content">
<div class="skills-meta-section">
<div class="skills-meta-section-title">📊 周报卡片数据源总览</div>
<div class="skills-meta-table-wrap">
<table class="skills-meta-table">
<thead><tr>
<th>卡片</th><th>代号</th><th>主源</th><th>备源</th><th>分组</th><th>可靠性</th>
</tr></thead>
<tbody id="weekly-meta-tbody"></tbody>
</table>
</div>
</div>
<div class="skills-meta-section">
<div class="skills-meta-section-title">🔗 数据源连通性</div>
<div id="weekly-meta-heartbeats" class="skills-meta-heartbeats"></div>
</div>
<div class="skills-meta-section">
<div class="skills-meta-section-title">⚠️ 风险诊断</div>
<div id="weekly-meta-diagnosis" class="skills-meta-anomalies"></div>
</div>
</div>
<div class="modal-actions">
<button id="btn-weekly-meta-close" class="btn">关闭</button>
</div>
</div>
</div>
<div id="news-logs-modal" class="modal hidden">
<div class="modal-body" style="width:90vw;max-width:90vw;height:90vh;max-height:90vh;display:flex;flex-direction:column;overflow:hidden">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-shrink:0">
<h3 style="margin:0;font-size:18px;color:#111827">📋 抓取日志</h3>
<div style="display:flex;gap:8px;align-items:center">
<span id="news-logs-count" style="font-size:13px;color:#64748b"></span>
<button id="news-btn-copy-logs" class="btn" style="font-size:13px;padding:6px 12px">复制全部</button>
<button id="news-btn-clear-logs" class="btn" style="font-size:13px;padding:6px 12px;background:linear-gradient(135deg,#ef4444,#dc2626)">清空日志</button>
<button id="news-btn-logs-close" class="btn" style="font-size:13px;padding:6px 12px">关闭</button>
</div>
</div>
<div id="news-logs-content" style="flex:1;overflow:auto;background:#1e1e2e;color:#cdd6f4;padding:16px;font-family:'Cascadia Code','Fira Code','JetBrains Mono','Consolas',monospace;font-size:13px;line-height:1.6;border-radius:10px;border:1px solid #313244;white-space:pre-wrap;word-break:break-all"></div>
</div>
</div>
<div id="interaction-modal" class="modal hidden">
<div class="modal-body interaction-modal-body">
<div class="interaction-modal-head">
<div>
<h3 id="interaction-title">交互详情</h3>
<div id="interaction-meta" class="interaction-meta"></div>
</div>
<span id="interaction-badge" class="interaction-badge">进行中</span>
</div>
<div id="interaction-summary" class="interaction-summary">等待执行...</div>
<pre id="interaction-log" class="interaction-log"></pre>
<div class="modal-actions interaction-actions">
<span id="interaction-hint" class="interaction-hint"></span>
<button id="interaction-copy" class="btn">复制详情</button>
<button id="interaction-close" class="btn">关闭</button>
</div>
</div>
</div>
<script src="/common/common.js"></script>
<script src="/tools/markets/markets.js?v=3"></script>
<script src="/tools/markets/markets_tools.js?v=1"></script>
<script>
(async function(){
try {
const res = await fetch('/api/flags')
const data = await res.json()
if (data && data.debug && data.debug.markets) {
const sec = document.getElementById('m-debug-section')
if (sec) sec.style.display = ''
}
} catch {}
})()
</script>
</body>
</html>