docs: PURO AI landing+auth redesign spec [CI SKIP]

Stage 1 brainstorm 产出： - 风格方向：暗黑科技（cyan/purple on slate-950） - Landing 6 sections + 完整中文文案 - Auth 左右分栏 + "5→1" 数字对比叙事 - 给 claude.ai/design 的 brief（可直接复制） - Stage 3 实施约束（Vue 3 + Tailwind + i18n 对齐）下一步：user 拿 brief 到 claude.ai/design 出视觉稿（Stage 2）。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-19 16:23:20 +08:00
parent ac3417a964
commit 332d46cde7
2 changed files with 350 additions and 0 deletions
--- 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
@@ -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 订阅<br>聚合成统一 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<br>Self-hosted on puro.im<br>© 2026 puro.im · MIT License<br>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** 个订阅<br>
+  > → **1** 个 key
+  
+  数字 `5` 用 amber/orange 强调；`1` 用主品牌色 cyan 强调。
+- **副文**（三句排比）:
+  > 省去切换账号的繁琐，<br>
+  > 省去为多个高昂订阅重复买单。<br>
+  > <small style="color:#64748b">PURO（纯粹）—— 让 AI 调用回归本质。</small>
+- **底栏小字**: `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 加载正常