TradingAgents-CN 报告详情页关键指标增强：置信度评分与风险等级可视化实践

TradingAgents-CN 报告详情页关键指标增强置信度评分与风险等级可视化实践【免费下载链接】TradingAgents-CN基于多智能体LLM的中文金融交易框架 - TradingAgents中文增强版项目地址: https://gitcode.com/GitHub_Trending/tr/TradingAgents-CN导读本文聚焦 TradingAgents-CN基于多智能体 LLM 的中文金融交易框架报告详情页面的关键指标展示增强方案以 Element Plus 圆形进度条呈现 0-100 分置信度评分、以 1-5 星脉冲动画呈现风险等级并配套投资建议与关键要点的卡片化展示。读完本文你将掌握该增强功能的前端实现细节、后端数据字段约定特别是confidence_score的 0-1 小数格式与前端百分制转换、样式与动画设计以及可复用的兼容性处理与后续优化思路。一、增强背景为什么报告详情页需要关键指标TradingAgents-CN 的分析报告由多智能体协作生成——市场分析师、基本面分析师、新闻分析师、情绪分析师、技术分析师共同产出报告最终形成交易决策。原始报告详情页以长文 Markdown 为主用户需要通读全文才能抓住模型有多确信、风险有多高这两个最核心的信息。本次增强的目标是在 frontend/src/views/Reports/ReportDetail.vue 中新增关键指标卡片将两个最影响决策的量化信息可视化模型置信度多智能体对最终决策的信心程度0-100 分风险评估基于历史数据给出的风险等级低/中低/中等/中高/高。该卡片同时保留投资建议Markdown 富文本与关键要点带勾选图标的列表让用户在进入详情页的第一屏即可完成可信度—风险—结论—要点的信息闭环。二、数据契约前端字段与后端来源增强功能依赖以下报告数据结构前端类型定义位于 frontend/src/types/analysis.tsinterface Report { id: string stock_symbol: string recommendation: string // 投资建议Markdown 格式 confidence_score: number // 置信度评分0-1 的小数例如 0.85 表示 85% risk_level: string // 风险等级低/中低/中等/中高/高 key_points: string[] // 关键要点数组 // ... 其他字段 }重要说明后端返回的confidence_score是0-1 的小数例如 0.85前端展示前必须转换为 0-100 的百分制。后端侧报告详情的序列化逻辑位于 app/routers/reports.py接口GET /api/reports/{report_id}/detail会返回recommendation: r.get(recommendation, ), confidence_score: r.get(confidence_score, 0.0), risk_level: r.get(risk_level, 中等), key_points: r.get(key_points, []),数据模型层app/models/analysis.py中这些字段均为可选字段recommendation: Optional[str] None confidence_score: Optional[float] None risk_level: Optional[str] None key_points: List[str] Field(default_factorylist)而confidence_score与risk_level的实际赋值来自分析服务在最终交易决策阶段从多智能体产出中提取的字段例如 app/services/analysis_service.pyconfidence_scoredecision.get(confidence_score, 0.0), risk_leveldecision.get(risk_level, 中等),这意味着置信度与风险等级并非前端虚构而是多智能体最终决策输出的结构化指标前端只负责将它们以更直观的方式呈现。三、置信度评分圆形进度条实现3.1 组件结构使用 Element Plus 的el-progress组件以typecircle渲染圆形进度条并通过默认插槽自定义中心文本el-progress typecircle :percentagenormalizeConfidenceScore(report.confidence_score || 0) :width120 :stroke-width10 :colorgetConfidenceColor(normalizeConfidenceScore(report.confidence_score || 0)) template #default{ percentage } span classconfidence-text span classconfidence-number{{ percentage }}/span span classconfidence-unit分/span /span /template /el-progress参数说明参数值说明typecircle圆形进度条形态percentage0-100 的数值归一化后的置信度分数width120圆环整体宽度pxstroke-width10圆环描边宽度pxcolor函数返回值随分数动态变化的圆环颜色中心插槽展示85 分这样的大号数字 单位配合下方的信心等级文字getConfidenceLabel返回值形成分数 等级双重信息。3.2 核心辅助函数// 将后端返回的 0-1 小数转换为 0-100 的百分制 const normalizeConfidenceScore (score: number) { // 如果已经是 0-100 的范围直接返回 if (score 1) { return Math.round(score) } // 如果是 0-1 的小数转换为百分制 return Math.round(score * 100) } // 根据评分返回颜色 const getConfidenceColor (score: number) { if (score 80) return #67C23A // 高信心 - 绿色 if (score 60) return #409EFF // 中高信心 - 蓝色 if (score 40) return #E6A23C // 中等信心 - 橙色 return #F56C6C // 低信心 - 红色 } // 根据评分返回标签 const getConfidenceLabel (score: number) { if (score 80) return 高信心 if (score 60) return 中高信心 if (score 40) return 中等信心 return 低信心 }关键设计点——归一化兼容normalizeConfidenceScore通过score 1判断当前是 0-1 小数还是 0-100 百分制。这一判断兼容了新旧两种后端数据格式旧版本若直接输出百分制数值不会因乘以 100 而放大 100 倍新版本输出 0.85 这样的标准小数则正确映射为 85 分。该函数在模板中被调用两次percentage 与 color为避免重复计算实际生产代码可在computed中缓存归一化结果。3.3 颜色语义分数区间颜色色值信心等级80-100绿色#67C23A高信心60-79蓝色#409EFF中高信心40-59橙色#E6A23C中等信心0-39红色#F56C6C低信心颜色选用 Element Plus 语义色与全站设计语言保持一致红橙蓝绿的渐变过渡符合越低越危险、越高越可信的直觉认知。四、风险等级星级显示实现4.1 组件结构风险等级使用 1-5 颗星表示StarFilled图标通过star getRiskStars(...)判断星星是否激活div classrisk-display div classrisk-stars el-icon v-forstar in 5 :keystar classstar-icon :class{ active: star getRiskStars(report.risk_level || 中等) } StarFilled / /el-icon /div div classrisk-label :style{ color: getRiskColor(report.risk_level || 中等) } {{ report.risk_level || 中等 }}风险 /div div classrisk-description{{ getRiskDescription(report.risk_level || 中等) }}/div /div结构分三层星级图标、带动态颜色的等级文字、风险描述。风险等级与星级映射关系如下风险等级星星数语义低⭐低风险中低⭐⭐中低风险中等⭐⭐⭐中等风险中高⭐⭐⭐⭐中高风险高⭐⭐⭐⭐⭐高风险4.2 核心辅助函数// 根据风险等级返回星星数量 const getRiskStars (riskLevel: string) { const riskMap: Recordstring, number { 低: 1, 中低: 2, 中等: 3, 中高: 4, 高: 5 } return riskMap[riskLevel] || 3 } // 根据风险等级返回颜色 const getRiskColor (riskLevel: string) { const colorMap: Recordstring, string { 低: #67C23A, // 绿色 中低: #95D475, // 浅绿色 中等: #E6A23C, // 橙色 中高: #F56C6C, // 红色 高: #F56C6C // 深红色 } return colorMap[riskLevel] || #E6A23C } // 根据风险等级返回描述 const getRiskDescription (riskLevel: string) { const descMap: Recordstring, string { 低: 风险较小适合稳健投资者, 中低: 风险可控适合大多数投资者, 中等: 风险适中需要谨慎评估, 中高: 风险较高需要密切关注, 高: 风险很高建议谨慎投资 } return descMap[riskLevel] || 请根据自身风险承受能力决策 }三个映射表的设计要点getRiskStars未匹配时默认返回 3中等保证未知等级不会显示 0 星或空状态getRiskColor中高与高共用红色#F56C6C仅在等级文字上区分中高风险/高风险颜色语义不产生歧义getRiskDescription为每个等级提供面向投资者的白话描述降低理解门槛。4.3 星星动画激活的星星通过starPulse关键帧实现脉冲效果在 ReportDetail.vue 样式区定义keyframes starPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } .star-icon { color: #DCDFE6; transition: all 0.3s ease; .active { color: #F7BA2A; animation: starPulse 0.6s ease-in-out; } }未激活星星为灰色#DCDFE6激活星星为金色#F7BA2A0.6 秒的脉冲动画在页面加载时给予视觉反馈突出当前风险等级。五、投资建议与关键要点5.1 投资建议Markdown 富文本投资建议保持原有 Markdown 渲染链路通过marked库解析import { marked } from marked marked.setOptions({ breaks: true, gfm: true }) const renderMarkdown (content: string) { if (!content) return try { return String(marked.parse(content)) } catch (e) { return pre stylewhite-space: pre-wrap; font-family: inherit;${content}/pre } }启用gfmGitHub Flavored Markdown与breaks换行即br解析失败时降级为pre原样输出保证内容不丢失在模板中通过v-htmlrenderMarkdown(report.recommendation || 暂无)渲染。5.2 关键要点带勾选图标的列表div v-ifreport.key_points report.key_points.length 0 classkey-points h4 el-iconList //el-icon 关键要点 /h4 ul li v-for(point, index) in report.key_points :keyindex el-icon classpoint-iconCheck //el-icon {{ point }} /li /ul /div使用v-if守卫key_points为空或不存在时整块隐藏每项前置绿色Check勾选图标列表项带圆角背景、悬停背景色加深的交互效果。六、样式增强细节6.1 卡片样式关键指标卡片.metrics-card内每个指标项.metric-item圆角边框12px悬停效果box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)transform: translateY(-2px)轻微上移transition: all 0.3s ease渐变过渡动画。6.2 图标与标签所有指标标签分析参考 / 风险评估 / 模型置信度均配备对应图标TrendCharts、Warning、DataAnalysis与QuestionFilled悬浮提示图标大小统一为 18px置信度、风险卡片旁的解释 tooltip 明确提示仅供参考不构成投资建议不代表实际投资成功率体现金融工具的审慎性。6.3 响应式布局使用 Element Plus 栅格系统三列等宽el-row :gutter24 el-col :span8 !-- 分析参考 -- /el-col el-col :span8 !-- 风险评估 -- /el-col el-col :span8 !-- 模型置信度 -- /el-col /el-row每列span8三列合计 24等宽铺满一行gutter24统一列间距关键要点区域以border-top分隔线挂在指标卡片下方形成独立的视觉分区。七、视觉效果示意置信度评分┌─────────────────────┐ │ 置信度评分 │ │ │ │ ╱───╲ │ │ ╱ 85 ╲ │ │ │ 分 │ │ │ ╲ ╱ │ │ ╲───╱ │ │ │ │ 高信心 │ └─────────────────────┘风险等级┌─────────────────────┐ │ ⚠️ 风险等级 │ │ │ │ ⭐⭐⭐⭐⭐ │ │ │ │ 高风险 │ │ │ │ 风险很高建议谨慎 │ │ 投资 │ └─────────────────────┘八、使用示例与预期效果访问路径进入分析报告列表页面路由/reports对应 frontend/src/views/Reports/index.vue点击任意报告的查看详情按钮跳转至GET /api/reports/{report_id}/detail后端实现见 app/routers/reports.py在报告详情页查看增强后的关键指标卡片。预期效果置信度评分圆形进度条 动态颜色 信心等级标签风险等级1-5 星 等级文字着色 白话风险描述 星星脉冲动画投资建议Markdown 富文本渲染支持加粗、列表、链接等格式关键要点勾选图标列表悬停有背景反馈。与应用到交易的联动confidence_score与risk_level不仅用于展示还参与交易决策确认流程parseRecommendation()从建议文本解析买卖方向与目标价将置信度按百分制展示(confidence * 100).toFixed(1) %、风险等级原样带入ElMessageBox确认弹窗并给出不代表实际成功率实际风险可能更高的提示使可视化指标贯穿从看报告到下单的完整链路。九、兼容性设计数据兼容字段缺失场景兜底行为confidence_score为空默认显示 0 分risk_level为空默认中等风险3 星key_points为空/不存在隐藏关键要点整块前端模板中统一使用report.confidence_score || 0、report.risk_level || 中等的写法后端 app/routers/reports.py 的序列化同样提供0.0与中等默认值双端兜底保证旧报告数据不会出现渲染异常。浏览器兼容支持所有现代浏览器Chrome、Firefox、Safari、Edge动画与过渡全部基于 CSS3keyframes、transition、transform无 JS 动画依赖组件层统一使用 Element Plus保证跨浏览器渲染一致性。十、后续优化建议数据可视化添加历史置信度评分趋势图观察模型信心随时间变化添加风险等级变化趋势识别风险演化路径。交互增强点击置信度评分展开详细计算依据各分析师贡献度点击风险等级展开风险因素分析明细。个性化允许用户自定义风险等级阈值允许用户自定义置信度评分的颜色映射。导出功能支持将关键指标导出为图片支持将关键指标包含进 PDF 报告中仓库已具备 Markdown/Word/PDF/JSON 下载能力可复用 app/routers/reports.py 中的导出逻辑。十一、总结本次报告详情页关键指标增强为 TradingAgents-CN 的多智能体分析报告补齐了一眼可读的量化摘要层✅ 置信度评分使用圆形进度条 分级配色 信心标签一目了然✅ 风险等级使用 1-5 星 分级配色 白话描述符合用户直觉✅ 动态颜色与星星脉冲动画提升体验不牺牲信息准确性✅ 双端默认值兜底兼容旧数据不会出现显示错误✅ 指标数据源自后端最终交易决策的结构化输出与多智能体分析链路闭环。这些改进使用户能够更快理解报告核心信息将注意力从读长文转向看结论、评估可信度与风险从而做出更审慎的投资决策。相关实现均可在 frontend/src/views/Reports/ReportDetail.vue 中查阅与复现。【免费下载链接】TradingAgents-CN基于多智能体LLM的中文金融交易框架 - TradingAgents中文增强版项目地址: https://gitcode.com/GitHub_Trending/tr/TradingAgents-CN创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考