代理: 鉴权支持 Anthropic x-api-key 头

Claude Code / Anthropic SDK 用 x-api-key 头而不是 Authorization:
Bearer，缺失 Authorization 时回退读取 x-api-key，错误文案同步提示两种方式

Co-Authored-By: Claude <noreply@anthropic.com>

server/internal/api/router.go

@@ -34,7 +34,13 @@ func NewRouter(a *app.App, gw *proxy.Gateway) *gin.Engine {
 	// 静态资源（前端构建产物，存在时托管）
 	const dist = "web/dist"
 	if _, err := os.Stat(dist); err == nil {
-		r.Static("/assets", dist+"/assets")
+		// /assets 文件名含内容 hash，不可变：长缓存 + immutable，避免每次回源
+		assets := r.Group("/assets")
+		assets.Use(func(c *gin.Context) {
+			c.Header("Cache-Control", "public, max-age=31536000, immutable")
+			c.Next()
+		})
+		assets.Static("", dist+"/assets")
 		r.StaticFile("/favicon.svg", dist+"/favicon.svg")
 	}
 
@@ -48,6 +54,8 @@ func NewRouter(a *app.App, gw *proxy.Gateway) *gin.Engine {
 			return
 		}
 		if _, err := os.Stat(dist); err == nil {
+			// SPA 入口：必须每次回源校验，否则浏览器启发式缓存会保留引用已删除 chunk 的旧 HTML → 黑屏
+			c.Header("Cache-Control", "no-cache")
 			c.File(dist + "/index.html")
 			return
 		}

server/internal/proxy/gateway.go

@@ -135,8 +135,12 @@ func (g *Gateway) Auth(c *gin.Context) {
 	auth := c.GetHeader("Authorization")
 	key := strings.TrimPrefix(auth, "Bearer ")
 	key = strings.TrimSpace(key)
+	if key == "" {
+		// Anthropic 客户端（Claude Code / SDK）用 x-api-key 头而不是 Authorization
+		key = strings.TrimSpace(c.GetHeader("x-api-key"))
+	}
 	if !apikey.Valid(key) {
-		apiError(c, http.StatusUnauthorized, "invalid_api_key", "Invalid API key format. Expected: Bearer sk-...")
+		apiError(c, http.StatusUnauthorized, "invalid_api_key", "Invalid API key format. Expected: Authorization: Bearer sk-... or x-api-key: sk-...")
 		c.Abort()
 		return
 	}

web/src/components/ui/Input.vue

@@ -9,6 +9,7 @@ withDefaults(
     error?: string
     autocomplete?: string
     disabled?: boolean
+    maxlength?: number
   }>(),
   { type: 'text', modelValue: '', disabled: false },
 )
@@ -24,6 +25,7 @@ const emit = defineEmits<{ 'update:modelValue': [string | number] }>()
       :placeholder="placeholder"
       :autocomplete="autocomplete"
       :disabled="disabled"
+      :maxlength="maxlength"
       class="h-10 w-full rounded-md border border-edge2 bg-surface px-3 text-sm text-ink placeholder-muted outline-none transition focus:border-accent focus:ring-2 focus:ring-accent disabled:cursor-not-allowed disabled:opacity-50"
       :class="error && 'border-err focus:border-err focus:ring-err'"
       @input="emit('update:modelValue', ($event.target as HTMLInputElement).value as string | number)"

web/src/views/LandingView.vue

@@ -2,6 +2,10 @@
 import { useAuthStore } from '@/stores/auth'
 import ThemeToggle from '@/components/ui/ThemeToggle.vue'
 const auth = useAuthStore()
+
+// 调用演示用浏览器当前 host（兼容端点），避免写死域名
+const host = window.location.host
+const baseURL = `${window.location.origin}/v1`
 </script>
 
 <template>
@@ -70,11 +74,11 @@ const auth = useAuthStore()
           <div class="flex items-center gap-1.5 border-b border-edge px-4 py-2.5">
             <span class="size-2.5 rounded-full bg-surface2" />
             <span class="size-2.5 rounded-full bg-surface2" />
-            <span class="ml-2 text-muted">curl api.openteam.dev</span>
+            <span class="ml-2 text-muted">curl {{ host }}</span>
           </div>
           <div class="space-y-3 p-4 leading-relaxed">
             <div>
-              <p class="text-muted"><span class="text-accent">$</span> curl https://api.openteam.dev/v1/chat/completions</p>
+              <p class="text-muted"><span class="text-accent">$</span> curl {{ baseURL }}/chat/completions</p>
               <p class="text-muted">  -H <span class="text-accent">"Authorization: Bearer sk-..."</span> \</p>
               <p class="text-muted">  -d <span class="text-ink">'{"model": "claude-sonnet-5", "messages": [{"role": "user", "content": "你好"}]}'</span></p>
             </div>

web/src/views/admin/ChannelsView.vue

@@ -222,7 +222,7 @@ onMounted(load)
                   >{{ protocolShort(f) }}</code>
                 </div>
               </td>
-              <td class="px-4 py-2.5 font-mono text-xs text-muted">{{ ch.base_url }}</td>
+              <td class="max-w-[220px] truncate px-4 py-2.5 font-mono text-xs text-muted">{{ ch.base_url }}</td>
               <td class="px-4 py-2.5 font-mono text-xs text-muted">{{ ch.api_key_masked || '****' }}</td>
               <td class="px-4 py-2.5">
                 <Badge :variant="ch.health_status === 'healthy' ? 'ok' : ch.health_status === 'cooldown' ? 'err' : 'warn'">
@@ -288,13 +288,14 @@ onMounted(load)
           v-model="form.base_url"
           label="Base URL（可选）"
           placeholder="https://api.openai.com/v1"
+          :maxlength="255"
           hint="支持前缀或完整端点，如 https://api.openai.com/v1 或 https://api.openai.com/v1/chat/completions；留空按供应商默认"
         />
         <div class="space-y-3 rounded-md border border-edge p-3">
           <p class="text-xs font-medium text-muted">分协议 Base URL（可选，如智谱三种格式不同）</p>
-          <Input v-model="form.base_urls.chat" label="OpenAI Chat Completions" placeholder="留空用主 Base URL" />
-          <Input v-model="form.base_urls.responses" label="OpenAI Responses" placeholder="留空用主 Base URL" />
-          <Input v-model="form.base_urls.messages" label="Anthropic Messages" placeholder="留空用主 Base URL" />
+          <Input v-model="form.base_urls.chat" label="OpenAI Chat Completions" placeholder="留空用主 Base URL" :maxlength="255" />
+          <Input v-model="form.base_urls.responses" label="OpenAI Responses" placeholder="留空用主 Base URL" :maxlength="255" />
+          <Input v-model="form.base_urls.messages" label="Anthropic Messages" placeholder="留空用主 Base URL" :maxlength="255" />
           <p class="text-xs text-muted">网关按协议选对应 base_url 直通，无需为每种格式建多个渠道</p>
         </div>
         <Input

web/src/views/console/DashboardView.vue

@@ -3,7 +3,9 @@ import { onMounted, ref } from 'vue'
 import { http, errMsg } from '@/api/client'
 import { useToastStore } from '@/stores/toast'
 import { fmtMoney, fmtNum, fmtCost, fmtTime } from '@/lib/format'
+import { copyText } from '@/lib/clipboard'
 import Badge from '@/components/ui/Badge.vue'
+import Button from '@/components/ui/Button.vue'
 import Skeleton from '@/components/ui/Skeleton.vue'
 import TrendChart from '@/components/ui/TrendChart.vue'
 import type { UsageLog } from '@/types'
@@ -44,6 +46,24 @@ function daysAgo(n: number): string {
   return d.toISOString().slice(0, 10)
 }
 
+// 快速开始：Base URL 用浏览器当前 host（兼容端点），curl 示例
+const baseURL = `${window.location.origin}/v1`
+const curlCmd = `curl ${baseURL}/chat/completions \\
+  -H "Authorization: Bearer sk-xxxx" \\
+  -H "Content-Type: application/json" \\
+  -d '{"model":"gpt-test","stream":true,"messages":[{"role":"user","content":"hi"}]}'`
+const copied = ref('')
+
+async function copy(text: string, key: string) {
+  const ok = await copyText(text)
+  if (ok) {
+    copied.value = key
+    setTimeout(() => (copied.value = ''), 2000)
+  } else {
+    toast.err('复制失败，请手动复制')
+  }
+}
+
 onMounted(load)
 </script>
 
@@ -102,16 +122,18 @@ onMounted(load)
           </li>
         </ul>
         <ul v-else class="divide-y divide-edge">
-          <li v-for="l in logs" :key="l.id" class="flex items-center justify-between py-2">
-            <div class="min-w-0">
-              <p class="truncate font-mono text-xs text-ink">{{ l.model }}</p>
-              <p class="text-[11px] text-muted">{{ fmtTime(l.created_at) }}</p>
-            </div>
-            <div class="flex items-center gap-2">
-              <span class="mono-num text-xs text-muted">{{ l.input_tokens }}/{{ l.output_tokens }}</span>
-              <span class="mono-num w-16 text-right text-xs text-muted">{{ fmtCost(l.cost) }}</span>
-              <Badge :variant="l.status === 'success' ? 'ok' : l.status === 'canceled' ? 'neutral' : 'err'">{{ l.status }}</Badge>
+          <li v-for="l in logs" :key="l.id" class="py-2">
+            <div class="flex items-center justify-between gap-2">
+              <p class="min-w-0 truncate font-mono text-xs text-ink">{{ l.model }}</p>
+              <Badge class="shrink-0" :variant="l.status === 'success' ? 'ok' : l.status === 'canceled' ? 'neutral' : 'err'">{{ l.status }}</Badge>
             </div>
+            <p class="mt-0.5 flex flex-wrap items-center gap-x-2 text-[11px] text-muted">
+              <span class="mono-num">{{ l.input_tokens }}/{{ l.output_tokens }}</span>
+              <span class="opacity-40">·</span>
+              <span class="mono-num">{{ fmtCost(l.cost) }}</span>
+              <span class="opacity-40">·</span>
+              <span>{{ fmtTime(l.created_at) }}</span>
+            </p>
           </li>
           <li v-if="logs.length === 0" class="py-6 text-center text-xs text-muted">
             还没有请求记录，去
@@ -121,5 +143,44 @@ onMounted(load)
         </ul>
       </div>
     </div>
+
+    <!-- 快速开始 -->
+    <div class="card p-5">
+      <div class="mb-4">
+        <h2 class="text-sm font-semibold">快速开始</h2>
+        <p class="text-xs text-muted">通过兼容端点接入，OpenAI / Anthropic 协议自动转换</p>
+      </div>
+
+      <div class="space-y-4">
+        <div>
+          <p class="mb-1.5 text-[11px] font-medium text-muted">Base URL</p>
+          <div class="flex items-center gap-2">
+            <code class="min-w-0 flex-1 overflow-x-auto rounded-md border border-edge bg-surface px-3 py-2 font-mono text-xs whitespace-nowrap text-ink">{{ baseURL }}</code>
+            <Button size="sm" variant="ghost" class="shrink-0" @click="copy(baseURL, 'base')">
+              {{ copied === 'base' ? '已复制' : '复制' }}
+            </Button>
+          </div>
+        </div>
+
+        <div>
+          <p class="mb-1.5 text-[11px] font-medium text-muted">兼容</p>
+          <div class="flex flex-wrap gap-1.5">
+            <Badge variant="neutral">messages</Badge>
+            <Badge variant="neutral">chat/completions</Badge>
+            <Badge variant="neutral">responses</Badge>
+          </div>
+        </div>
+
+        <div>
+          <p class="mb-1.5 text-[11px] font-medium text-muted">curl 示例</p>
+          <div class="relative">
+            <pre class="overflow-x-auto rounded-md border border-edge bg-surface px-3 py-2.5 pr-20 font-mono text-[11px] leading-relaxed text-ink">{{ curlCmd }}</pre>
+            <Button size="sm" variant="ghost" class="absolute top-2 right-2" @click="copy(curlCmd, 'curl')">
+              {{ copied === 'curl' ? '已复制' : '复制' }}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>