Merge pull request #6 from CJackHwang/cto-task-goal-ds2api-docker-docker-exploration-findings-files-examine

Add decoupled Docker support for ds2api

.dockerignore

@@ -0,0 +1,69 @@
+# Git
+.git
+.gitignore
+
+# Python
+__pycache__
+*.py[cod]
+*$py.class
+*.so
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+
+# 虚拟环境
+venv/
+env/
+ENV/
+.venv
+
+# 环境配置（通过 docker-compose 挂载或环境变量传递）
+.env
+.env.local
+.env.*.local
+config.json
+
+# 开发工具
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# 测试
+tests/
+.pytest_cache/
+.coverage
+htmlcov/
+
+# Node.js / WebUI 开发依赖
+node_modules/
+webui/node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# 文档
+*.md
+!README*.md
+
+# CI/CD
+.github/
+.releaserc.json
+
+# 其他
+.DS_Store
+Thumbs.db

.github/PULL_REQUEST_TEMPLATE.md

@@ -17,4 +17,8 @@
 
 #### 📝 补充信息 | Additional Information
 
-<!-- Add any other context about the Pull Request here. -->
+<!-- Add any other context about the Pull Request here. -->
+
+---
+
+> 💡 **提示**：如果修改了 `webui/` 目录下的文件，PR 合并后 CI 会自动构建并提交产物，无需手动构建。

.github/workflows/build-webui.yml

@@ -0,0 +1,76 @@
+# 自动构建 WebUI 并提交构建产物
+# 触发条件：webui 目录下的文件变更
+
+name: Build WebUI
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'webui/**'
+      - '.github/workflows/build-webui.yml'
+  pull_request:
+    branches:
+      - main
+    paths:
+      - 'webui/**'
+  # 允许手动触发
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    
+    # 只在主仓库运行，避免 fork 仓库运行
+    if: github.repository == 'CJackHwang/ds2api'
+    
+    permissions:
+      contents: write
+    
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+      
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+          cache-dependency-path: webui/package-lock.json
+      
+      - name: Install dependencies
+        working-directory: webui
+        run: npm ci
+      
+      - name: Build WebUI
+        working-directory: webui
+        run: npm run build
+      
+      - name: Check for changes
+        id: check_changes
+        run: |
+          git add static/admin
+          if git diff --staged --quiet; then
+            echo "changed=false" >> $GITHUB_OUTPUT
+          else
+            echo "changed=true" >> $GITHUB_OUTPUT
+          fi
+      
+      - name: Commit and push changes
+        if: steps.check_changes.outputs.changed == 'true' && github.event_name == 'push'
+        run: |
+          git config --local user.email "github-actions[bot]@users.noreply.github.com"
+          git config --local user.name "github-actions[bot]"
+          git commit -m "chore: auto-build WebUI [skip ci]"
+          git push
+      
+      - name: Upload build artifacts (for PR review)
+        if: github.event_name == 'pull_request'
+        uses: actions/upload-artifact@v4
+        with:
+          name: webui-build
+          path: static/admin
+          retention-days: 7

.gitignore

@@ -55,7 +55,8 @@ webui/node_modules/
 webui/dist/
 .npm
 .pnpm-store/
-package-lock.json
+# 保留 webui/package-lock.json 用于 CI 缓存
+# package-lock.json  # 如果有根目录的可以忽略
 yarn.lock
 pnpm-lock.yaml
 

CONTRIBUTING.md

