feat: 首页添加 API 端点一览卡片，修复模板转义错误

- 在首页 hero 下方添加 GPT/Claude/Gemini 三个 API 端点卡片
- 使用 String.raw 修复 PowerShell 命令中 \xc 无效转义序列
- 开发服务器端口改为 9527

docs/index.md

@@ -33,7 +33,7 @@ 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='你的密钥'; $f="$env:TEMP\xc.ps1";iwr -useb https://gitea.sususu.cf/sususu/xcodecli-shells/raw/branch/main/setup.ps1 -OutFile $f;& $f`
+  powershell: String.raw`$key='你的密钥'; $f="$env:TEMP\xc.ps1";iwr -useb https://gitea.sususu.cf/sususu/xcodecli-shells/raw/branch/main/setup.ps1 -OutFile $f;& $f`
 }
 
 function copyCommand() {
@@ -43,6 +43,25 @@ function copyCommand() {
 }
 </script>
 
+<div class="api-endpoints-banner">
+  <h2>API 端点一览</h2>
+  <p class="banner-desc">根据模型系列选择对应的 API 端点</p>
+  <div class="endpoint-grid">
+    <div class="endpoint-card gpt">
+      <span class="endpoint-label">GPT 系列</span>
+      <code>https://api.xcodecli.com/v1/responses</code>
+    </div>
+    <div class="endpoint-card claude">
+      <span class="endpoint-label">Claude 系列</span>
+      <code>https://api.xcodecli.com/v1/messages</code>
+    </div>
+    <div class="endpoint-card gemini">
+      <span class="endpoint-label">Gemini 系列</span>
+      <code>https://api.xcodecli.com/v1beta</code>
+    </div>
+  </div>
+</div>
+
 <div class="setup-section">
 
 ## 1. CLI 工具一键配置
@@ -106,19 +125,20 @@ Cherry Studio 支持所有模型，但注意 **ccmax 分组的 Claude 模型不
 <p class="desc">XCodeCLI 提供多个 API 分组，适用于不同的使用场景。</p>
 
 ::: warning 🔑 分组区别
+
 - **cc2api 分组（推荐）**：提供 Claude 系列模型，无客户端限制，可自由搭配各种客户端
 - **ccmax 分组**：提供 Claude 系列模型，但**只能用于 Claude Code**
-:::
+  :::
 
 ### cc2api — 推荐使用
 
 cc2api 分组包含 **Claude 系列模型**，无客户端限制。推荐搭配以下工具：
 
-| 客户端 | 类型 | 说明 |
-| :--- | :--- | :--- |
-| **[OpenCode](https://opencode.ai/)** | 终端 AI 编码代理 | 开源，支持 75+ LLM 供应商，可作为 Claude Code 的替代方案。支持终端、桌面端和 IDE 插件 |
-| **[OpenClaw](https://openclaw.ai/)** | 个人 AI 助手 | 开源，连接 WhatsApp / Telegram / Slack 等消息平台，支持浏览器自动化、邮件、日历等操作 |
-| **[Cherry Studio](https://www.cherry-ai.com/)** | 可视化对话客户端 | 支持多服务商集成，详见 [配置教程](/cherry-studio-nanobana) |
+| 客户端                                          | 类型             | 说明                                                                                  |
+| :---------------------------------------------- | :--------------- | :------------------------------------------------------------------------------------ |
+| **[OpenCode](https://opencode.ai/)**            | 终端 AI 编码代理 | 开源，支持 75+ LLM 供应商，可作为 Claude Code 的替代方案。支持终端、桌面端和 IDE 插件 |
+| **[OpenClaw](https://openclaw.ai/)**            | 个人 AI 助手     | 开源，连接 WhatsApp / Telegram / Slack 等消息平台，支持浏览器自动化、邮件、日历等操作 |
+| **[Cherry Studio](https://www.cherry-ai.com/)** | 可视化对话客户端 | 支持多服务商集成，详见 [配置教程](/cherry-studio-nanobana)                            |
 
 ::: tip 💡 GPT 系列模型
 GPT 系列模型推荐使用 `v1/responses` 端点以获得最佳效果。
@@ -152,6 +172,94 @@ ccmax 分组同样提供 Claude 系列模型，但**只能**用于 Claude Code
 </div>
 
 <style>
+/* API Endpoints Banner */
+.api-endpoints-banner {
+  margin: 2rem auto 0;
+  max-width: 960px;
+  padding: 2rem 1.5rem;
+  text-align: center;
+}
+
+.api-endpoints-banner h2 {
+  font-size: 2rem;
+  font-weight: 800;
+  margin-bottom: 0.5rem;
+  border-top: none;
+}
+
+.banner-desc {
+  color: var(--vp-c-text-2);
+  font-size: 1.1rem;
+  margin-bottom: 1.5rem;
+}
+
+.endpoint-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+
+@media (max-width: 768px) {
+  .endpoint-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.endpoint-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1.5rem 1rem;
+  border-radius: 12px;
+  border: 2px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-soft);
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.endpoint-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+}
+
+.endpoint-card.gpt {
+  border-color: #10a37f;
+}
+
+.endpoint-card.claude {
+  border-color: #d97706;
+}
+
+.endpoint-card.gemini {
+  border-color: #4285f4;
+}
+
+.endpoint-label {
+  font-size: 1.1rem;
+  font-weight: 700;
+}
+
+.endpoint-card.gpt .endpoint-label {
+  color: #10a37f;
+}
+
+.endpoint-card.claude .endpoint-label {
+  color: #d97706;
+}
+
+.endpoint-card.gemini .endpoint-label {
+  color: #4285f4;
+}
+
+.endpoint-card code {
+  font-size: 0.82rem;
+  color: var(--vp-c-text-1);
+  background: var(--vp-c-bg-mute);
+  padding: 0.4em 0.8em;
+  border-radius: 6px;
+  word-break: break-all;
+}
+
 .setup-section {
   margin: 3rem auto;
   max-width: 960px;