多币种汇率换算工具

你是一位资深贸易公司财务，专门帮进出口商优化结汇时机。

为 {trader_name}（{trade_categories}）构建一个多币种汇率工具，支持 RM、USD、SGD、CNY、EUR、JPY、GBP 等。

## 角色与背景
- 用户是马来西亚进出口商，需要实时汇率换算、成本计算和汇率告警。

## 项目目标
- 提供一个一站式汇率工具，帮助用户把握结汇时机、计算进口成本、监控汇率波动。

## 目标用户
- {trader_name} 及其团队，从事 {trade_categories} 贸易。

## 核心体验与界面
- **即时换算**：输入金额，选择源币种和目标币种，显示换算结果及当前汇率（中间价、买入价、卖出价），与昨日对比涨跌百分比，支持收藏常用货币对。
- **汇率走势图**：默认显示 RM/USD 7天、30天、90天走势，支持任意币种对比，标记本月最高/最低/平均，可查看1年与3年历史。
- **进口成本计算器**：输入商品外币价格、数量、汇率、运费、保险、关税百分比、SST 6%，输出到岸成本（CIF）、含税成本、单件成本（RM），并模拟汇率上升/下降5%/10%对成本的影响。
- **汇率告警**：设定目标汇率（如 USD/MYR < 4.30），触发邮件或 WhatsApp 通知，支持低于、高于、区间三种条件。
- **个人换算历史**：记录每次换算，提供月度汇总（总换算金额、平均汇率、节省/多付金额）。

## 主要工作流程
1. 用户进入即时换算页面，输入金额和币种，系统调用汇率 API 并缓存结果。
2. 用户可查看走势图，选择时间范围和币种对。
3. 用户使用进口成本计算器，输入各项成本，系统计算并展示敏感性分析。
4. 用户设置告警条件，系统在满足条件时发送通知。
5. 用户可查看历史记录和月度汇总。

## 业务规则
- 汇率缓存1小时，避免 API 超额。
- 显示数据时间戳与来源。
- 周末显示“市场休市”提示。
- 货币格式：RM 写在金额前（如 RM 100），其他货币写在金额后（如 100 USD）。

## 设计方向
- 简洁、专业、数据可视化，适合贸易公司使用。

## 构建方式
- 使用 Next.js + TypeScript，Tailwind CSS + shadcn/ui 组件库。
- 集成汇率 API（如 exchangerate-api 或 Open Exchange Rates 免费层）。
- 使用 Supabase 缓存历史汇率和用户偏好。
- 使用 recharts 绘制走势图。
- 连接 WhatsApp 或邮件服务用于告警通知。
- 首先生成实现计划，优先实现即时换算和走势图，然后逐步添加其他功能。使用真实示例数据，确保可运行和测试。

## 构建顺序（请严格遵守）
请按以下顺序开发，让我尽早在屏幕上看到成果，不要长时间没有画面：
1. 先做界面：用接近真实的示例数据，把所有页面做出来（暂时不接数据库），让我能马上看到、能点击。做完先停下来，等我确认。
2. 再做功能：我确认界面后，才让按钮、表单和计算真正可用（继续用示例数据）。
3. 再接 Supabase：功能都正常后，才连接 Supabase 保存真实数据和登录（如需要）。
4. 最后上线：先确保在我电脑上运行正常，再把代码上传到 GitHub，经我同意后部署到 Vercel。
请保持简单——我是非技术背景的老板。有不清楚或需要决定的事，先问我，不要自己假设。