diff --git a/.gitignore b/.gitignore index 1a92ea3e..2173b7ea 100644 --- a/.gitignore +++ b/.gitignore @@ -129,6 +129,8 @@ vite.config.js docs/* !docs/PAYMENT.md !docs/PAYMENT_CN.md +!docs/superpowers/ +.superpowers/ .serena/ .codex/ frontend/coverage/ diff --git a/docs/superpowers/specs/2026-04-19-puro-ai-landing-auth-design.md b/docs/superpowers/specs/2026-04-19-puro-ai-landing-auth-design.md new file mode 100644 index 00000000..6e5e6916 --- /dev/null +++ b/docs/superpowers/specs/2026-04-19-puro-ai-landing-auth-design.md @@ -0,0 +1,348 @@ +# PURO AI · Landing + Auth 重设计 + +> 2026-04-19 · 分支 `feat/design-landing-auth` + +本文档是「PURO AI 公开页面重设计」的设计 spec： +- **Stage 1（已完成 – brainstorm）**：信息架构 + 中文文案 + 风格方向 + 布局选型 +- **Stage 2（待执行 – user）**：拿本文档去 https://claude.ai/design 产出高保真视觉稿 +- **Stage 3（待执行 – Claude Code）**：把视觉稿翻译成 Vue 3 组件，对齐 Tailwind / router / i18n +- **Stage 4（待执行 – CI）**：merge → Drone CI → ai.puro.im 实机验证 + +--- + +## 1. 项目背景 + +| 项 | 值 | +|---|---| +| **公开品牌名** | **PURO AI** | +| **内部代码名** | sub2api（Wei-Shaw/sub2api fork，不改） | +| **域名** | https://ai.puro.im | +| **现状** | 登录后是 Vue 3 + Tailwind 后台；无公开首页；登录页用浅色 `AuthLayout` | +| **目标受众** | 个人开发者 / 小团队 — 已有 ChatGPT Plus / Claude Pro / Codex / Gemini 订阅，想程序化调用而不付 API 费率 | +| **核心叙事** | "你的 AI 订阅，已经付过钱了"——把已付订阅复用为 API | + +--- + +## 2. 风格方向 + +**暗黑科技**（Dark Tech）—— 对标 Linear / Vercel / Railway / Supabase / Cloudflare Workers。 + +### 配色（建议） +| 角色 | 色值 | 用途 | +|---|---|---| +| 主底 | `#0a0e1a` ~ `#0f172a` | 页面背景，slate-950 区间 | +| 卡片底 | `#0f172a` | 表单卡片、特性卡 | +| 边框 | `#334155` | 次要边框 | +| 主文 | `#f8fafc` | 标题 | +| 副文 | `#94a3b8` ~ `#cbd5e1` | 描述、菜单 | +| **主品牌色** | `#22d3ee`（cyan-400） | Logo、CTA、链接 | +| **辅品牌色** | `#a855f7`（purple-500） | 渐变叠加、装饰光晕 | +| 警示 | `#fbbf24`（amber-400） | "💡"标签、数字对比 | + +### 视觉语汇 +- 暗底上**圆形 radial gradient 光晕**（青/紫双色） +- 等宽字体（ui-monospace / SF Mono）用于 code demo +- 主体字体：sans-serif（Inter / SF Pro / 系统默认） +- 边框 1px 实线 / 关键分割用 dashed +- CTA 圆角 8px；卡片圆角 12px +- 不要拟物、不要软阴影、不要 Bootstrap 4 那种 gradient 按钮 + +### 排版氛围 +- 大量留白 +- 标题大、字距稍紧（letter-spacing -0.02em） +- 内容居中收敛（max-width ~1100px） + +--- + +## 3. Landing 页（路由 `/`，未登录态） + +### 3.1 信息架构 + +``` +NAV · ⬢ PURO AI · 产品 · 文档 · [登录][免费试用] +① HERO · 主标 + 副标 + CTA×2 + 微文案 +② 模型墙 · 4 个支持的 AI 平台（Claude / ChatGPT / Codex / Gemini） +③ 三特性 · ⚡ 一个 key 多模型 · 🔄 账号池高可用 · 📊 用量看板 +④ Code Demo · codex config 片段 + curl 示例 +⑤ Dashboard · 真实截图 + 文案 +⑥ Footer · 4 列（品牌 / 产品 / 资源 / 联系） +``` + +### 3.2 完整中文文案 + +#### NAV +- Logo: `⬢ PURO AI` +- 菜单: 产品 · 文档 · 定价（暂隐） +- 右侧: `[登录]` `[免费试用 →]` + +#### ① HERO +- **主标**: 你的 AI 订阅，**已经付过钱了。** +- **副标**: Claude Pro · ChatGPT Plus · Codex · Gemini 订阅
聚合成统一 API，零改动接入 OpenAI / Anthropic SDK +- **CTA**: `立即开始 →` `查看文档` +- **微文案**: 无需信用卡 · 用你已有的订阅 · 5 分钟跑通 + +#### ② 模型墙 +- **小标题**: 支持的 AI 平台 +- **副标**: 通过 OAuth 直接复用你的订阅，无需申请官方 API key +- **Logos**: + - ⚪ Claude Pro / Max + - 🟢 ChatGPT Plus / Pro + - 🟡 Codex CLI + - 🔵 Gemini Code Assist + - ⚫ 更多（规划中，灰显） + +#### ③ 三大特性 +| 图标 | 标题 | 描述 | +|---|---|---| +| ⚡ | 一个 key 接所有模型 | 不再为每个 provider 申请 API key、配置 base_url。统一 sk- 走 Claude / GPT / Gemini，按 model 自动路由到对应账号池。| +| 🔄 | 账号池高可用 | 多账号自动调度。某个 ChatGPT Plus 触发限流，自动 failover 到下一个。重启、刷新 token 全自动。| +| 📊 | 用量看板 | 每条请求的 tokens、费用、上游账号、延迟全可视化。模型分布饼图 + 趋势曲线 + Top 排行。| + +#### ④ Code Demo +- **标题**: 把 base_url 一改，就能用 +- **副**: 兼容 OpenAI / Anthropic / Gemini SDK，**零代码改动** +- **代码块**: + ```toml + # Codex CLI + # ~/.codex/config.toml + [model_providers.OpenAI] + base_url = "https://ai.puro.im" + wire_api = "responses" + ``` + ```bash + # 或直接 curl + $ curl https://ai.puro.im/responses \ + -H "Authorization: Bearer sk-xxx" \ + -d '{"model":"gpt-5.4","input":"hello"}' + ``` +- **底注**: 支持 OpenAI Responses API · Anthropic Messages API · Gemini generateContent · 流式 SSE & WebSocket + +#### ⑤ Dashboard +- **标题**: 每条请求都看得见 +- **副**: 不像第三方 API 池子那种"扣了多少不告诉你"。你能看到每次调用：扣了哪个账号、跑了哪个模型、用了多少 tokens、花了多少钱、上游响应几秒。 +- **图**: 截图占位 → 实施时取 ai.puro.im 实拍（模型分布饼图 + Token 趋势 + Top 模型 + 性能指标） + +#### ⑥ Footer +| 列 | 内容 | +|---|---| +| 品牌 | ⬢ PURO AI
Self-hosted on puro.im
© 2026 puro.im · MIT License
fork of Wei-Shaw/sub2api | +| 产品 | 文档 · 套餐（暂隐）· 更新日志 | +| 资源 | GitHub · API 状态 · Codex 配置示例 | +| 联系 | admin@puro.im · git.puro.im | + +--- + +## 4. Auth 页（登录 / 注册） + +### 4.1 布局选型：左右分栏 + +``` +┌─────────────────────────┬─────────────────────┐ +│ 左：品牌叙事区 │ 右：表单区 │ +│ - Logo │ - 标题（登录/注册） │ +│ - 主标语（5→1 对比） │ - 副标 │ +│ - 副文（双卖点排比） │ - email / password │ +│ - 装饰光晕 cyan/purple │ - CTA │ +│ - 底栏小字（支持平台） │ - 切换链接 │ +└─────────────────────────┴─────────────────────┘ +``` + +移动端：左侧叙事降级为顶部小 banner 或完全隐藏，单列表单。 + +### 4.2 左侧叙事文案 + +- **Logo**: `⬢ PURO AI` +- **主标语**: + > **5** 个订阅
+ > → **1** 个 key + + 数字 `5` 用 amber/orange 强调；`1` 用主品牌色 cyan 强调。 +- **副文**（三句排比）: + > 省去切换账号的繁琐，
+ > 省去为多个高昂订阅重复买单。
+ > PURO（纯粹）—— 让 AI 调用回归本质。 +- **底栏小字**: `Claude · ChatGPT · Codex · Gemini` + +### 4.3 右侧表单 + +#### 登录页（`/login`） +- 标题: 登录 +- 副: 用你的 PURO AI 账户继续 +- 字段: + - 📧 邮箱（input, type=email, required） + - 🔒 密码（input, type=password, required, 带眼睛切换显示） +- 选项: + - 忘记密码？（router-link） + - Turnstile captcha（条件显示） +- CTA: `登录 →` +- 分隔: `或` +- OAuth 按钮（条件显示）: + - 使用 LinuxDO 登录 + - 使用 OIDC 登录 +- 底部链接: 没有账户？**注册** + +#### 注册页（`/register`） +- 标题: 创建账户 +- 副: 5 分钟开始用 PURO AI +- 字段: + - 📧 邮箱 + - 🔒 密码 + - 🔒 确认密码 + - （可选）邮箱验证码（条件显示，配置 `email_verify_required` 时） +- Turnstile captcha（条件） +- CTA: `创建账户 →` +- 底部链接: 已有账户？**登录** + +#### 其他保留页（不重设计本期） +- `/forgot-password` +- `/reset-password` +- `/verify-email` +- OAuth 回调页 + +--- + +## 5. 给 claude.ai/design 的 brief（Stage 2 输入） + +复制下方文字到 https://claude.ai/design： + +```` +我要做两个网页设计，请帮我生成高保真 HTML/React 视觉稿。 + +## 品牌 +名字：PURO AI（拉丁语「纯粹」） +Logo：六边形 ⬢ + 文字 +域名：ai.puro.im +定位：把多个 AI 订阅（Claude Pro / ChatGPT Plus / Codex / Gemini）聚合成统一 API +核心叙事：你的 AI 订阅，已经付过钱了 + +## 风格 +暗黑科技风，对标 Linear / Vercel / Railway。 +配色： +- 主底 #0a0e1a / #0f172a（slate-950 区间） +- 主品牌色 #22d3ee（cyan-400） +- 辅品牌色 #a855f7（purple-500） +- 强调色 #fbbf24（amber-400，仅用于数字对比） +- 主文 #f8fafc，副文 #94a3b8 ~ #cbd5e1 +- 卡片/表单底 #0f172a，边框 #334155 + +视觉元素： +- 暗底上 radial gradient 光晕（青/紫双色，60% 透明度，blur） +- 大量留白，max-width 1100px +- 圆角：CTA 8px，卡片 12px +- 字体：Inter 或 SF Pro（sans-serif），代码用 ui-monospace +- 不要拟物、不要软阴影、不要 gradient 按钮 + +## 页面 1：Landing（路由 /，未登录） +6 个 section + 顶部 nav，全部中文。 + +NAV +- 左：⬢ PURO AI +- 中：产品、文档（定价灰显） +- 右：[登录]（边框）[免费试用 →]（cyan 实底） + +① HERO（居中，垂直 padding 大） +主标：你的 AI 订阅，**已经付过钱了。** +（"已经付过钱了" 用 cyan 高亮） +副标：Claude Pro · ChatGPT Plus · Codex · Gemini 订阅 +聚合成统一 API，零改动接入 OpenAI / Anthropic SDK +CTA：[立即开始 →][查看文档] +微文案（小灰字）：无需信用卡 · 用你已有的订阅 · 5 分钟跑通 + +② 模型墙 +小标题：支持的 AI 平台 +副：通过 OAuth 直接复用你的订阅，无需申请官方 API key +横排 5 个 logo 卡片：Claude Pro/Max · ChatGPT Plus/Pro · Codex CLI · Gemini Code Assist · 更多（灰显） + +③ 三特性（3 列卡片） +卡片 1：⚡ 一个 key 接所有模型 / 不再为每个 provider 申请 API key、配置 base_url。统一 sk- 走 Claude / GPT / Gemini，按 model 自动路由到对应账号池。 +卡片 2：🔄 账号池高可用 / 多账号自动调度。某个 ChatGPT Plus 触发限流，自动 failover 到下一个。重启、刷新 token 全自动。 +卡片 3：📊 用量看板 / 每条请求的 tokens、费用、上游账号、延迟全可视化。模型分布饼图 + 趋势曲线 + Top 排行。 + +④ Code Demo +标题：把 base_url 一改，就能用 +副：兼容 OpenAI / Anthropic / Gemini SDK，零代码改动 +代码块（深色 terminal 配色，syntax highlight）： +- 上方一段 toml（codex config） +- 下方一段 bash（curl 示例） +底注小字：支持 OpenAI Responses API · Anthropic Messages API · Gemini generateContent · 流式 SSE & WebSocket + +⑤ Dashboard +标题：每条请求都看得见 +副：不像第三方 API 池子那种"扣了多少不告诉你"。你能看到每次调用：扣了哪个账号、跑了哪个模型、用了多少 tokens、花了多少钱、上游响应几秒。 +图：dashboard 截图占位（深色饼图 + 折线图 + 表格） + +⑥ Footer +4 列： +- 品牌列：⬢ PURO AI / Self-hosted on puro.im / © 2026 puro.im · MIT / fork of Wei-Shaw/sub2api +- 产品列：文档 · 套餐（暂隐）· 更新日志 +- 资源列：GitHub · API 状态 · Codex 配置示例 +- 联系列：admin@puro.im · git.puro.im + +## 页面 2：登录页（路由 /login） +左右分栏，桌面端 50/50 分。 + +左侧（叙事区）： +- 顶部 Logo：⬢ PURO AI +- 中部主标：5 个订阅 → 1 个 key + （5 用 amber #fbbf24 强调，1 用 cyan #22d3ee 强调，字号 36-48px，weight 800） +- 主标下副文（三句排比）： + 省去切换账号的繁琐， + 省去为多个高昂订阅重复买单。 + PURO（纯粹）—— 让 AI 调用回归本质。 +- 底部小字：Claude · ChatGPT · Codex · Gemini +- 背景：linear-gradient(135deg, #0a0e1a, #1e1b4b) + 角落 radial gradient 光晕（cyan + purple） + +右侧（表单区）： +- 标题：登录 +- 副：用你的 PURO AI 账户继续 +- 邮箱输入（带 📧 icon） +- 密码输入（带 🔒 icon + 眼睛切换显示） +- 行：忘记密码？（右对齐链接） +- 主 CTA：登录 →（cyan 实底） +- 分隔：—— 或 —— +- OAuth 按钮：使用 LinuxDO 登录（边框样式） +- 底部：没有账户？注册（链接） + +移动端：左侧叙事区收为顶部小 banner（只保留 Logo + 短主标），表单全宽。 + +## 页面 3：注册页（路由 /register） +和登录页同布局，右侧表单字段： +- 标题：创建账户 / 副：5 分钟开始用 PURO AI +- 邮箱、密码、确认密码 +- 主 CTA：创建账户 → +- 底部：已有账户？登录 + +请生成完整可预览的 HTML（含 inline CSS）或 React 组件。 +```` + +--- + +## 6. Stage 3 实施约束（给未来的我看） + +技术栈（不改动）: +- Vue 3.4+ Composition API + TypeScript +- Tailwind CSS（已配 dark mode、`primary-*` 色板） +- Vite 5 +- Vue Router 4 / Pinia / vue-i18n +- 现有组件库（`@/components/common`、`@/components/layout/AuthLayout`） + +实施要点: +1. **Landing 页是新页**：新建 `frontend/src/views/landing/HomeView.vue`；改 `router/index.ts`，未登录访问 `/` 显示 landing，已登录跳 `/dashboard` +2. **Auth 页改造**：改 `frontend/src/components/layout/AuthLayout.vue` 为左右分栏；改 `LoginView.vue` / `RegisterView.vue` 适配新 layout，**保留所有现有逻辑**（OAuth、Turnstile、2FA、表单校验） +3. **i18n**：新文案进 `frontend/src/i18n/locales/zh.ts`；本期只补中文（默认语言），英文 key 留空 / 复用现有 +4. **Tailwind 配色**：如果新色值不在 `tailwind.config` 里，按需扩展 `colors.brand` / `colors.accent` +5. **Dashboard 截图**：实施时手动截 ai.puro.im 后台 → 放 `frontend/public/landing/dashboard.png` +6. **不动的**：Setup Wizard / 后台所有页面 / API 层 / store + +--- + +## 7. 验收标准 + +- [ ] 未登录访问 https://ai.puro.im/ → 看到 PURO AI Landing 页 +- [ ] 已登录访问 https://ai.puro.im/ → 跳到 /dashboard（保持现有行为） +- [ ] Landing 6 个 section 内容全部呈现，移动端可堆叠 +- [ ] /login 是左右分栏布局，文案与 spec 一致 +- [ ] /register 同上 +- [ ] 所有现有 auth 功能（OAuth、Turnstile、2FA、密码重置）仍可用 +- [ ] 后台所有页面（dashboard、账号管理、API key 等）外观不变 +- [ ] CI 构建通过，部署后 ai.puro.im 加载正常