feat: Claude Code quick setup — dashboard card, model aliases & README

Add one-click env var configuration for Claude Code in the web dashboard
with model selector (opus/sonnet/haiku) and copy-all button. Map Claude
model names to Codex models in aliases config.

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

README.md

@@ -154,6 +154,28 @@ curl http://localhost:8080/v1/chat/completions \
 
 ## 🔗 客户端接入 (Client Setup)
 
+### Claude Code
+
+在终端设置环境变量，即可让 Claude Code 通过 codex-proxy 使用 Codex 模型：
+
+```bash
+export ANTHROPIC_BASE_URL=http://localhost:8080
+export ANTHROPIC_API_KEY=your-api-key
+export ANTHROPIC_MODEL=claude-opus-4-6     # Opus → gpt-5.3-codex（默认）
+# export ANTHROPIC_MODEL=claude-sonnet-4-6   # Sonnet → gpt-5.2-codex
+# export ANTHROPIC_MODEL=claude-haiku-4-5-20251001  # Haiku → gpt-5.1-codex-mini
+
+claude   # 启动 Claude Code
+```
+
+| Claude Code 模型 | 映射到 Codex 模型 |
+|------------------|------------------|
+| Opus (`claude-opus-4-6`) | `gpt-5.3-codex` |
+| Sonnet (`claude-sonnet-4-6`) | `gpt-5.2-codex` |
+| Haiku (`claude-haiku-4-5-20251001`) | `gpt-5.1-codex-mini` |
+
+> 也可以在控制面板 (`http://localhost:8080`) 的 **Claude Code Quick Setup** 卡片中一键复制环境变量。
+
 ### Cursor
 
 Settings → Models → OpenAI API Base:

config/models.yaml

@@ -74,3 +74,10 @@ aliases:
   codex: "gpt-5.3-codex"
   codex-max: "gpt-5.1-codex-max"
   codex-mini: "gpt-5.1-codex-mini"
+  # Claude Code model aliases
+  claude-opus-4-6: "gpt-5.3-codex"
+  claude-sonnet-4-6: "gpt-5.2-codex"
+  claude-haiku-4-5-20251001: "gpt-5.1-codex-mini"
+  opus: "gpt-5.3-codex"
+  sonnet: "gpt-5.2-codex"
+  haiku: "gpt-5.1-codex-mini"

web/src/App.tsx

@@ -4,6 +4,7 @@ import { Header } from "./components/Header";
 import { AccountList } from "./components/AccountList";
 import { AddAccount } from "./components/AddAccount";
 import { ApiConfig } from "./components/ApiConfig";
+import { ClaudeCodeSetup } from "./components/ClaudeCodeSetup";
 import { CodeExamples } from "./components/CodeExamples";
 import { Footer } from "./components/Footer";
 import { useAccounts } from "./hooks/use-accounts";
