sub2api/frontend/src/views/docs/DocsView.vue

<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>