显示优化

client/src/pages/Docs.jsx

@@ -1,13 +1,24 @@
+import { useState, useEffect } from 'react';
 import { Book, Globe, MessageSquare, Shield, Zap, Lightbulb, Code2 } from 'lucide-react';
 import CodeBlock from '../components/CodeBlock';
 import { cn } from '../lib/utils';
 
 export default function Docs() {
+    // 动态获取基础 URL
+    const [baseUrl, setBaseUrl] = useState('');
+
+    useEffect(() => {
+        // 获取当前访问的协议、域名/IP 和端口
+        const protocol = window.location.protocol; // http: 或 https:
+        const host = window.location.host; // 包含域名/IP 和端口
+        setBaseUrl(`${protocol}//${host}`);
+    }, []);
+
     return (
         <div className="space-y-8 max-w-4xl mx-auto pb-12">
             <div>
                 <h2 className="text-2xl font-semibold text-zinc-900 mb-2 tracking-tight">API 文档</h2>
-                <p className="text-zinc-500">Antigravity API 提供与 OpenAI 兼容的接口，可无缝对接现有应用。</p>
+                <p className="text-zinc-500">Antigravity API 提供与 OpenAI 兼容的接口,可无缝对接现有应用。</p>
             </div>
 
             {/* Base URL */}
@@ -16,7 +27,7 @@ export default function Docs() {
                     <Globe className="w-5 h-5 text-zinc-900" />
                     基础 URL
                 </h3>
-                <CodeBlock code="http://localhost:8045" />
+                <CodeBlock code={baseUrl || 'Loading...'} />
             </div>
 
             {/* Endpoints */}
@@ -26,7 +37,7 @@ export default function Docs() {
                     path="/v1/models"
                     title="获取模型列表"
                     desc="获取所有可用的 AI 模型列表。"
-                    req={`curl http://localhost:8045/v1/models \\
+                    req={`curl ${baseUrl}/v1/models \\
   -H "Authorization: Bearer YOUR_API_KEY"`}
                     res={`{
   "object": "list",
@@ -45,8 +56,8 @@ export default function Docs() {
                     method="POST"
                     path="/v1/chat/completions"
                     title="聊天补全"
-                    desc="创建聊天对话补全，支持流式和非流式响应。"
-                    req={`curl http://localhost:8045/v1/chat/completions \\
+                    desc="创建聊天对话补全,支持流式和非流式响应。"
+                    req={`curl ${baseUrl}/v1/chat/completions \\
   -H "Content-Type: application/json" \\
   -H "Authorization: Bearer YOUR_API_KEY" \\
   -d '{
@@ -70,7 +81,7 @@ data: [DONE]`}
                         认证方式
                     </h3>
                     <p className="text-zinc-600 text-sm mb-4 leading-relaxed">
-                        所有 API 请求都需要在请求头中包含有效的 API 密钥：
+                        所有 API 请求都需要在请求头中包含有效的 API 密钥:
                     </p>
                     <CodeBlock code="Authorization: Bearer YOUR_API_KEY" />
                 </div>
@@ -81,7 +92,7 @@ data: [DONE]`}
                         频率限制
                     </h3>
                     <p className="text-zinc-600 text-sm mb-4 leading-relaxed">
-                        当请求超过频率限制时，API 会返回 429 状态码。响应头包含限制详情：
+                        当请求超过频率限制时,API 会返回 429 状态码。响应头包含限制详情:
                     </p>
                     <ul className="text-sm text-zinc-500 space-y-2 list-disc list-inside marker:text-zinc-300">
                         <li><code className="bg-zinc-100 px-1.5 py-0.5 rounded text-zinc-700 border border-zinc-200">X-RateLimit-Limit</code>: 最大请求数</li>