# ArtArk 国际版 Early Access 交互原型

前台和后台按最新《国际版ArtArk Waitinglist MVP PRD.md》及本次登录分流要求调整。落地页直接复用项目根目录的 `English.png` 作为视觉底图，以保留全部文字、价格、素材、排版及原按钮名称；`前台/landing.js` 在原热点位置叠加可访问的 HTML 按钮。唯一新增可见入口为首屏顶部红框对应位置的 `Get Early Access`。后台沿用现有技术蓝风格，并将主获客归因与五大分享入口分别展示。

## 打开方式

在项目根目录执行：

```sh
python3 原型/preview.py
```

打开 `http://127.0.0.1:8765/`。也可以双击 `原型/启动预览.command`；如端口被占用，使用 `python3 原型/preview.py --port 8766`，并相应修改浏览器地址。

请从同一浏览器、同一地址和端口打开全部页面，确保前后台共享本地数据。直接使用 `file://` 打开时，各浏览器对 localStorage 的隔离行为不同，因此推荐使用预览服务器。

## 页面与入口

| 页面              | 文件                     | 可验收功能                                                                                                                                                                     |
| ----------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 演示目录          | `index.html`             | 前后台入口、四种状态账号、有效官方码入口、好友链接、逐个模拟有效邀请、重置本地样例数据                                                                                         |
| 英文官网 | `前台/index.html` | English.png 全页原画面；唯一 Get Early Access 入口；Create now、套餐及其他原热点统一经过登录/权限分流，保留原名称 |
| Early Access 活动 | `前台/early-access.html` | 注册、官方码自动回填/预校验、好友横幅、老用户回访、邮箱待验证、Standard/Priority 排队、X/WhatsApp/Telegram/LinkedIn/Email 五大渠道分享弹窗、核销、资格与激活、工作台和首作事件 |
| 本地邮箱          | `前台/inbox.html`        | 邮件按收件人过滤、状态、正文与动态变量、验证/排队/资格邮件 CTA；未送达和测试邮件限制账户操作                                                                                   |
| 运营后台          | `后台/index.html`        | Overview、Waitlist & Users、Invite Codes、Access Releases、Email & Rules                                                                                                       |
| 共享状态          | `shared/store.js`        | localStorage 持久化、跨标签页更新、状态机、业务规则、种子数据与事件记录                                                                                                        |

## 前台验收路径

1. **登录及权限分流**：Create now 或其他原热点 → 图1样式的 Welcome to ArtArk 弹窗 → 输入邮箱并勾选演示用人机验证 → Continue with email。未申请过的邮箱进入 Early Access 并自动预填邮箱；已申请但未获权用户进入待验证或排队状态；已获权且未过期的 Invited 用户直接激活，Activated 用户直接进入现有产品预览，不增加密码、验证码等页面。Google / Apple 按钮保留参考图外观，本地原型点击后聚焦邮箱输入，不接 OAuth。
2. **普通排队**：官网唯一 Get Early Access → 填写邮箱和角色 → 提交后显示 Pending Verification → 打开预览收件箱 → 点击 Verify My Email → 获得真实队列名次和专属 `?ref=` 链接。验证前不占队列、不计有效邀请。
3. **官方邀请直通**：从演示目录打开有效官方码链接 → 自动回填 `?code=` → 注册 → 邮箱验证 → Invited → Enter ArtArk Now → Activated，按该码的批次额度一次性到账。默认样例有效码为 `ARK-9X2K-7M1P`，使用后应改用后台新生成的码。
4. **老用户核销**：打开已验证的 Standard/Priority 账号 → Enter Code Here → 输入有效官方码 → 直接变为 Invited，无需再次验证邮箱。
5. **无效码转排队**：带已使用、过期、停用或不存在的码访问 → 提示原因和清空入口 → 清空后普通注册；保留已知官方批次的来源归因。
6. **好友邀请闭环**：排队页 Copy Link 直接复制完整邀请链接；Share & Invite Friends 打开深色分享弹窗，文案在弹窗内编辑，提供 Copy Link、Copy Message 和 X / WhatsApp / Telegram / LinkedIn / Email。关闭再打开保留本次页面会话文案，刷新恢复默认。好友 `?ref=` 链接展示受邀横幅，新邮箱验证并通过去重与防刷后计一次邀请，满 3 人升级 Priority；点击、复制、发起分享不计邀请。
7. **渠道与分享卡**：各渠道保留相同 `ref`，分别设置 UTM；Email 使用 `utm_medium=email`，复制使用 `referral`，其他使用 `social_share`，统一 `utm_campaign=waitlist_invite`。LinkedIn 仅预填链接、成功复制后才提示粘贴文案；Email 只唤起本机草稿并保留复制回退。X 超出 280 加权字符时提示缩短，其他渠道仍可使用。初始 HTML 包含 OG / Twitter Card；预览服务器按请求输出保留 ref/UTM 的 og:url，文本链接不依赖预览成功。
8. **后台放行后再次登录**：普通申请 → 邮箱验证 → 后台搜索该邮箱、Grant Access → 退出前台 → 官网原 Create now → 输入同一排队邮箱 → 直接进入现有产品预览并发放排队档 Initial Credits，重复登录不重复发放。产品预览沿用原有激活/首作演示，不新增产品功能。

## 后台验收路径

