---
layout: home

hero:
  name: XCodeCLI
  text: AI CLI 配置工具
  tagline: 一键配置 Claude Code / Gemini CLI / Codex 连接到 XCodeCLI API
  actions:
    - theme: brand
      text: 快速开始
      link: /guide/

features:
  - icon: 🚀
    title: 一键配置
    details: 运行一条命令，自动检测 API 端点并写入配置文件
  - icon: 🔧
    title: 跨平台支持
    details: 支持 macOS、Linux、Windows，提供 Bash 和 PowerShell 脚本
  - icon: 🔒
    title: 安全备份
    details: 自动备份现有配置，支持回滚
---

<script setup>
import { ref } from 'vue'

const activeTab = ref('bash')
const copied = ref(false)

const commands = {
  bash: `API_KEY='你的密钥' bash -c "$(curl -fsSL https://gitea.sususu.cf/sususu/xcodecli-shells/raw/branch/main/setup.sh)"`,
  powershell: `$key='你的密钥'; iwr -useb https://gitea.sususu.cf/sususu/xcodecli-shells/raw/branch/main/setup.ps1 | iex`
}

function copyCommand() {
  navigator.clipboard.writeText(commands[activeTab.value])
  copied.value = true
  setTimeout(() => copied.value = false, 2000)
}
</script>

<div class="quick-install">
  <h2>⚡ 一键安装配置</h2>
  <p class="desc">运行一条命令，自动安装并配置 Claude Code、Gemini CLI、Codex</p>

<div class="install-card">
<div class="tabs">
<button :class="{ active: activeTab === 'bash' }" @click="activeTab = 'bash'">
<span class="icon">🍎/🐧</span> macOS / Linux
</button>
<button :class="{ active: activeTab === 'powershell' }" @click="activeTab = 'powershell'">
<span class="icon">🪟</span> Windows
</button>
</div>

<div class="code-block-wrapper">
<div class="code-block">
<code>{{ commands[activeTab] }}</code>
</div>
<button class="copy-btn" @click="copyCommand" :class="{ copied: copied }">
{{ copied ? '已复制' : '复制命令' }}
</button>
</div>
</div>

  <p class="tip">💡 提示：将命令中的 <code>你的密钥</code> 替换为你的实际 API 密钥</p>
</div>

<style>
.quick-install {
  margin: 0 auto 4rem;
  padding: 0 1rem;
  text-align: center;
}
.quick-install h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  border-top: none;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.quick-install .desc {
  margin: 0 auto 2rem;
  color: var(--vp-c-text-2);
  font-size: 1.1rem;
  max-width: 600px;
}

.install-card {
  max-width: 780px;
  margin: 0 auto;
  background: var(--vp-c-bg-soft);
  border: 1px solid var(--vp-c-divider);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
}

.tabs {
  display: flex;
  background: var(--vp-c-bg-mute);
  border-bottom: 1px solid var(--vp-c-divider);
}
.tabs button {
  flex: 1;
  padding: 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--vp-c-text-2);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.tabs button:hover {
  color: var(--vp-c-text-1);
  background-color: var(--vp-c-bg-soft);
}
.tabs button.active {
  color: var(--vp-c-brand);
  background: var(--vp-c-bg-soft);
  box-shadow: inset 0 -2px 0 var(--vp-c-brand);
}

.code-block-wrapper {
  position: relative;
  padding: 1.5rem;
  text-align: left;
  display: flex;
  gap: 1rem;
  align-items: center;
}

.code-block {
  flex: 1;
  font-family: var(--vp-font-family-mono);
  font-size: 0.9rem;
  color: var(--vp-c-text-1);
  overflow-x: auto;
  white-space: pre;
  padding-right: 0.5rem;
  /* Hide scrollbar for cleaner look */
  scrollbar-width: thin;
}
.code-block::-webkit-scrollbar {
  height: 6px;
}
.code-block::-webkit-scrollbar-thumb {
  background-color: var(--vp-c-divider);
  border-radius: 3px;
}

.copy-btn {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
  background: var(--vp-c-bg);
  color: var(--vp-c-text-1);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.copy-btn:hover {
  border-color: var(--vp-c-brand);
  color: var(--vp-c-brand);
}
.copy-btn.copied {
  border-color: var(--vp-c-green);
  color: var(--vp-c-green);
  background-color: var(--vp-c-bg-mute);
}

.tip {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--vp-c-text-2);
}
.tip code {
  color: var(--vp-c-brand);
  background-color: var(--vp-c-bg-mute);
  padding: 0.2em 0.4em;
  border-radius: 4px;
}
</style>

## 支持的工具

| 工具        | 配置位置                  | 配置格式 |
| ----------- | ------------------------- | -------- |
| Claude Code | `~/.claude/settings.json` | JSON     |
| Gemini CLI  | `~/.gemini/.env`          | ENV      |
| Codex       | `~/.codex/config.toml`    | TOML     |

## API 端点

脚本会自动测试以下端点，选择第一个可用的：

- `https://api2.xcodecli.com` (主要)
- `https://api.xcodecli.com` (备用)