try 去除 more on subjuect
# 📋 PRD：CRYPTO WIRE — 纯前端加密货币沉浸式新闻看板
## 完整版 · 手机/桌面双端 · 零配置即开即用
---
## 一、项目背景与目标
构建一个**无后端、单 HTML 文件**的加密货币新闻看板。
打开即用，**无需任何 API Key**（默认模式走零密钥 RSS 聚合），点击可选接入更强 API。
左侧新闻流 · 右侧 iframe 原文阅读 · 底部实时价格跑马灯。
---
## 二、API 选型（已调研确认，2025年6月可用）
### ✅ 方案 A：零 Key，开箱即用（默认首选）
**rss2json.com 免费 RSS 转 JSON 代理**
```
GET https://api.rss2json.com/v1/api.json?rss_url={ENCODED_RSS_URL}&count=20
```
无需注册，无需 Key，CORS 全开，免费 10 req/min。
内置多个加密媒体 RSS 源（自动轮询，任一失败自动切换）：
| 媒体来源 | RSS Feed URL |
|---|---|
| CoinDesk | https://www.coindesk.com/arc/outboundfeeds/rss/ |
| CoinTelegraph | https://cointelegraph.com/rss |
| Decrypt | https://decrypt.co/feed |
| Bitcoin Magazine | https://bitcoinmagazine.com/feed |
| Blockworks | https://blockworks.co/feed |
返回字段：`title`, `link`, `pubDate`, `author`, `thumbnail`, `description`, `content`
---
### ✅ 方案 B：CryptoPanic（免费注册获 Token，最专业）
```
GET https://cryptopanic.com/api/v1/posts/?auth_token={TOKEN}&public=true&kind=news¤cies=BTC,ETH
```
- 注册地址：https://cryptopanic.com/accounts/register/
- 免费额度：1,000 次/月
- 返回：title, url, source, published_at, currencies, votes（情绪评分）
- 特色：有 🔥hot / 📈bullish / 📉bearish 情绪标签
---
### ✅ 方案 C：Newsdata.io（免费注册，200 credits/天）
```
GET https://newsdata.io/api/1/latest?apikey={KEY}&q=Crypto&language=en
```
- 注册地址：https://newsdata.io/register
- 免费额度：200 次/天，每次最多 10 条
- 返回：title, link, image_url, description, source_id, pubDate
---
### ✅ 实时价格跑马灯：CoinGecko（完全免费，无 Key）
```
GET https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=bitcoin,ethereum,solana,bnb,xrp,dogecoin&order=market_cap_desc
```
- 无需注册，无需 Key，30 次/分钟
- 返回：name, symbol, current_price, price_change_percentage_24h, image
---
## 三、界面布局
### 桌面端（>768px）：左右 50/50 分屏
```
┌─────────────────────────────────────────────────────────────┐
│ ⚡ CRYPTOWIRE [来源选择器▼] [KEY输入] [🔄FETCH] │
├─────────────────────────────────────────────────────────────┤
│ LEFT: 新闻流（独立滚动） │ RIGHT: 原文 iframe（全高） │
│ ┌──────────────────────┐ │ ┌───────────────────────┐ │
│ │ [来源] [时间] │ │ │ [标题栏] [↗打开原文] │ │
│ │ 加粗大标题（2行截断） │ │ │ │ │
│ │ [🖼缩略图] [摘要文字] │ │ │ iframe 100%宽高 │ │
│ └──────────────────────┘ │ │ 原汁原味原文网页 │ │
│ ┌──────────────────────┐ │ │ │ │
│ │ ...更多卡片... │ │ └───────────────────────┘ │
├─────────────────────────────────────────────────────────────┤
│ 📊 BTC $97,200 +1.2% ETH $3,400 -0.5% SOL $180 +3.1% │
└─────────────────────────────────────────────────────────────┘
```
### 手机端（≤768px）：Tab 切换模式
- 顶部 Tab：**📰 Feed** | **📄 Article**
- Feed Tab：全屏竖向新闻卡片流
- Article Tab：全屏 iframe 阅读器
- 点击新闻卡片自动切换到 Article Tab
---
## 四、功能需求
### F1 — 多数据源切换器（顶部 Select）
用户可在 Header 的下拉选择切换当前数据源：
- `📡 RSS (免费，无需Key)` ← 默认
- `⚡ CryptoPanic (需Token)`
- `📰 Newsdata.io (需Key)`
选择付费源时，显示对应的 Key 输入框，值存 localStorage。
### F2 — 新闻卡片
每张卡片包含：
1. 来源标签（彩色 badge）+ 发布时间（x分钟前）
2. 标题（Syne 字体，粗体，最多2行省略）
3. 缩略图（16:9，懒加载，404时显示占位）+ 摘要文字（3行省略）
4. 鼠标悬停：左边高亮金线 + 轻微右移动画
### F3 — iframe 原文阅读
- 点击卡片 → 右侧 iframe 加载原文
- `sandbox="allow-scripts allow-same-origin allow-popups allow-forms"`
- 右上角常驻「↗ 在新标签打开」按钮（应对 X-Frame-Options: DENY）
- iframe 加载中显示 spinner
### F4 — 实时价格跑马灯
- 底部固定一行，滚动展示 BTC/ETH/SOL/BNB/XRP/DOGE 实时价格
- 绿涨红跌颜色标注
- 每60秒静默刷新
### F5 — 本地缓存
- API Key 存 localStorage，下次打开自动回填
- 已选数据源存 localStorage
- 上次拉取结果缓存5分钟，避免频繁消耗配额
---
## 五、视觉规范
| 变量 | 值 |
|---|---|
| 背景主色 | `#07080d` |
| 卡片底色 | `#13141c` |
| 金色高亮 | `#f0b90b` |
| 青色辅助 | `#00d4ff` |
| 标题文字 | `#f0f1f5` |
| 摘要文字 | `#7a8099` |
| 主字体 | Syne（标题）+ DM Sans（正文）+ DM Mono（数据）|
---
## 六、技术实现要点
### CORS 处理
- rss2json.com 已内置 CORS 代理，直接 fetch 即可
- CryptoPanic 官方 API 支持 CORS
- Newsdata.io 官方 API 支持 CORS
### iframe X-Frame-Options 降级
部分网站（如 Bloomberg、WSJ）设置了 `X-Frame-Options: DENY`，无法嵌入。
解决方案：iframe 顶部常驻「↗ 原文」按钮，一键新标签打开。
### 移动端 100vh 问题
使用 `height: 100dvh` + fallback `height: 100vh`，解决 Safari 地址栏遮挡问题。
---
## 七、完整源代码
见同目录 `crypto-wire.html` — 直接打开即可使用，无需安装任何依赖。
**默认即用**：打开 HTML → 自动加载 CoinDesk + CoinTelegraph RSS 新闻
**升级体验**：点击来源选择器切换到 CryptoPanic / Newsdata.io，输入免费 Token 获得更多数据
---
## 八、API Key 获取步骤
### CryptoPanic（推荐，免费）
1. 访问 https://cryptopanic.com/accounts/register/
2. 注册后进入 https://cryptopanic.com/developers/api/keys
3. 复制 auth_token 粘贴到应用的 Key 输入框
### Newsdata.io（可选，免费200次/天）
1. 访问 https://newsdata.io/register
2. 注册后在 Dashboard 复制 API Key
3. 粘贴到应用的 Key 输入框
### rss2json.com（默认，完全无需注册）
- 无需任何操作，打开即用
---
*文档版本：v2.0 | 更新时间：2025年6月*
