企业官网建设流程全解析

PanWatch 分享卡片完全指南：4 类投资卡片一键生成分享图片

【免费下载链接】PanWatchPanWatch — AI stock monitoring for A-shares, HK & US markets, powered by TradingAgents. Portfolio insights, real-time alerts & automated reports.｜盯盘侠：覆盖 A股/港股/美股的 AI 盯盘、持仓分析、实时提醒与自动报告。项目地址: https://gitcode.com/GitHub_Trending/pa/PanWatch

PanWatch（盯盘侠）是一款覆盖 A股、港股、美股的 AI 盯盘工具，内置完整的分享卡片体系：深度分析结论、个股 AI 评分、持仓组合体检、模拟盘基准对比，都可以一键导出为高清 PNG 图片，方便截图分享到社群或记录自己的投资观点。本文带你了解这套卡片体系如何工作、在哪里触发，以及导出的图片里到底有什么。

什么是 PanWatch 分享卡片？

分享卡片（Share Card）是 PanWatch 把页面上复杂的数据「压缩成一张图」的功能。你不需要截图拼接、也不需要打开设计软件：

1. 在对应页面点击Share image / 分享卡片入口；
2. 弹出预览对话框，卡片以 640px 固定宽度渲染，配色使用显式内联样式，亮色/暗色主题下导出的 PNG 完全一致；
3. 点击「下载图片」，底层通过html-to-image以 2 倍分辨率（pixelRatio: 2）导出，文件名自动生成（如「股票名+日期」）。

通用外壳在 ShareCardDialog.tsx，所有卡片共享统一的标题栏、免责声明和 PanWatch 品牌页脚，保证每张分享图风格一致。

4 类分享卡片：各有分工

PanWatch 目前提供 4 张业务卡片，全部基于同一个外壳封装：

几个值得新手注意的细节：

• 评分分档配色：AI 评分 ≥8 分为高亮、≥6 分为中性、其余为灰色，与涨跌配色解耦，避免「颜色偏好改变评分含义」；
• 涨跌语义统一：买入/增持用涨色、卖出/减持用跌色、持有为中性琥珀色，与机会页（Opportunities）的标签逻辑保持一致；
• 纯 SVG 走势图：基准卡里的净值曲线是手写 SVG 双线图，零外部依赖，导出 PNG 不会缺字体或样式；
• 多语言卡片：所有文案走 i18n（p5.share.*命名空间），中英界面导出的卡片文字自动跟随。

去哪里触发分享卡片？

各卡片的入口都在对应功能页面的操作区：

• 深度分析卡 / 个股评分卡：个股详情页与深度分析结果页，点击分析结果旁的 Share 按钮。个股详情页同时聚合了 AI 建议、新闻、图表与分享入口，见 AnalysisDetail.tsx；
• 个股评分卡：机会页（Opportunities）每张候选股卡片底部的「Share image」按钮，评分与入场/目标价一目了然，见 Opportunities.tsx；
• 组合体检卡 / 基准成绩单卡：组合页（Portfolio）与模拟盘页（Paper trading）的诊断区域，配合 portfolio_benchmark.py 与 portfolio_diagnostics.py 的后端计算结果生成。

快速上手：3 步导出你的第一张卡片

1. 进入对应页面：持仓页看体检卡，机会页看评分卡，详情页看分析卡；
2. 点击 Share 入口：弹出预览，检查股票名、日期与评级标签是否正确；
3. 点击下载图片：PNG 自动保存到本地，文件名已包含标的名称与日期，直接拖进聊天窗口或笔记软件即可。

💡 小技巧：分享卡片默认脱敏——体检卡和基准卡只展示比例、占比与比率，不会暴露你的持仓金额，可以放心在公开场合分享。

这套卡片体系全部位于前端组件目录 frontend/src/components/，与 src/ARCHITECTURE.md 中描述的模块划分一致。如果你想给 PanWatch 贡献自己的卡片样式，阅读上文列出的四个卡片组件源码就是最好的起点。

【免费下载链接】PanWatchPanWatch — AI stock monitoring for A-shares, HK & US markets, powered by TradingAgents. Portfolio insights, real-time alerts & automated reports.｜盯盘侠：覆盖 A股/港股/美股的 AI 盯盘、持仓分析、实时提醒与自动报告。项目地址: https://gitcode.com/GitHub_Trending/pa/PanWatch