diff --git a/frontend/src/views/landing/LandingView.vue b/frontend/src/views/landing/LandingView.vue index 0097e336..eef5eb6d 100644 --- a/frontend/src/views/landing/LandingView.vue +++ b/frontend/src/views/landing/LandingView.vue @@ -113,6 +113,74 @@ + + +
+
+
快速接入
+

把 base_url 一改，就能用

+

兼容 OpenAI / Anthropic / Gemini SDK，零代码改动

+
+
+
+
~/.codex/config.toml
+ 
[model_providers.OpenAI]
+base_url = "https://ai.puro.im"
+wire_api = "responses"
+requires_openai_auth = true
+
+
+
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
+
+ + +
+
+
用量透明
+

每条请求都看得见

+

不像第三方 API 池子那种"扣了多少不告诉你"——扣哪个账号、跑哪个模型、用了多少 tokens、上游响应几秒，一目了然。

+
+
+
+ Dashboard · 预览 +
+
+
+
+
今日请求
1,842
+12.3%
+
输入 Tokens
2.1M
+8.1%
+
输出 Tokens
485K
+15.6%
+
今日费用
$1.23
-4.2%
+
+
+
近 30 天用量趋势
+ + + + +
+ + + + + + + + + + +
时间模型上游状态用量
12:34:07gpt-5.4ChatGPT #12002,341
12:34:02claude-opus-4-7Claude #22005,102
12:33:58gemini-2.5-proGemini #1200843
12:33:41gpt-5.4ChatGPT #2429—
+
+
+
@@ -233,4 +301,84 @@ .feature h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; } .feature p { color: var(--text-2); font-size: 14px; line-height: 1.6; } .feature code { color: var(--cyan); font-size: 13px; } + +/* code demo */ +.code-demo { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 16px; +} +@media (max-width: 820px) { .code-demo { grid-template-columns: 1fr; } } +.code-block { + border: 1px solid var(--border); + border-radius: var(--r-lg); + background: var(--bg-code); + overflow: hidden; +} +.code-title { + padding: 10px 16px; + background: var(--bg-1); + font-size: 11px; + color: var(--text-3); + border-bottom: 1px solid var(--border); +} +.code-block pre { + padding: 16px; + font-size: 13px; + line-height: 1.6; + color: var(--text-1); + overflow-x: auto; +} +.cm { color: var(--text-3); } +.str { color: var(--cyan); } +.kw { color: var(--amber); } +.code-foot { + margin-top: 20px; + text-align: center; + font-size: 12px; + color: var(--text-3); + font-family: var(--font-mono); +} + +/* dash mockup */ +.dash-mock { + border: 1px solid var(--border); + border-radius: var(--r-xl); + background: var(--bg-1); + overflow: hidden; + box-shadow: 0 40px 80px -40px rgba(0,0,0,0.8); +} +.dash-header { + padding: 12px 16px; + border-bottom: 1px solid var(--border); + display: flex; + align-items: center; + justify-content: space-between; +} +.dash-title { font-size: 12px; color: var(--text-2); font-family: var(--font-mono); } +.dash-dots { display: flex; gap: 6px; } +.dash-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--border-2); } +.dash-body { padding: 20px; } +.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; } +@media (max-width: 720px) { .stat-row { grid-template-columns: repeat(2, 1fr); } } +.stat { + padding: 14px; + border: 1px solid var(--border); + border-radius: var(--r-md); + background: rgba(15,23,42,0.6); +} +.stat-label { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; } +.stat-value { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-family: var(--font-mono); } +.stat-delta { font-size: 11px; color: var(--green); margin-top: 4px; font-family: var(--font-mono); } +.stat-delta.down { color: var(--red); } + +.chart-card { + border: 1px solid var(--border); + border-radius: var(--r-md); + background: rgba(15,23,42,0.6); + padding: 16px; + margin-bottom: 20px; +} +.chart-title { font-size: 12px; color: var(--text-2); margin-bottom: 12px; } +.chart-svg { width: 100%; height: 120px; display: block; }