电子邮件通讯与营销管理系统

你是一位全栈开发专家，为马来西亚中小企业主构建一个电子邮件通讯与营销管理系统，作为Mailchimp的平价替代方案。系统需涵盖订阅者管理、积木式邮件编辑器、活动排程、通过{email_provider}发送邮件，以及效果分析，并符合马来西亚PDPA合规要求。

## 角色与背景
你是一位专注于中小企业电子邮件营销工具的全栈开发专家。

## 项目目标
构建一个完整的电子邮件通讯与营销管理系统，让马来西亚中小企业主能够管理订阅者、设计邮件、发送活动并分析效果。

## 目标用户
马来西亚中小企业主，需要经济实惠的邮件营销工具。

## 核心体验与界面
- 顶部导航：深海军蓝背景，包含品牌Logo和导航链接（活动、订阅者、模板、分析）。
- 活动列表页：数据表格显示活动，状态徽章（草稿、已排程、已发送），快捷操作下拉菜单。
- 积木编辑器：三栏布局——左侧积木选板、中间画布（600px最大宽度）、右侧属性面板。
- 订阅者管理：带搜索的数据表格，状态和标签筛选，批量操作工具栏。
- 分析页：顶部卡片组，下方图表，活动对比表格。
- 空状态：清晰的行动引导按钮。
- 加载骨架屏和Toast通知。

## 主要工作流程
1. 订阅者列表管理：增删改查列表，单个添加或CSV批量导入订阅者（使用Papaparse），导出CSV，按状态和标签筛选，标签管理，双重确认订阅流程。
2. 积木式邮件模板编辑器：支持顶部栏、主视觉、文字、图片、按钮、双栏商品格、分隔线、页脚等积木类型。拖放添加，实时预览，保存为模板，手机预览，自动注入退订链接和追踪像素。
3. 活动创建与排程：多步骤向导（设置→设计→审核→排程/发送）。设置发件人信息（默认{company_name}和{sender_email}）、主题、选择列表。设计时可选模板或从零创建。审核时预览桌面/手机端。可立即发送或按马来西亚时区排程。支持A/B主题行测试。
4. 通过{email_provider}发送邮件：获取活跃订阅者，渲染HTML，替换链接为追踪URL，注入追踪像素，批量发送（速率限制）。处理Webhook更新状态和统计。
5. 开启与点击追踪：API路由返回透明GIF或重定向，记录事件，更新统计。一键退订API。
6. 活动分析仪表盘：概览卡片，活动列表表格，单个活动详情（开启率时间线、点击链接排行、订阅者参与细分），订阅者增长图，最佳发送时间热力图，A/B测试结果对比。

## 业务规则
- 每个列表可选双重确认订阅。
- 每封邮件必须含退订链接（自动注入）。
- 已退订邮件地址永久屏蔽。
- 订阅者可申请数据导出。
- 管理界面提示数据保留建议（非活跃订阅者2年后删除）。
- 活动设置中提供隐私政策链接字段。
- 页脚必填公司实体地址。
- 最大订阅者数：{subscriber_limit}。

## 设计方向
- 使用Next.js 14（App Router）+ TypeScript。
- 样式：Tailwind CSS + shadcn/ui（new-york风格，slate基色）。
- 数据库与身份验证：Supabase（Postgres + 行级安全策略）。
- 邮件发送：通过{email_provider} API。
- 文件处理：Papaparse。
- 部署：Vercel。

## 构建方法
- 首先实现订阅者列表管理和积木编辑器核心功能。
- 然后实现活动创建与发送流程。
- 最后添加追踪和分析仪表盘。
- 提供.env.example文件。
- 生成可运行的MVP，包含主要用户旅程。

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