docs: improve README formatting and clarity

2025-11-03 17:39:06 +08:00
parent b6b5f01f1b
commit a6a3bb5388
2 changed files with 440 additions and 16 deletions
--- a/README.md
+++ b/README.md
@@ -23,27 +23,31 @@ XCodeCLI-Shells 是一个跨平台的配置工具集，用于设置 Claude Code

 ### 🚀 一行命令快速配置

+> **注意**: 请将 `YOUR_API_KEY` 替换为您的实际 API 密钥。脚本会自动测试 `https://api.xcodecli.com` 和 `https://newapi.sususu.cf`，选择可用的端点。
+
 #### Windows (PowerShell)
+
 ```powershell
 $key='YOUR_API_KEY'
 iwr -useb https://gitea.sususu.cf/sususu/xcodecli-shells/raw/branch/main/setup-claude-code.ps1 | iex
 ```

 #### Unix/Linux/macOS (Bash)
+
 ```bash
 export API_KEY='YOUR_API_KEY'
 curl -fsSL https://gitea.sususu.cf/sususu/xcodecli-shells/raw/branch/main/setup-claude-code.sh | bash
 ```

-> **注意**: 请将 `YOUR_API_KEY` 替换为您的实际 API 密钥。脚本会自动测试 `https://api.xcodecli.com` 和 `https://newapi.sususu.cf`，选择可用的端点。
-
 ### 环境要求

 #### Windows
+
 - PowerShell 5.0 或更高版本
 - 网络连接

 #### Unix/Linux/macOS
+
 - Bash shell
 - `jq` 命令行工具
 - `curl` 工具
@@ -68,26 +72,31 @@ sudo dnf install jq
 ### Windows (PowerShell)

 #### 基本使用
+
 ```powershell
 .\setup-claude-code.ps1 -ApiKey your-api-key-here
 ```

 #### 交互模式
+
 ```powershell
 .\setup-claude-code.ps1
 ```

 #### 测试连接
+
 ```powershell
 .\setup-claude-code.ps1 -Test -ApiKey your-api-key-here
 ```

 #### 显示当前设置
+
 ```powershell
 .\setup-claude-code.ps1 -Show
 ```

 #### 帮助信息
+
 ```powershell
 .\setup-claude-code.ps1 -Help
 ```
@@ -97,26 +106,31 @@ sudo dnf install jq
 ### Unix/Linux/macOS (Bash)

 #### 基本使用
+
 ```bash
 ./setup-claude-code.sh --key your-api-key-here
 ```

 #### 交互模式
+
 ```bash
 ./setup-claude-code.sh
 ```

 #### 测试连接
+
 ```bash
 ./setup-claude-code.sh --test --key your-api-key-here
 ```

 #### 显示当前设置
+
 ```bash
 ./setup-claude-code.sh --show
 ```

 #### 帮助信息
+
 ```bash
 ./setup-claude-code.sh --help
 ```
@@ -127,29 +141,29 @@ sudo dnf install jq

 ### PowerShell 脚本参数

-| 参数 | 类型 | 描述 |
-|------|------|------|
-| `-ApiKey` | String | API 密钥 |
-| `-Test` | Switch | 仅测试 API 连接（会自动测试所有可用端点） |
-| `-Show` | Switch | 显示当前设置 |
-| `-Help` | Switch | 显示帮助信息 |
+| 参数      | 类型   | 描述                                      |
+| --------- | ------ | ----------------------------------------- |
+| `-ApiKey` | String | API 密钥                                  |
+| `-Test`   | Switch | 仅测试 API 连接（会自动测试所有可用端点） |
+| `-Show`   | Switch | 显示当前设置                              |
+| `-Help`   | Switch | 显示帮助信息                              |

 > **自动端点发现**: 脚本会自动测试以下端点并选择第一个可用的：
+>
 > - `https://api.xcodecli.com`
 > - `https://newapi.sususu.cf`

 ### Bash 脚本参数

-| 参数 | 类型 | 描述 |
-|------|------|------|
-| `-k, --key` | String | API 密钥 |
-| `-t, --test` | Flag | 仅测试 API 连接（会自动测试所有可用端点） |
-| `-s, --show` | Flag | 显示当前设置 |
-| `-h, --help` | Flag | 显示帮助信息 |
+| 参数         | 类型   | 描述                                      |
+| ------------ | ------ | ----------------------------------------- |
+| `-k, --key`  | String | API 密钥                                  |
+| `-t, --test` | Flag   | 仅测试 API 连接（会自动测试所有可用端点） |
+| `-s, --show` | Flag   | 显示当前设置                              |
+| `-h, --help` | Flag   | 显示帮助信息                              |

 > **环境变量支持**: 脚本也支持通过 `API_KEY` 环境变量传递 API 密钥。

-
 ## 配置文件

 脚本会在以下位置创建配置文件：
@@ -234,4 +248,4 @@ claude --version

 ---

