BTC 期权策略图解 · Option Strategy

如果说衍生品是金融产品中的皇冠，那么期权就是这顶皇冠上的明珠

交互式可视化学习 BTC 期权策略 —— 从「什么是期权」到 40+ 进阶组合，小白也能看懂。

🌐 在线访问 → option.red

一个面向学习者的 BTC 期权策略交互式教学网站。每个策略都配有可交互的到期盈亏曲线、情景推演表与结构化详解，并辅以「一句话大白话、生活类比、新手误区、加密实盘提醒」等小白友好内容，帮助你由浅入深地理解期权的构造、风险、收益与适用场景。

纯前端静态站点，所有盈亏在浏览器端实时计算，无后端、不涉及任何真实交易。仅用于教育与可视化演示。

✨ 功能特性

📈 交互式盈亏图：基于 Recharts 绘制到期盈亏曲线（±40% 价格区间），自动标注盈亏平衡点、最大盈利/亏损与「收益无限 / 风险无限」方向；悬停查看任意价格的盈亏。
🧮 纯前端实时计算：根据每个策略的「期权腿（legs）」在浏览器端推算盈亏曲线与情景表，数据与图表始终自洽。
💬 小白友好分层讲解：每个策略提供

- 「一句话大白话」「用生活类比理解」「✅/🚫 什么时候用 / 别用」； - 「🚫 新手常见误区」「⚙️ 加密期权 & 实盘提醒」； - 「希腊字母暴露表」（Delta / Gamma / Theta / Vega 一眼看清方向）。

📚 完整教学体系：内置「期权基础、新手学习路径（含策略选择决策树）、术语速查、进阶概念（平价公式 / Skew / 欧式现金交割）」四个教学条目。
📐 统一七章节详解：每个策略的详解遵循一致的 HTML 模板（核心思想 / 构造 / 损益 / 实战案例 / 使用场景 / 风险提示 / 专业建议），含具体数值与希腊字母说明。
📱 响应式 & 无障碍：移动端抽屉式侧栏、键盘可达（focus 环 / 跳转链接 / aria-*）、prefers-reduced-motion 适配。

📚 内容覆盖

共 46 项内容（4 项基础/教学 + 42 个策略），按方向与波动率观点分类：

| 分类 | 数量 | 示例 | | --- | :---: | --- | | 期权基础 / 教学 | 4 | 期权基础、新手学习路径、术语速查、进阶概念 | | 看涨 Bullish | 10 | 买入看涨、牛市看涨价差、风险逆转、合成多头、看涨比例（反向/正向）价差、现金担保看跌… | | 看跌 Bearish | 9 | 买入看跌、熊市看跌价差、看跌比例（反向/正向）价差、裸卖看涨、合成空头、空头条式… | | 盘整 / 中性 Neutral | 12 | 铁鹰式、铁蝶式、看涨/看跌蝶式、断翼蝶式、看涨/看跌时间价差、卖出跨式/宽跨式、盒式组合… | | 高波动 Volatility | 4 | 买入跨式、买入宽跨式、买入内陷宽跨式、反向铁鹰 | | 收益 / 对冲 Income | 7 | 备兑看涨、保护性看跌、领口、翡翠蜥蜴、海鸥、轮子、备兑宽跨式 |

策略命名统一采用 中文名 (English Name) 半角括号格式，英文取行业通用名。

🛠 技术栈

| 类别 | 选型 | | --- | --- | | 框架 | React 19 + TypeScript 5.8 | | 构建 | Vite 6 | | 图表 | Recharts 3 | | 样式 | Tailwind CSS 3（本地 PostCSS 构建，含 content 扫描与 safelist） | | 字体 | Inter（拉丁）+ JetBrains Mono（等宽数字） | | 部署 | GitHub Actions → Cloudflare Pages |

🚀 快速开始

环境要求

Node.js 20+
npm

安装与开发

# 1. 克隆仓库
git clone https://github.com/riba2534/btc_options.git
cd btc_options
2. 安装依赖
npm install
3. 启动开发服务器（默认 http://localhost:3000）
npm run dev

可用脚本

| 命令 | 说明 | | --- | --- | | npm run dev | 启动开发服务器（HMR 热更新） | | npm run build | 类型检查 + 生产构建，产物输出到 dist/ | | npm run preview | 本地预览生产构建产物 | | npm run typecheck | 仅运行 TypeScript 类型检查 | | npm run lint | 运行 ESLint 检查 |

📁 项目结构