@@ -0,0 +1,90 @@
+# 贡献指南
+
+感谢你对 DS2API 的贡献！
+
+## 开发环境设置
+
+### 后端
+
+```bash
+# 1. 克隆仓库
+git clone https://github.com/CJackHwang/ds2api.git
+cd ds2api
+
+# 2. 创建虚拟环境（推荐）
+python -m venv venv
+source venv/bin/activate  # Windows: venv\Scripts\activate
+
+# 3. 安装依赖
+pip install -r requirements.txt
+
+# 4. 配置
+cp config.example.json config.json
+# 编辑 config.json
+
+# 5. 启动
+python dev.py
+```
+
+### 前端 (WebUI)
+
+```bash
+cd webui
+npm install
+npm run dev
+```
+
+## 代码规范
+
+- **Python**: 遵循 PEP 8，使用 4 空格缩进
+- **JavaScript/React**: 使用 4 空格缩进，使用函数组件
+- **提交信息**: 使用语义化提交格式（如 `feat:`, `fix:`, `docs:`）
+
+## 提交 PR
+
+1. Fork 本仓库
+2. 创建功能分支 (`git checkout -b feature/xxx`)
+3. 提交更改 (`git commit -m 'feat: 添加xxx功能'`)
+4. 推送分支 (`git push origin feature/xxx`)
+5. 创建 Pull Request
+
+## WebUI 构建
+
+> **重要**: 修改 `webui/` 目录后 **无需手动构建**！
+
+当 PR 合并到 `main` 分支后，GitHub Actions 会自动：
+1. 构建 WebUI
+2. 提交构建产物到 `static/admin/`
+
+如果需要本地构建（测试用）：
+```bash
+./scripts/build-webui.sh
+```
+
+## 项目结构
+
+```
+ds2api/
+├── app.py              # FastAPI 应用入口
+├── dev.py              # 开发服务器
+├── core/               # 核心模块
+│   ├── auth.py         # 账号认证与轮询
+│   ├── config.py       # 配置管理
+│   ├── deepseek.py     # DeepSeek API 调用
+│   ├── models.py       # 模型定义
+│   ├── pow.py          # PoW 计算
+│   └── sse_parser.py   # SSE 解析
+├── routes/             # API 路由
+│   ├── openai.py       # OpenAI 兼容接口
+│   ├── claude.py       # Claude 兼容接口
+│   ├── home.py         # 首页路由
+│   └── admin/          # 管理接口
+├── webui/              # React WebUI 源码
+├── static/admin/       # WebUI 构建产物（自动生成）
+└── scripts/            # 辅助脚本
+```
+
+## 问题反馈
+
+- 使用 [GitHub Issues](https://github.com/CJackHwang/ds2api/issues) 报告问题
+- 提供详细的复现步骤和日志信息

DEPLOY.md

@@ -7,6 +7,7 @@
 ## 目录
 
 - [Vercel 部署（推荐）](#vercel-部署推荐)
+- [Docker 部署（推荐）](#docker-部署推荐)
 - [本地开发](#本地开发)
 - [生产环境部署](#生产环境部署)
 - [常见问题](#常见问题)
@@ -125,6 +126,129 @@ npm run dev
 
 WebUI 开发服务器会启动在 `http://localhost:5173`，并自动代理 API 请求到后端 `http://localhost:5001`。
 
+### WebUI 构建
+
+WebUI 构建产物位于 `static/admin/` 目录。
+
+**自动构建（推荐）**：
+- 当 `webui/` 目录下的文件变更并推送到 `main` 分支时，GitHub Actions 会自动构建并提交产物
+- PR 合并时会自动触发构建
+
+**手动构建**：
+```bash
+# 方式1：使用脚本
+./scripts/build-webui.sh
+
+# 方式2：直接执行
+cd webui
+npm install
+npm run build
+```
+
+> **贡献者注意**：修改 WebUI 后无需手动构建，CI 会自动处理。
+
+---
+
+## Docker 部署（推荐）
+
+Docker 部署采用**零侵入、解耦设计**：
+- Dockerfile 仅执行标准 Python 项目操作，不硬编码任何项目特定配置
+- 所有配置通过环境变量和 `.env` 文件管理
+- **主代码更新时只需重新构建镜像，无需修改 Docker 配置**
+
+### 快速开始（Docker Compose）
+
+```bash
+# 1. 复制环境变量模板
+cp .env.example .env
+# 编辑 .env，填写 DS2API_ADMIN_KEY 和 DS2API_CONFIG_JSON
+
+# 2. 启动服务
+docker-compose up -d
+
+# 3. 查看日志
+docker-compose logs -f
+
+# 4. 主代码更新后重新构建
+docker-compose up -d --build
+```
+
+### 配置文件挂载方式
+
+如需使用 `config.json` 而非环境变量：
+
+```yaml
+# docker-compose.yml
+services:
+  ds2api:
+    build: .
+    ports:
+      - "5001:5001"
+    environment:
+      - DS2API_ADMIN_KEY=your-admin-key
+    volumes:
+      - ./config.json:/app/config.json:ro
+    restart: unless-stopped
+```
+
+### Docker 命令行部署
+
+```bash
+# 构建镜像
+docker build -t ds2api:latest .
+
+# 使用环境变量运行
+docker run -d \
+  --name ds2api \
+  -p 5001:5001 \
+  -e DS2API_ADMIN_KEY=your-admin-key \
+  -e DS2API_CONFIG_JSON='{"keys":["api-key"],"accounts":[...]}' \
+  --restart unless-stopped \
+  ds2api:latest
+
+# 或使用配置文件挂载
+docker run -d \
+  --name ds2api \
+  -p 5001:5001 \
+  -e DS2API_ADMIN_KEY=your-admin-key \
+  -v $(pwd)/config.json:/app/config.json:ro \
+  --restart unless-stopped \
+  ds2api:latest
+```
+
+### 开发模式（热重载）
+
+```bash
+# 使用开发配置启动，代码修改实时生效
+docker-compose -f docker-compose.dev.yml up
+```
+
+开发模式特性：
+- 源代码挂载到容器，修改即时生效
+- 日志级别设为 DEBUG
+- 自动读取本地 `config.json`
+
+### 维护命令
+
+```bash
+# 查看容器状态
+docker-compose ps
+
+# 查看日志
+docker-compose logs -f ds2api
+
+# 重启服务
+docker-compose restart
+
+# 停止服务
+docker-compose down
+
+# 完全重建（清除缓存）
+docker-compose down
+docker-compose build --no-cache
+docker-compose up -d
+```
+
 ---
 
 ## 生产环境部署
@@ -210,52 +334,6 @@ server {
 }
 ```
 
-### Docker 部署（可选）
-
-```dockerfile
-# Dockerfile
-FROM python:3.11-slim
-
-WORKDIR /app
-COPY requirements.txt .
-RUN pip install --no-cache-dir -r requirements.txt
-
-COPY . .
-
-EXPOSE 5001
-CMD ["python", "app.py"]
-```
-
-```bash
-# 构建镜像
-docker build -t ds2api .
-
-# 运行容器
-docker run -d \
-  --name ds2api \
-  -p 5001:5001 \
-  -e DS2API_ADMIN_KEY=your-admin-key \
-  -e DS2API_CONFIG_JSON='{"keys":["api-key"],"accounts":[...]}' \
-  ds2api
-```
-
-### Docker Compose
-
-```yaml
-# docker-compose.yml
-version: '3.8'
-
-services:
-  ds2api:
-    build: .
-    ports:
-      - "5001:5001"
-    environment:
-      - DS2API_ADMIN_KEY=${DS2API_ADMIN_KEY}
-      - DS2API_CONFIG_JSON=${DS2API_CONFIG_JSON}
-    restart: unless-stopped
-```
-
 ---
 
 ## 常见问题
@@ -291,6 +369,15 @@ pip install -r requirements.txt
 # 重启服务
 ```
 
+**Docker 部署**:
+```bash
+# 拉取最新代码
+git pull origin main
+
+# 重新构建并启动（无需修改 Docker 配置）
+docker-compose up -d --build
+```
+
 **Vercel 部署**:
 - 项目会自动从 GitHub 同步更新
 - 或在 Vercel 控制台手动触发重新部署

Dockerfile

@@ -0,0 +1,20 @@
+# DS2API Docker 镜像
+# 采用极简、零侵入设计，所有配置通过环境变量传递
+# 主代码更新时只需重新构建镜像，无需修改 Dockerfile
+
+FROM python:3.11-slim
+
+WORKDIR /app
+
+# 安装依赖（利用 Docker 缓存层）
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# 复制整个项目（保留原始目录结构）
+COPY . .
+
+# 暴露服务端口
+EXPOSE 5001
+
+# 启动命令（依赖项目自身的启动逻辑）
+CMD ["python", "app.py"]

README.MD

@@ -4,9 +4,18 @@
 ![Stars](https://img.shields.io/github/stars/CJackHwang/ds2api.svg)
 ![Forks](https://img.shields.io/github/forks/CJackHwang/ds2api.svg)
 [![Version](https://img.shields.io/badge/version-1.6.11-blue.svg)](version.txt)
+[![Docker](https://img.shields.io/badge/docker-ready-blue.svg)](DEPLOY.md#docker-部署推荐)
 
 将 DeepSeek 免费对话版转换为 **OpenAI & Claude 兼容 API**，支持多账号轮询、自动 Token 刷新、可视化管理界面。
 
+![p1](https://github.com/user-attachments/assets/07296a50-50d4-4f05-a9e5-280df14e9532)
+![p2](https://github.com/user-attachments/assets/03b4a763-766f-4050-aea8-1a183e70ae6a)
+![p3](https://github.com/user-attachments/assets/beb9e41d-4c12-45d1-a26c-154280211185)
+![p4](https://github.com/user-attachments/assets/fc8b9836-11e3-4c38-a684-eb2c79b80fe9)
+![p5](https://github.com/user-attachments/assets/513e9ca7-aa9e-45a6-8f7e-f362b1650675)
+
+
+
 ## ✨ 特性
 
 - 🔄 **双协议兼容** - 同时支持 OpenAI 和 Claude (Anthropic) API 格式
@@ -184,17 +193,26 @@ location / {
 }
 ```
 
-### Docker 部署（可选）
+### 方式三：Docker 部署
 
 ```bash
-# 使用环境变量配置
-docker run -d \
-  -p 5001:5001 \
-  -e DS2API_ADMIN_KEY=your-admin-key \
-  -e DS2API_CONFIG_JSON='{"keys":["api-key"],"accounts":[...]}' \
-  ds2api
+# 1. 克隆仓库并进入目录
+git clone https://github.com/CJackHwang/ds2api.git
+cd ds2api
+
+# 2. 配置环境变量
+cp .env.example .env
+# 编辑 .env，填写 DS2API_ADMIN_KEY 和 DS2API_CONFIG_JSON
+
+# 3. 启动服务
+docker-compose up -d
+
+# 4. 查看日志
+docker-compose logs -f
 ```
 
+> **Docker 优势**：零侵入设计，主代码更新只需 `docker-compose up -d --build`，无需修改 Docker 配置。详见 [DEPLOY.md](DEPLOY.md#docker-部署推荐)。
+
 ## ⚠️ 免责声明
 
 **本项目基于逆向工程实现，服务稳定性无法保证。**

docker-compose.dev.yml

@@ -0,0 +1,32 @@
+# DS2API 开发环境配置
+# 特性：
+#   - 源代码挂载（热重载）
+#   - 调试日志级别
+#   - 自动重启
+#
+# 使用说明：
+#   docker-compose -f docker-compose.dev.yml up
+
+services:
+  ds2api:
+    build: .
+    image: ds2api:dev
+    container_name: ds2api-dev
+    ports:
+      - "${PORT:-5001}:5001"
+    env_file:
+      - .env
+    environment:
+      - HOST=0.0.0.0
+      - LOG_LEVEL=DEBUG
+    volumes:
+      # 源代码挂载（开发时实时生效）
+      - ./app.py:/app/app.py:ro
+      - ./core:/app/core:ro
+      - ./routes:/app/routes:ro
+      - ./static:/app/static:ro
+      # 配置文件挂载（便于本地修改）
+      - ./config.json:/app/config.json:ro
+    restart: "no"
+    stdin_open: true
+    tty: true

docker-compose.yml

@@ -0,0 +1,29 @@
+# DS2API 生产环境配置
+# 使用说明：
+#   1. 复制 .env.example 为 .env 并填写配置
+#   2. docker-compose up -d
+#   3. 主代码更新后：docker-compose up -d --build
+#
+# 设计原则：
+#   - 零侵入：所有项目配置通过 .env 文件传递
+#   - 易维护：主代码更新只需重新构建镜像
+
+services:
+  ds2api:
+    build: .
+    image: ds2api:latest
+    container_name: ds2api
+    ports:
+      - "${PORT:-5001}:5001"
+    env_file:
+      - .env
+    environment:
+      # 确保容器内使用正确的主机绑定
+      - HOST=0.0.0.0
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "python", "-c", "import urllib.request; urllib.request.urlopen('http://localhost:5001/v1/models')"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 10s

requirements.txt

@@ -1,19 +1,24 @@
 # DS2API 依赖
 # 安装命令: pip install -r requirements.txt
+# Python 版本要求: >=3.9
 
-# Web 框架
+# ===== Web 框架 =====
 fastapi>=0.110.0,<1.0.0
 uvicorn[standard]>=0.24.0,<1.0.0
 
-# HTTP 客户端
+# ===== HTTP 客户端 =====
+# curl_cffi: 支持 TLS 指纹模拟，绕过 Cloudflare 等防护
 curl_cffi>=0.7.0
+# httpx: 异步 HTTP 客户端，用于 Vercel API 调用
 httpx>=0.25.0
 
-# 模板引擎
+# ===== 模板引擎 =====
 jinja2>=3.1.0,<4.0.0
 
-# Tokenizer（用于 token 计数）
+# ===== Tokenizer =====
+# 用于 token 计数（可选，不安装则使用估算方式）
 transformers>=4.39.0,<5.0.0
 
-# WASM 运行时（用于 PoW 计算）
+# ===== WASM 运行时 =====
+# 用于 DeepSeek PoW (Proof of Work) 计算
 wasmtime>=14.0.0

routes/home.py

@@ -253,7 +253,7 @@ WELCOME_HTML = """<!DOCTYPE html>
             <div class="feature-card">
                 <span class="feature-icon">🧠</span>
                 <h3>深度思考</h3>
-                <p>完整支持 DeepSeek-R1 推理过程输出，让思考可见。</p>
+                <p>完整支持 推理过程输出，让思考可见。</p>
             </div>
             <div class="feature-card">
                 <span class="feature-icon">🔍</span>
@@ -263,7 +263,7 @@ WELCOME_HTML = """<!DOCTYPE html>
         </div>
 
         <footer>
-            <p>&copy; 2024 DS2API Project. Designed for flexibility & performance.</p>
+            <p>&copy; 2026 DS2API Project. Designed for flexibility & performance.</p>
         </footer>
     </div>
 </body>
@@ -299,3 +299,5 @@ async def webui(request: Request, path: str = ""):
         return FileResponse(index_path)
     
     return HTMLResponse(content="index.html not found", status_code=404)
+
+

scripts/build-webui.sh

@@ -0,0 +1,22 @@
+#!/bin/bash
+# WebUI 构建脚本
+# 用法: ./scripts/build-webui.sh
+
+set -e
+
+echo "🔨 Building WebUI..."
+
+cd "$(dirname "$0")/../webui"
+
+# 检查 node_modules
+if [ ! -d "node_modules" ]; then
+    echo "📦 Installing dependencies..."
+    npm install
+fi
+
+# 构建
+echo "🏗️  Running build..."
+npm run build
+
+echo "✅ WebUI built successfully!"
+echo "📁 Output: static/admin/"

static/admin/index.html

@@ -32,8 +32,8 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
-  <script type="module" crossorigin src="/admin/assets/index-Da8PBvaf.js"></script>
-  <link rel="stylesheet" crossorigin href="/admin/assets/index-BzdNSWuo.css">
+  <script type="module" crossorigin src="/admin/assets/index-C7aw1GYL.js"></script>
+  <link rel="stylesheet" crossorigin href="/admin/assets/index-D9_KYhGM.css">
 </head>
 
 <body>

webui/src/components/AccountManager.jsx

@@ -10,7 +10,9 @@ import {
     MoreHorizontal,
     X,
     Server,
-    ShieldCheck
+    ShieldCheck,
+    Copy,
+    Check
 } from 'lucide-react'
 import clsx from 'clsx'
 
@@ -18,6 +20,7 @@ export default function AccountManager({ config, onRefresh, onMessage, authFetch
     const [showAddKey, setShowAddKey] = useState(false)
     const [showAddAccount, setShowAddAccount] = useState(false)
     const [newKey, setNewKey] = useState('')
+    const [copiedKey, setCopiedKey] = useState(null)
     const [newAccount, setNewAccount] = useState({ email: '', mobile: '', password: '' })
     const [loading, setLoading] = useState(false)
     const [validating, setValidating] = useState({})
@@ -298,15 +301,34 @@ export default function AccountManager({ config, onRefresh, onMessage, authFetch
                     {config.keys?.length > 0 ? (
                         config.keys.map((key, i) => (
                             <div key={i} className="p-4 flex items-center justify-between hover:bg-muted/50 transition-colors group">
-                                <div className="font-mono text-sm bg-muted/50 px-3 py-1 rounded inline-block">
-                                    {key.slice(0, 16)}****
+                                <div className="flex items-center gap-2">
+                                    <div className="font-mono text-sm bg-muted/50 px-3 py-1 rounded inline-block">
+                                        {key.slice(0, 16)}****
+                                    </div>
+                                    {copiedKey === key && (
+                                        <span className="text-xs text-green-500 animate-pulse">已复制</span>
+                                    )}
+                                </div>
+                                <div className="flex items-center gap-1">
+                                    <button
+                                        onClick={() => {
+                                            navigator.clipboard.writeText(key)
+                                            setCopiedKey(key)
+                                            setTimeout(() => setCopiedKey(null), 2000)
+                                        }}
+                                        className="p-2 text-muted-foreground hover:text-primary hover:bg-primary/10 rounded-md transition-colors opacity-0 group-hover:opacity-100"
+                                        title="复制密钥"
+                                    >
+                                        {copiedKey === key ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
+                                    </button>
+                                    <button
+                                        onClick={() => deleteKey(key)}
+                                        className="p-2 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-md transition-colors opacity-0 group-hover:opacity-100"
+                                        title="删除密钥"
+                                    >
+                                        <Trash2 className="w-4 h-4" />
+                                    </button>
                                 </div>
-                                <button
-                                    onClick={() => deleteKey(key)}
-                                    className="p-2 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-md transition-colors opacity-0 group-hover:opacity-100"
-                                >
-                                    <Trash2 className="w-4 h-4" />
-                                </button>
                             </div>
                         ))
                     ) : (
@@ -445,14 +467,24 @@ export default function AccountManager({ config, onRefresh, onMessage, authFetch
                             <div className="p-6 space-y-4">
                                 <div>
                                     <label className="block text-sm font-medium mb-1.5">新密钥值</label>
-                                    <input
-                                        type="text"
-                                        className="input-field bg-[#09090b]"
-                                        placeholder="输入自定义 API 密钥"
-                                        value={newKey}
-                                        onChange={e => setNewKey(e.target.value)}
-                                        autoFocus
-                                    />
+                                    <div className="flex gap-2">
+                                        <input
+                                            type="text"
+                                            className="input-field bg-[#09090b] flex-1"
+                                            placeholder="输入自定义 API 密钥"
+                                            value={newKey}
+                                            onChange={e => setNewKey(e.target.value)}
+                                            autoFocus
+                                        />
+                                        <button
+                                            type="button"
+                                            onClick={() => setNewKey('sk-' + crypto.randomUUID().replace(/-/g, ''))}
+                                            className="px-3 py-2 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary/80 transition-colors text-sm font-medium border border-border whitespace-nowrap"
+                                        >
+                                            生成
+                                        </button>
+                                    </div>
+                                    <p className="text-xs text-muted-foreground mt-1.5">点击「生成」自动创建随机密钥</p>
                                 </div>
                                 <div className="flex justify-end gap-2 pt-2">
                                     <button onClick={() => setShowAddKey(false)} className="px-4 py-2 rounded-lg border border-border hover:bg-secondary transition-colors text-sm font-medium">取消</button>