mirror of
https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git
synced 2026-02-02 19:00:49 +08:00
Add files via upload
This commit is contained in:
Supra4E8C
GitHub
312
index.html
Normal file
312
index.html
Normal file
@@ -0,0 +1,312 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CLI Proxy API 管理界面</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- 头部导航 -->
|
||||
<header class="header">
|
||||
<div class="header-content">
|
||||
<h1 class="brand">
|
||||
<img id="site-logo" alt="Logo" style="display:none" />
|
||||
<span class="brand-title">CLI Proxy API Management Center</span>
|
||||
</h1>
|
||||
<div class="header-actions">
|
||||
<button id="connection-status" class="btn btn-secondary">
|
||||
<i class="fas fa-circle"></i> 检查连接
|
||||
</button>
|
||||
<button id="refresh-all" class="btn btn-primary">
|
||||
<i class="fas fa-sync-alt"></i> 刷新全部
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 认证配置 -->
|
||||
<section class="auth-section">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2><i class="fas fa-key"></i> 认证配置</h2>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="form-group">
|
||||
<label for="api-url">API 基础地址:</label>
|
||||
<input type="text" id="api-url" value="http://localhost:8317" placeholder="例如: http://localhost:8317 或 127.0.0.1:8317">
|
||||
<div class="form-hint">将自动补全 /v0/management</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="management-key">管理密钥:</label>
|
||||
<div class="input-group">
|
||||
<input type="password" id="management-key" placeholder="请输入管理密钥">
|
||||
<button type="button" id="toggle-key-visibility" class="btn btn-secondary">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button id="test-connection" class="btn btn-primary">
|
||||
<i class="fas fa-plug"></i> 测试连接
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<main class="main-content">
|
||||
<!-- 侧边栏导航 -->
|
||||
<nav class="sidebar">
|
||||
<ul class="nav-menu">
|
||||
<li><a href="#basic-settings" class="nav-item active" data-section="basic-settings">
|
||||
<i class="fas fa-sliders-h"></i> 基础设置
|
||||
</a></li>
|
||||
<li><a href="#api-keys" class="nav-item" data-section="api-keys">
|
||||
<i class="fas fa-key"></i> API 密钥
|
||||
</a></li>
|
||||
<li><a href="#ai-providers" class="nav-item" data-section="ai-providers">
|
||||
<i class="fas fa-robot"></i> AI 提供商
|
||||
</a></li>
|
||||
<li><a href="#auth-files" class="nav-item" data-section="auth-files">
|
||||
<i class="fas fa-file-alt"></i> 认证文件
|
||||
</a></li>
|
||||
<li><a href="#system-info" class="nav-item" data-section="system-info">
|
||||
<i class="fas fa-info-circle"></i> 系统信息
|
||||
</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="content-area">
|
||||
<!-- 基础设置 -->
|
||||
<section id="basic-settings" class="content-section active">
|
||||
<h2>基础设置</h2>
|
||||
|
||||
<!-- Debug 设置 -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3><i class="fas fa-bug"></i> 调试模式</h3>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="toggle-group">
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="debug-toggle">
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<span class="toggle-label">启用调试模式</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 代理设置 -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3><i class="fas fa-network-wired"></i> 代理设置</h3>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="form-group">
|
||||
<label for="proxy-url">代理 URL:</label>
|
||||
<div class="input-group">
|
||||
<input type="text" id="proxy-url" placeholder="例如: socks5://user:pass@127.0.0.1:1080/">
|
||||
<button id="update-proxy" class="btn btn-primary">更新</button>
|
||||
<button id="clear-proxy" class="btn btn-danger">清空</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 请求重试设置 -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3><i class="fas fa-redo"></i> 请求重试</h3>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="form-group">
|
||||
<label for="request-retry">重试次数:</label>
|
||||
<div class="input-group">
|
||||
<input type="number" id="request-retry" min="0" max="10" value="3">
|
||||
<button id="update-retry" class="btn btn-primary">更新</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 配额超出行为 -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3><i class="fas fa-exclamation-triangle"></i> 配额超出行为</h3>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="toggle-group">
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="switch-project-toggle">
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<span class="toggle-label">自动切换项目</span>
|
||||
</div>
|
||||
<div class="toggle-group">
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="switch-preview-model-toggle">
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<span class="toggle-label">切换到预览模型</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 本地访问设置 -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3><i class="fas fa-home"></i> 本地访问</h3>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="toggle-group">
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="allow-localhost-toggle">
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<span class="toggle-label">允许本地未认证访问</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- API 密钥管理 -->
|
||||
<section id="api-keys" class="content-section">
|
||||
<h2>API 密钥管理</h2>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3><i class="fas fa-key"></i> 代理服务认证密钥</h3>
|
||||
<button id="add-api-key" class="btn btn-primary">
|
||||
<i class="fas fa-plus"></i> 添加密钥
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div id="api-keys-list" class="key-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- AI 提供商 -->
|
||||
<section id="ai-providers" class="content-section">
|
||||
<h2>AI 提供商配置</h2>
|
||||
|
||||
<!-- Gemini API Keys -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3><i class="fab fa-google"></i> Gemini API 密钥</h3>
|
||||
<button id="add-gemini-key" class="btn btn-primary">
|
||||
<i class="fas fa-plus"></i> 添加密钥
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div id="gemini-keys-list" class="key-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Codex API Keys -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3><i class="fas fa-code"></i> Codex API 配置</h3>
|
||||
<button id="add-codex-key" class="btn btn-primary">
|
||||
<i class="fas fa-plus"></i> 添加配置
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div id="codex-keys-list" class="provider-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Claude API Keys -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3><i class="fas fa-brain"></i> Claude API 配置</h3>
|
||||
<button id="add-claude-key" class="btn btn-primary">
|
||||
<i class="fas fa-plus"></i> 添加配置
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div id="claude-keys-list" class="provider-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- OpenAI 兼容提供商 -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3><i class="fas fa-plug"></i> OpenAI 兼容提供商</h3>
|
||||
<button id="add-openai-provider" class="btn btn-primary">
|
||||
<i class="fas fa-plus"></i> 添加提供商
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div id="openai-providers-list" class="provider-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 认证文件管理 -->
|
||||
<section id="auth-files" class="content-section">
|
||||
<h2>认证文件管理</h2>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3><i class="fas fa-file-alt"></i> 认证文件</h3>
|
||||
<div class="header-actions">
|
||||
<button id="upload-auth-file" class="btn btn-primary">
|
||||
<i class="fas fa-upload"></i> 上传文件
|
||||
</button>
|
||||
<button id="delete-all-auth-files" class="btn btn-danger">
|
||||
<i class="fas fa-trash"></i> 删除全部
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div id="auth-files-list" class="file-list"></div>
|
||||
<input type="file" id="auth-file-input" accept=".json" style="display: none;">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 系统信息 -->
|
||||
<section id="system-info" class="content-section">
|
||||
<h2>系统信息</h2>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3><i class="fas fa-info-circle"></i> 连接状态</h3>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div id="system-status" class="status-info">
|
||||
<div class="status-item">
|
||||
<span class="status-label">API 状态:</span>
|
||||
<span id="api-status" class="status-value">未连接</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span class="status-label">最后更新:</span>
|
||||
<span id="last-update" class="status-value">-</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- 模态框 -->
|
||||
<div id="modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<div id="modal-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 通知 -->
|
||||
<div id="notification" class="notification"></div>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user