@@ -36,6 +37,9 @@ function Dashboard() {
             selectedModel={status.selectedModel}
             onModelChange={status.setSelectedModel}
           />
+          <ClaudeCodeSetup
+            apiKey={status.apiKey}
+          />
           <CodeExamples
             baseUrl={status.baseUrl}
             apiKey={status.apiKey}

web/src/components/ClaudeCodeSetup.tsx

@@ -0,0 +1,93 @@
+import { useState, useCallback, useMemo } from "preact/hooks";
+import { useT } from "../i18n/context";
+import { CopyButton } from "./CopyButton";
+
+type ClaudeModel = "opus" | "sonnet" | "haiku";
+
+const CLAUDE_MODELS: { id: ClaudeModel; label: string; desc: string }[] = [
+  { id: "opus", label: "Opus", desc: "gpt-5.3-codex" },
+  { id: "sonnet", label: "Sonnet", desc: "gpt-5.2-codex" },
+  { id: "haiku", label: "Haiku", desc: "gpt-5.1-codex-mini" },
+];
+
+interface ClaudeCodeSetupProps {
+  apiKey: string;
+}
+
+export function ClaudeCodeSetup({ apiKey }: ClaudeCodeSetupProps) {
+  const t = useT();
+  const [model, setModel] = useState<ClaudeModel>("opus");
+
+  const origin = typeof window !== "undefined" ? window.location.origin : "http://localhost:8080";
+
+  const envLines = useMemo(() => ({
+    ANTHROPIC_BASE_URL: origin,
+    ANTHROPIC_API_KEY: apiKey,
+    ANTHROPIC_MODEL: `claude-${model}-4-${model === "haiku" ? "5-20251001" : "6"}`,
+  }), [origin, apiKey, model]);
+
+  const allEnvText = useMemo(
+    () => Object.entries(envLines).map(([k, v]) => `${k}=${v}`).join("\n"),
+    [envLines],
+  );
+
+  const getAllEnv = useCallback(() => allEnvText, [allEnvText]);
+  const getBaseUrl = useCallback(() => envLines.ANTHROPIC_BASE_URL, [envLines]);
+  const getApiKey = useCallback(() => envLines.ANTHROPIC_API_KEY, [envLines]);
+  const getModel = useCallback(() => envLines.ANTHROPIC_MODEL, [envLines]);
+
+  const activeBtn = "px-3 py-1.5 text-xs font-semibold rounded bg-white dark:bg-[#21262d] text-slate-800 dark:text-text-main shadow-sm border border-transparent dark:border-border-dark transition-all";
+  const inactiveBtn = "px-3 py-1.5 text-xs font-medium rounded text-slate-500 dark:text-text-dim hover:text-slate-700 dark:hover:text-text-main hover:bg-white/50 dark:hover:bg-[#21262d] border border-transparent transition-all";
+
+  return (
+    <section class="bg-white dark:bg-card-dark border border-gray-200 dark:border-border-dark rounded-xl p-5 shadow-sm transition-colors">
+      <div class="flex items-center justify-between mb-6 border-b border-slate-100 dark:border-border-dark pb-4">
+        <div class="flex items-center gap-2">
+          <svg class="size-5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z" />
+          </svg>
+          <h2 class="text-[0.95rem] font-bold">{t("claudeCodeSetup")}</h2>
+        </div>
+        <div class="flex gap-2 p-1 bg-slate-100 dark:bg-bg-dark dark:border dark:border-border-dark rounded-lg">
+          {CLAUDE_MODELS.map((m) => (
+            <button
+              key={m.id}
+              onClick={() => setModel(m.id)}
+              class={model === m.id ? activeBtn : inactiveBtn}
+            >
+              {m.label}
+              <span class="ml-1 text-[0.65rem] opacity-60">({m.desc})</span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Env vars */}
+      <div class="space-y-3">
+        {(["ANTHROPIC_BASE_URL", "ANTHROPIC_API_KEY", "ANTHROPIC_MODEL"] as const).map((key) => {
+          const getter = key === "ANTHROPIC_BASE_URL" ? getBaseUrl : key === "ANTHROPIC_API_KEY" ? getApiKey : getModel;
+          return (
+            <div key={key} class="flex items-center gap-3">
+              <label class="text-xs font-mono font-semibold text-slate-600 dark:text-text-dim w-44 shrink-0">{key}</label>
+              <div class="relative flex items-center flex-1">
+                <input
+                  class="w-full pl-3 pr-10 py-2 bg-slate-100 dark:bg-bg-dark border border-gray-200 dark:border-border-dark rounded-lg text-[0.78rem] font-mono text-slate-500 dark:text-text-dim outline-none cursor-default select-all"
+                  type="text"
+                  value={envLines[key]}
+                  readOnly
+                />
+                <CopyButton getText={getter} class="absolute right-2" />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Copy all button */}
+      <div class="mt-5 flex items-center gap-3">
+        <CopyButton getText={getAllEnv} variant="label" />
+        <span class="text-xs text-slate-400 dark:text-text-dim">{t("claudeCodeCopyAllHint")}</span>
+      </div>
+    </section>
+  );
+}

web/src/i18n/translations.ts

@@ -32,6 +32,8 @@ export const translations = {
       "Use this key to authenticate requests to the proxy. Do not share it.",
     copyUrl: "Copy URL",
     copyApiKey: "Copy API Key",
+    claudeCodeSetup: "Claude Code Quick Setup",
+    claudeCodeCopyAllHint: "Copy all env vars — paste into terminal or .env file",
     integrationExamples: "Integration Examples",
     copy: "Copy",
     addStep1:
@@ -87,6 +89,8 @@ export const translations = {
       "\u4f7f\u7528\u6b64\u5bc6\u94a5\u5411\u4ee3\u7406\u53d1\u9001\u8ba4\u8bc1\u8bf7\u6c42\uff0c\u8bf7\u52ff\u6cc4\u9732\u3002",
     copyUrl: "\u590d\u5236 URL",
     copyApiKey: "\u590d\u5236 API \u5bc6\u94a5",
+    claudeCodeSetup: "Claude Code \u5feb\u901f\u914d\u7f6e",
+    claudeCodeCopyAllHint: "\u590d\u5236\u6240\u6709\u73af\u5883\u53d8\u91cf \u2014 \u7c98\u8d34\u5230\u7ec8\u7aef\u6216 .env \u6587\u4ef6",
     integrationExamples: "\u96c6\u6210\u793a\u4f8b",
     copy: "\u590d\u5236",
     addStep1: