feat(docs): public DocsView with Codex/Claude Code/curl quickstart
Route /docs (no auth). Six sections: get key, codex CLI, claude code, curl, supported models, feedback. Uses puro.css design system. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
mini
@@ -120,6 +120,15 @@ const routes: RouteRecordRaw[] = [
|
||||
title: 'Key Usage',
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/docs',
|
||||
name: 'Docs',
|
||||
component: () => import('@/views/docs/DocsView.vue'),
|
||||
meta: {
|
||||
requiresAuth: false,
|
||||
title: 'PURO AI · 文档'
|
||||
}
|
||||
},
|
||||
|
||||
// ==================== User Routes ====================
|
||||
{
|
||||
|
||||
213
frontend/src/views/docs/DocsView.vue
Normal file
213
frontend/src/views/docs/DocsView.vue
Normal file
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<div class="puro-page">
|
||||
<div class="bg-glow soft"></div>
|
||||
|
||||
<nav class="nav">
|
||||
<div class="container nav-inner">
|
||||
<router-link to="/" class="brand"><span class="hex">⬢</span><span>PURO AI</span></router-link>
|
||||
<div class="nav-links">
|
||||
<router-link to="/">首页</router-link>
|
||||
<a href="#codex">Codex</a>
|
||||
<a href="#claude-code">Claude Code</a>
|
||||
<a href="#curl">curl</a>
|
||||
</div>
|
||||
<div class="nav-cta">
|
||||
<router-link to="/login" class="btn btn-primary">登录 →</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="docs-hero container">
|
||||
<h1>快速接入 PURO AI</h1>
|
||||
<p class="subtitle">三步走：拿 key → 配 base_url → 发请求</p>
|
||||
</section>
|
||||
|
||||
<div class="container docs-body">
|
||||
<section id="get-key" class="docs-section">
|
||||
<h2>1. 获取 API key</h2>
|
||||
<p>当前 PURO AI 不开放自助注册付费。联系管理员获取：</p>
|
||||
<div class="callout">
|
||||
<a href="mailto:admin@puro.im">admin@puro.im</a>
|
||||
</div>
|
||||
<p class="note">未来通过 iShare 入口开放订阅购买。</p>
|
||||
</section>
|
||||
|
||||
<section id="codex" class="docs-section">
|
||||
<h2>2. Codex CLI 接入</h2>
|
||||
<p>修改 <code class="mono">~/.codex/config.toml</code>：</p>
|
||||
<pre class="mono"><code>model_provider = <span class="str">"OpenAI"</span>
|
||||
model = <span class="str">"gpt-5.4"</span>
|
||||
wire_api = <span class="str">"responses"</span>
|
||||
|
||||
[model_providers.OpenAI]
|
||||
name = <span class="str">"OpenAI"</span>
|
||||
base_url = <span class="str">"https://ai.puro.im"</span>
|
||||
wire_api = <span class="str">"responses"</span>
|
||||
requires_openai_auth = <span class="kw">true</span></code></pre>
|
||||
<p>然后 <code class="mono">~/.codex/auth.json</code>：</p>
|
||||
<pre class="mono"><code>{
|
||||
<span class="str">"OPENAI_API_KEY"</span>: <span class="str">"sk-xxxxxxxxxxxxxxxx"</span>
|
||||
}</code></pre>
|
||||
<p>验证：</p>
|
||||
<pre class="mono"><code><span class="cm">$</span> codex exec --sandbox read-only <span class="str">"say hi"</span></code></pre>
|
||||
</section>
|
||||
|
||||
<section id="claude-code" class="docs-section">
|
||||
<h2>3. Claude Code 接入</h2>
|
||||
<p>修改 <code class="mono">~/.claude/settings.json</code>：</p>
|
||||
<pre class="mono"><code>{
|
||||
<span class="str">"base_url"</span>: <span class="str">"https://ai.puro.im"</span>,
|
||||
<span class="str">"api_key"</span>: <span class="str">"sk-xxxxxxxxxxxxxxxx"</span>
|
||||
}</code></pre>
|
||||
<p class="note">Claude Code 通过 <code class="mono">/v1/messages</code> endpoint 调用 Anthropic 兼容 API。</p>
|
||||
</section>
|
||||
|
||||
<section id="curl" class="docs-section">
|
||||
<h2>4. curl 直连测试</h2>
|
||||
<p>OpenAI Responses API：</p>
|
||||
<pre class="mono"><code><span class="cm">$</span> curl https://ai.puro.im/responses \
|
||||
-H <span class="str">"Authorization: Bearer sk-xxx"</span> \
|
||||
-H <span class="str">"Content-Type: application/json"</span> \
|
||||
-d <span class="str">'{"model":"gpt-5.4","input":"hello"}'</span></code></pre>
|
||||
<p>Anthropic Messages API：</p>
|
||||
<pre class="mono"><code><span class="cm">$</span> curl https://ai.puro.im/v1/messages \
|
||||
-H <span class="str">"Authorization: Bearer sk-xxx"</span> \
|
||||
-H <span class="str">"Content-Type: application/json"</span> \
|
||||
-H <span class="str">"anthropic-version: 2023-06-01"</span> \
|
||||
-d <span class="str">'{"model":"claude-opus-4-7","max_tokens":100,"messages":[{"role":"user","content":"hi"}]}'</span></code></pre>
|
||||
</section>
|
||||
|
||||
<section id="models" class="docs-section">
|
||||
<h2>5. 支持的模型</h2>
|
||||
<ul class="model-list">
|
||||
<li><code class="mono">gpt-5.4</code> · OpenAI（via ChatGPT Plus / Codex OAuth）</li>
|
||||
<li><code class="mono">gpt-5.4-codex</code> · OpenAI Codex 专用</li>
|
||||
<li><code class="mono">claude-opus-4-7</code> · Anthropic（via Claude Pro / Max OAuth）</li>
|
||||
<li><code class="mono">claude-sonnet-4-6</code> · Anthropic</li>
|
||||
<li><code class="mono">gemini-2.5-pro</code> · Google（via Code Assist OAuth）</li>
|
||||
<li><code class="mono">gemini-2.5-flash</code> · Google</li>
|
||||
</ul>
|
||||
<p class="note">后端 pricing 表实时跟进 <code class="mono">model-price-repo</code>，完整清单登录后在 <router-link to="/dashboard">控制台</router-link> 查看。</p>
|
||||
</section>
|
||||
|
||||
<section id="feedback" class="docs-section">
|
||||
<h2>6. 问题反馈</h2>
|
||||
<p>遇到问题或希望补接某个平台：</p>
|
||||
<div class="callout">
|
||||
<a href="mailto:admin@puro.im">admin@puro.im</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// DocsView — public quickstart documentation
|
||||
// Route: /docs (no auth required)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* =============================================================
|
||||
* DocsView — component-local styles
|
||||
* Globals from puro.css (scoped to .puro-page) provide:
|
||||
* - .nav, .nav-inner, .brand, .hex, .nav-links, .nav-cta (nav base)
|
||||
* - .mono, .btn, .btn-primary, .container (primitives)
|
||||
* ============================================================= */
|
||||
|
||||
.puro-page {
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.docs-hero {
|
||||
padding: 80px 24px 40px;
|
||||
text-align: center;
|
||||
}
|
||||
.docs-hero h1 {
|
||||
font-size: clamp(32px, 4vw, 48px);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.03em;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.docs-hero .subtitle {
|
||||
color: var(--text-2);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.docs-body { padding-bottom: 80px; }
|
||||
.docs-section {
|
||||
margin: 48px 0;
|
||||
scroll-margin-top: 80px;
|
||||
}
|
||||
.docs-section h2 {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 14px;
|
||||
color: var(--text-0);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.docs-section p {
|
||||
color: var(--text-1);
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
margin: 12px 0;
|
||||
}
|
||||
.docs-section .note {
|
||||
color: var(--text-3);
|
||||
font-size: 13px;
|
||||
}
|
||||
.docs-section code.mono {
|
||||
background: var(--bg-1);
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--r-sm);
|
||||
font-size: 13px;
|
||||
color: var(--cyan);
|
||||
}
|
||||
.docs-section pre.mono {
|
||||
background: var(--bg-code);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-md);
|
||||
padding: 16px;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: var(--text-1);
|
||||
overflow-x: auto;
|
||||
margin: 12px 0;
|
||||
}
|
||||
.docs-section pre .str { color: var(--cyan); }
|
||||
.docs-section pre .kw { color: var(--amber); }
|
||||
.docs-section pre .cm { color: var(--text-3); }
|
||||
|
||||
.callout {
|
||||
padding: 16px 20px;
|
||||
background: var(--bg-1);
|
||||
border: 1px solid var(--border-2);
|
||||
border-left: 3px solid var(--cyan);
|
||||
border-radius: var(--r-md);
|
||||
margin: 12px 0;
|
||||
}
|
||||
.callout a {
|
||||
color: var(--cyan);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.model-list { list-style: none; padding: 0; }
|
||||
.model-list li {
|
||||
padding: 8px 0;
|
||||
color: var(--text-1);
|
||||
font-size: 14px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
}
|
||||
.model-list li:last-child { border-bottom: none; }
|
||||
|
||||
/* container override (puro.css has 1100px/32px; we want narrower for docs readability) */
|
||||
.container {
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user