btc_options/
├── App.tsx                     # 主应用（布局、侧边栏导航、响应式逻辑）
├── index.tsx                   # 应用入口
├── index.html                  # HTML 模板（加载 Inter / JetBrains Mono 字体）
├── index.css                   # 全局样式 + Tailwind 指令入口
├── constants.ts                # 对外导出 STRATEGIES 与 DEFAULTBTCPRICE
├── types.ts                    # 类型定义：Strategy / OptionLeg / GreekExposure …
├── components/
│   ├── PnLChart.tsx            # 到期盈亏曲线图（Recharts）
│   └── StrategyDetail.tsx      # 策略详情：图表 + 构造 + 情景表 + 详解渲染
├── src/strategies/             # 策略数据（按分类拆分，每个策略独立成文件）
│   ├── basics/                 # 期权基础与教学条目
│   ├── bullish/                # 看涨
│   ├── bearish/                # 看跌
│   ├── neutral/                # 中性
│   ├── volatility/             # 高波动
│   ├── income/                 # 收益 / 对冲
│   └── index.ts                # 聚合为 ALL_STRATEGIES
├── tailwind.config.js          # Tailwind 配置（content / safelist / 字体）
├── postcss.config.js           # PostCSS（tailwindcss + autoprefixer）
└── vite.config.ts              # Vite 配置（端口 / 别名 @ / 分包）

🧩 数据模型

每个策略都是一个 Strategy 对象（见 types.ts）。前端根据 legs 在浏览器端计算盈亏曲线与情景表，因此图表与数据天然一致。

interface OptionLeg {
  type: 'Call' | 'Put';
  action: 'Buy' | 'Sell';
  strikeOffset: number;   // 行权价相对现价的倍数，如 1.10 = 高出现价 10%
  premiumRatio: number;   // 权利金占现价的比例，如 0.03 = 3%
  expiryLabel?: string;   // 可选：'近月' / '远月'（日历 / 对角价差）
}
interface Strategy {   id: string;             // kebab-case 唯一 ID，如 'bull-call-spread'   name: string;           // '中文名 (English Name)' 半角括号   category: StrategyCategory;   description: string;    // 一句话概述   setup: string;          // 构造方法   legs: OptionLeg[];      // 期权腿（可为空数组，如流程型 / 纯教学条目）   riskProfile: string;    // 风险收益特征   idealScenario: string;  // 理想使用场景   detailedAnalysis: {     explanation: string;  // 七章节 HTML 详解     pros: string[];       // 优势 2–4 条     cons: string[];       // 劣势 2–4 条   };
// —— 可选的小白友好 / 进阶字段（组件层按需渲染，缺省则不显示）——   plainSummary?: string;                                       // 一句话大白话（零术语）   analogy?: { emoji: string; title: string; text: string };   // 生活类比   pitfalls?: string[];                                        // 新手常见误区   quickJudge?: { use: string; avoid: string };                // 极简判断   greeks?: { delta: string; gamma: string; theta: string; vega: string }; // 希腊字母暴露   cryptoNote?: string;                                        // 加密期权 / 实盘提醒 }

➕ 新增与维护策略

在对应分类目录新建文件：src/strategies/<category>/<id>.ts，导出一个 Strategy 对象。
在该分类的 index.ts 中 import 并追加到导出数组（constants.ts 与顶层 index.ts 会自动聚合，无需改动）。
保持 id 唯一且为 kebab-case；name 使用 中文名 (English Name) 半角括号格式。
legs 的 strikeOffset 与 premiumRatio 取合理值，并确保 explanation 中的数值案例与 legs 推算出的盈亏曲线自洽。
detailedAnalysis.explanation 遵循统一七章节 HTML 模板：

1. 策略核心思想 · 2. 策略构造 · 3. 损益分析 · 4. 实战案例（含具体计算）· 5. 使用场景（✓/✗）· 6. 风险提示（含希腊字母）· 7. 专业建议

可选填充 plainSummary / analogy / pitfalls / quickJudge / greeks / cryptoNote 提升小白友好度。
本地预览，抽查桌面与移动端的图表、文案与样式。

更详细的写作规范与配色模板见仓库内 CLAUDE.md。

🌐 部署

托管于 Cloudflare Pages，主域名 option.red。
推送到 main 分支即触发 GitHub Actions 自动部署：npm ci → npm run build → wrangler 部署到 Cloudflare Pages（工作流见 .github/workflows/deploy.yml）。
旧域名 option.riba2534.cn 已 301 重定向至 option.red。