-**注意**: 请确保您的 API 密钥安全，不要在公共代码库中提交包含真实 API 密钥的配置文件。
+**注意**: 请确保您的 API 密钥安全，不要在公共代码库中提交包含真实 API 密钥的配置文件。
--- a/quick-start.html
+++ b/quick-start.html
@@ -0,0 +1,410 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>XCodeCLI-Shells 快速配置</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+
+        .container {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 20px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+            padding: 40px;
+            max-width: 800px;
+            width: 100%;
+            animation: slideUp 0.6s ease-out;
+        }
+
+        @keyframes slideUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .header {
+            text-align: center;
+            margin-bottom: 40px;
+        }
+
+        .title {
+            font-size: 2.5rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 10px;
+        }
+
+        .subtitle {
+            font-size: 1.2rem;
+            color: #666;
+            margin-bottom: 20px;
+        }
+
+        .notice {
+            background: linear-gradient(135deg, #ff7b7b, #ff9a56);
+            color: white;
+            padding: 15px 20px;
+            border-radius: 12px;
+            margin-bottom: 30px;
+            box-shadow: 0 4px 15px rgba(255, 123, 123, 0.3);
+            font-weight: 500;
+        }
+
+        .notice strong {
+            font-weight: 700;
+        }
+
+        .platform-section {
+            margin-bottom: 30px;
+        }
+
+        .platform-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            color: #333;
+            margin-bottom: 15px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .platform-icon {
+            width: 24px;
+            height: 24px;
+            display: inline-block;
+        }
+
+        .code-container {
+            background: #2d3748;
+            border-radius: 12px;
+            padding: 20px;
+            margin-bottom: 20px;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .code-container::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 30px;
+            background: #4a5568;
+            border-radius: 12px 12px 0 0;
+        }
+
+        .code-container::after {
+            content: '● ● ●';
+            position: absolute;
+            top: 8px;
+            left: 15px;
+            color: #718096;
+            font-size: 12px;
+        }
+
+        .code-block {
+            background: transparent;
+            color: #e2e8f0;
+            font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
+            font-size: 14px;
+            line-height: 1.6;
+            white-space: pre-wrap;
+            margin-top: 30px;
+            position: relative;
+        }
+
+        .code-line {
+            display: block;
+            padding: 4px 0;
+        }
+
+        .code-line:first-child {
+            color: #68d391;
+        }
+
+        .code-line:last-child {
+            color: #4fd1c7;
+        }
+
+        .copy-btn {
+            position: absolute;
+            top: 35px;
+            right: 15px;
+            background: #4299e1;
+            color: white;
+            border: none;
+            border-radius: 6px;
+            padding: 8px 12px;
+            font-size: 12px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            z-index: 10;
+        }
+
+        .copy-btn:hover {
+            background: #3182ce;
+            transform: translateY(-1px);
+        }
+
+        .copy-btn.copied {
+            background: #38a169;
+        }
+
+        .input-section {
+            background: #f7fafc;
+            border-radius: 12px;
+            padding: 20px;
+            margin-bottom: 30px;
+            border: 2px dashed #cbd5e0;
+        }
+
+        .input-label {
+            font-weight: 600;
+            color: #2d3748;
+            margin-bottom: 10px;
+            display: block;
+        }
+
+        .input-label a {
+            color: #4299e1;
+            text-decoration: none;
+            margin-left: 8px;
+            font-size: 0.9em;
+            transition: all 0.2s ease;
+            border-bottom: 1px solid transparent;
+        }
+
+        .input-label a:hover {
+            color: #3182ce;
+            border-bottom: 1px solid #3182ce;
+        }
+
+        .api-key-input {
+            width: 100%;
+            padding: 12px 16px;
+            border: 2px solid #e2e8f0;
+            border-radius: 8px;
+            font-size: 14px;
+            font-family: monospace;
+            transition: border-color 0.2s ease;
+        }
+
+        .api-key-input:focus {
+            outline: none;
+            border-color: #4299e1;
+            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
+        }
+
+        .features {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 20px;
+            margin-top: 30px;
+        }
+
+        .feature {
+            text-align: center;
+            padding: 20px;
+            background: linear-gradient(135deg, #e6fffa, #b2f5ea);
+            border-radius: 12px;
+            transition: transform 0.2s ease;
+        }
+
+        .feature:hover {
+            transform: translateY(-2px);
+        }
+
+        .feature-icon {
+            font-size: 2rem;
+            margin-bottom: 10px;
+        }
+
+        .feature-title {
+            font-weight: 600;
+            color: #2d3748;
+            margin-bottom: 5px;
+        }
+
+        .feature-desc {
+            font-size: 0.9rem;
+            color: #4a5568;
+        }
+
+        @media (max-width: 768px) {
+            .container {
+                padding: 20px;
+                margin: 10px;
+            }
+
+            .title {
+                font-size: 2rem;
+            }
+
+            .code-block {
+                font-size: 12px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1 class="title">🚀 XCodeCLI-Shells</h1>
+            <p class="subtitle">一行命令快速配置 Claude Code</p>
+        </div>
+
+        <div class="notice">
+            📝 <strong>注意</strong>: 请将 <code>YOUR_API_KEY</code> 替换为您的实际 API 密钥。脚本会自动测试 <code>https://api.xcodecli.com</code> 和 <code>https://newapi.sususu.cf</code>，选择可用的端点。
+        </div>
+
+        <div class="input-section">
+            <label class="input-label">🔐 输入您的 API 密钥：<a href="https://api.xcodecli.com/console/token" target="_blank">点击获取</a></label>
+            <input type="text" class="api-key-input" id="apiKeyInput" placeholder="sk-xxxxxxxxxxxxxxxxxxxxxxxx" />
+        </div>
+
+        <div class="platform-section">
+            <h3 class="platform-title">
+                <span class="platform-icon">🪟</span>
+                Windows (PowerShell)
+            </h3>
+            <div class="code-container">
+                <button class="copy-btn" onclick="copyCode('windows-code')">📋 复制</button>
+                <div class="code-block" id="windows-code">
+<span class="code-line">$key='YOUR_API_KEY'</span>
+<span class="code-line">iwr -useb https://gitea.sususu.cf/sususu/xcodecli-shells/raw/branch/main/setup-claude-code.ps1 | iex</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="platform-section">
+            <h3 class="platform-title">
+                <span class="platform-icon">🐧</span>
+                Unix/Linux/macOS (Bash)
+            </h3>
+            <div class="code-container">
+                <button class="copy-btn" onclick="copyCode('unix-code')">📋 复制</button>
+                <div class="code-block" id="unix-code">
+<span class="code-line">export API_KEY='YOUR_API_KEY'</span>
+<span class="code-line">curl -fsSL https://gitea.sususu.cf/sususu/xcodecli-shells/raw/branch/main/setup-claude-code.sh | bash</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="features">
+            <div class="feature">
+                <div class="feature-icon">🎯</div>
+                <div class="feature-title">智能端点选择</div>
+                <div class="feature-desc">自动测试多个端点并选择最佳的</div>
+            </div>
+            <div class="feature">
+                <div class="feature-icon">⚡</div>
+                <div class="feature-title">一键安装</div>
+                <div class="feature-desc">无需下载，直接执行配置</div>
+            </div>
+            <div class="feature">
+                <div class="feature-icon">🔒</div>
+                <div class="feature-title">安全可靠</div>
+                <div class="feature-desc">自动验证密钥和连接安全</div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const apiKeyInput = document.getElementById('apiKeyInput');
+
+        // 监听输入变化，实时更新代码
+        apiKeyInput.addEventListener('input', function() {
+            const apiKey = this.value || 'YOUR_API_KEY';
+
+            // 更新 Windows 代码
+            const windowsCode = document.getElementById('windows-code');
+            windowsCode.innerHTML = `
+<span class="code-line">$key='${apiKey}'</span>
+<span class="code-line">iwr -useb https://gitea.sususu.cf/sususu/xcodecli-shells/raw/branch/main/setup-claude-code.ps1 | iex</span>
+            `.trim();
+
+            // 更新 Unix 代码
+            const unixCode = document.getElementById('unix-code');
+            unixCode.innerHTML = `
+<span class="code-line">export API_KEY='${apiKey}'</span>
+<span class="code-line">curl -fsSL https://gitea.sususu.cf/sususu/xcodecli-shells/raw/branch/main/setup-claude-code.sh | bash</span>
+            `.trim();
+        });
+
+        // 复制代码功能
+        function copyCode(elementId) {
+            const element = document.getElementById(elementId);
+            const text = element.textContent.trim();
+
+            navigator.clipboard.writeText(text).then(function() {
+                const btn = element.parentElement.querySelector('.copy-btn');
+                const originalText = btn.textContent;
+                btn.textContent = '✅ 已复制';
+                btn.classList.add('copied');
+
+                setTimeout(() => {
+                    btn.textContent = originalText;
+                    btn.classList.remove('copied');
+                }, 2000);
+            }).catch(function(err) {
+                console.error('复制失败: ', err);
+                // 降级方案
+                const textArea = document.createElement('textarea');
+                textArea.value = text;
+                document.body.appendChild(textArea);
+                textArea.select();
+                document.execCommand('copy');
+                document.body.removeChild(textArea);
+
+                const btn = element.parentElement.querySelector('.copy-btn');
+                const originalText = btn.textContent;
+                btn.textContent = '✅ 已复制';
+                btn.classList.add('copied');
+
+                setTimeout(() => {
+                    btn.textContent = originalText;
+                    btn.classList.remove('copied');
+                }, 2000);
+            });
+        }
+
+        // 页面加载动画
+        document.addEventListener('DOMContentLoaded', function() {
+            const container = document.querySelector('.container');
+            container.style.opacity = '0';
+            container.style.transform = 'translateY(30px)';
+
+            setTimeout(() => {
+                container.style.transition = 'all 0.6s ease-out';
+                container.style.opacity = '1';
+                container.style.transform = 'translateY(0)';
+            }, 100);
+        });
+    </script>
+</body>
+</html>