AI 分析页:截图与线框对照面板
等级:intermediate
正文配图源文件在仓库 kb/assets/analysis-panel/(你可替换为同名 WebP/PNG 实拍截图)。Next 构建或本地 pnpm --filter web dev 会将 kb/assets 整目录复制到 apps/web/public/kb/assets/,因此 MDX 里使用站点绝对路径 /kb/assets/... 即可加载。
整页自上而下(与 analysis.html 一致)
下图按真实 DOM 顺序标出主要区块与常用 id,便于你在浏览器开发者工具中检索。
| 屏幕区域 | 主要容器 / id | 与脚本的关系 |
|---|---|---|
| 顶部价格与迷你图 | #priceHero、#priceSymbol、#priceValue、#miniChart | 行情展示,非 renderSentimentTags |
| 综合评分 | #scoreBadge、#scoreBarLong、#scoreBarShort、#scoreVerdict、#countBull、#countBear、#countNeutral | renderSentimentTags 内会统计 bulls/bears,与底部 longScore 同源 |
| 左栏「市场信号摘要」 | #sentimentTags、#sentimentAllDetails、#sentimentIndicatorFull、#tradingAdvice | 标签与展开列表见 render.js;建议文案见《交易建议文案规则》 |
| 右栏恐惧贪婪等 | #fgNum、#fgValue 等 | 外部情绪数据,与指标 type 计数独立 |
左栏:标签 → 展开列表 → 操作建议
#sentimentTags:renderSentimentTags写入的彩色短标签(规则引擎摘要)。<details id="sentimentAllDetails">:摘要行上的「展开全部」;展开后#sentimentIndicatorFull由renderIndicatorsFullExpand填充,结构与下方分组面板每行一致。#tradingAdvice:纯文本建议,由 longScore 与 MACD/RSI/EMA200/BOLL 等组合分支生成,不是自动下单。
字段级说明见《指标面板行字段说明》;标签枚举见《情绪标签全字典》。
展开列表与分组中的「单行卡片」
与 renderIndicatorRow 输出一致:名称、强度条、说明、数值、方向 pill。分组容器由 renderGroup 按 indicators.*.group 筛选后逐行拼接。
如何换成你的实拍截图
- 在
D:\jinse2\kb\assets\analysis-panel\(或仓库内相对路径kb/assets/analysis-panel/)放入panel-overview.webp(示例),保持宽高适中。 - 将本文中对应图片 URL 改为
/kb/assets/analysis-panel/panel-overview.webp。 - 执行
pnpm --filter web kb:assets或pnpm --filter web build后刷新/kb文章页验证。
当前提交的 SVG 为线框占位,便于无实拍环境下排版与校对路径;替换文件后无需改脚本。
延伸阅读
- 《如何读 AI 分析页的「情绪标签」》(
intermediate/reading-ai-sentiment-tags) - 《指标面板行字段说明》(
intermediate/ai-indicator-panel-rows) - 《情绪标签全字典》(
intermediate/ai-sentiment-tags-dictionary) - 《交易建议文案规则》(
intermediate/ai-trading-advice-rules)