| 模块           | 操作与规则                                                                                                                                                                                              |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 数据看板       | Today/This week/This month/All time；8 项核心指标、增长图、漏斗；四个主获客分组及投放平台子行、五大分享渠道/Copy Link/Unknown 明细与主归因筛选、渠道汇总及邀请明细导出、KOL/批次转化与成本/CAC 编辑、裂变里程碑/队列比较/榜单排序/用户详情；CSV 导出                                                   |
| 用户           | 邮箱/社交/码搜索、角色/状态/来源筛选、分页、清空筛选、勾选与批量操作；单用户详情含验证、来源、邀请码、推荐人、积分、激活/首作及推荐树；Standard 升 Priority，Standard/Priority 手动放行                 |
| 积分和资格规则 | 官方码与排队放行分别设置默认积分；可配置资格天数、过期提醒提前小时；配置只影响后续新批次/新放行，已承诺额度保留；单次码批次和单次放行可覆写额度                                                         |
| 邀请码批次     | 批次名、来源、KOL/活动、费用、1–1000 个单次码、UTC 过期、初始积分；生成同时派生一对一链接并导出 PRD 规定的 7 个 CSV 字段；筛选、批次详情、码/链接复制、停用未用码、单码启停、延期、未激活提醒           |
| 放行           | 配额/积分、Priority 优先、Standard 角色优先、推荐人数与验证时间排序、是否通知；实时展示实际选中人数、层级和样例名单；确认后生成波次；历史有放行名单、送达/失败/激活，失败可重试且不重复授权或发积分     |
| 邮件           | 五套必需模板；开关、即时/延迟、标题/正文/CTA、动态变量插入、实时品牌预览、官方/排队积分切换、恢复默认、保存、测试收件人、本地送达日志；验证邮件强制启用且即时，防止运营配置阻断注册；可主动运行到期扫描 |

## 关键边界

- 邮箱 trim + 转小写去重，角色枚举必填，社交资料可填 handle 或链接，最多 255 字符。
- 验证链接有效 24 小时，重发冷却 45 秒，重发使旧链接失效；重复验证不重复排队或计邀请。
- 官方码大小写不敏感，注册预留后即为 Used，单码/从属链接共享状态；只在验证后授予使用资格。
- 同浏览器模拟同 IP：1 分钟累计 5 次无效码尝试后锁定 15 分钟，仍可清空码普通排队。
- `ref` 及其分享参数成组保留 7 天，注册前采用最近有效好友链接；无效链接不覆盖有效记录。提交后锁定到账号，验证不依赖当前页面参数。官方码批次主归因优先，同时保留已有好友关系；相同邮箱或自我推荐不累计。
- 拦截 mailinator、10minutemail、tempmail 等一次性邮箱域名；同 IP、同推荐人在 24 小时内第 6 个及之后验证账号照常入队，但冻结其对邀请人的有效计数并标记异常。
- 队列先 Priority，Priority 按升级时间及推荐数；Standard 按有效推荐数与验证时间。未验证、已获资格或已激活账号不进入待放行队列。不承诺固定前进名次。
- 资格过期不能激活，积分不发放。重复激活不重复到账；已领取过排队积分再输入官方码会被拦截，不消耗新码。
- 支持 0 积分；邮件变量和资格展示均保持实际配置。所有数值输入校验整数、范围和负数。
- 实际预览选人少于配额时，只放行真实符合条件的人数；同一账号不会重复进入放行批次。
- 5/10 人推荐里程碑仅统计，不兑现第二阶段奖励。

## 已完成验证

- `tests/store.test.cjs`：34 组独立状态机场景，覆盖注册、验证、一次性邮箱、单次码、官方与排队积分、归因、三人升级、防刷、延期、批量放行、失败补发、模板延迟/开关/变量、过期及积分幂等。
- 本次浏览器实测：原 Create now → 参考登录弹窗 → 新邮箱进入申请 → 本地邮箱验证 → 排队 → 五大渠道弹窗 → X 超限拦截及复制 → 后台搜索并放行 → 退出后用原排队邮箱登录 → 直接进入产品、200 积分首次到账；主获客总览和分享渠道明细可切换。其他状态机边界由现有及新增测试覆盖。
- 代码：JavaScript 语法检查、静态链接及素材路径检查；桌面及移动视口检查。

运行状态机验证：

```sh
node 原型/tests/store.test.cjs
```

## 原型与真实上线的分界

本次交付是前后台原型，不是已部署的生产系统。业务规则在浏览器中运行，前后台数据在同源 localStorage 中共享。样例数据是虚构的；目录页可恢复初始数据。

真实邮箱服务及 SPF/DKIM/DMARC、服务端登录鉴权、持久数据库事务与并发锁、真实 IP 和 Turnstile、后端定时任务、主产品授权/积分接口与 Webhook、海外 CDN 及性能/送达率指标均需正式接入。当前邮件投递、IP、防刷、资格、积分和首作回调用于本地演示，不能作为生产安全控制。部署后必须把静态 OG 元数据中的域名改为实际站点，并把 PNG 发布到对应公开地址，才能让外部社交爬虫抓取；本机地址不支持外部平台预览。登录界面中的 Google / Apple 与人机验证为本地交互占位，不执行真实 OAuth 或 Turnstile。官网价格、品牌和全部正文保留 English.png 原样。

落地页采用原图底图与语义热点层，不将图片内容改写为新的文案或价格；原热点按本次要求统一进入登录或 Early Access 分流，不额外实现套餐购买、内容切换、素材上传或 FAQ 展开。活动页与后台为实际 HTML/JavaScript 控件。交付或移动目录时须一并保留项目根目录的 English.png。第二阶段的作品挑战审核、产品内额外营销弹窗、5/10/20 人奖励没有扩展进当前范围。