重构: 使用手风琴组件优化API设置和对话历史的UI布局
This commit is contained in:
124
index.html
124
index.html
@@ -22,56 +22,66 @@
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- 设置面板 -->
|
||||
<div class="settings-panel">
|
||||
<h5><i class="fas fa-cog me-2"></i>API设置</h5>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="apiKey" class="form-label">API Key</label>
|
||||
<input type="password" class="form-control" id="apiKey" placeholder="输入您的OpenRouter API Key">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="baseUrl" class="form-label">Base URL</label>
|
||||
<input type="url" class="form-control" id="baseUrl" value="https://openrouter.ai/api/v1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="mb-3">
|
||||
<label for="model" class="form-label">模型</label>
|
||||
<select class="form-select" id="model">
|
||||
<option value="google/gemini-2.5-flash-image-preview:free">Google Gemini 2.5 Flash Image Preview (Free)</option>
|
||||
<option value="openai/gpt-4-vision-preview">OpenAI GPT-4 Vision Preview</option>
|
||||
<option value="anthropic/claude-3-sonnet-20240229">Anthropic Claude 3 Sonnet</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="mb-3">
|
||||
<label for="timeout" class="form-label">超时时间 (秒)</label>
|
||||
<input type="number" class="form-control" id="timeout" value="600">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="mb-3">
|
||||
<label for="proxy" class="form-label">代理 (可选)</label>
|
||||
<input type="url" class="form-control" id="proxy" placeholder="http://proxy:port">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<span class="status-indicator status-disconnected" id="connectionStatus"></span>
|
||||
<span id="connectionText">未连接</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-outline-primary me-2" onclick="testConnection()">
|
||||
<i class="fas fa-plug me-2"></i>测试连接
|
||||
</button>
|
||||
<button class="btn btn-outline-warning" onclick="app.clearStorage()">
|
||||
<i class="fas fa-broom me-2"></i>清除存储数据
|
||||
<div class="accordion mb-4" id="settingsAccordion">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSettings" aria-expanded="false" aria-controls="collapseSettings">
|
||||
<i class="fas fa-cog me-2"></i>API设置
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseSettings" class="accordion-collapse collapse" data-bs-parent="#settingsAccordion">
|
||||
<div class="accordion-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="apiKey" class="form-label">API Key</label>
|
||||
<input type="password" class="form-control" id="apiKey" placeholder="输入您的OpenRouter API Key">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="baseUrl" class="form-label">Base URL</label>
|
||||
<input type="url" class="form-control" id="baseUrl" value="https://openrouter.ai/api/v1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="mb-3">
|
||||
<label for="model" class="form-label">模型</label>
|
||||
<select class="form-select" id="model">
|
||||
<option value="google/gemini-2.5-flash-image-preview:free">Google Gemini 2.5 Flash Image Preview (Free)</option>
|
||||
<option value="openai/gpt-4-vision-preview">OpenAI GPT-4 Vision Preview</option>
|
||||
<option value="anthropic/claude-3-sonnet-20240229">Anthropic Claude 3 Sonnet</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="mb-3">
|
||||
<label for="timeout" class="form-label">超时时间 (秒)</label>
|
||||
<input type="number" class="form-control" id="timeout" value="600">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="mb-3">
|
||||
<label for="proxy" class="form-label">代理 (可选)</label>
|
||||
<input type="url" class="form-control" id="proxy" placeholder="http://proxy:port">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<span class="status-indicator status-disconnected" id="connectionStatus"></span>
|
||||
<span id="connectionText">未连接</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-outline-primary me-2" onclick="testConnection()">
|
||||
<i class="fas fa-plug me-2"></i>测试连接
|
||||
</button>
|
||||
<button class="btn btn-outline-warning" onclick="app.clearStorage()">
|
||||
<i class="fas fa-broom me-2"></i>清除存储数据
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -130,9 +140,19 @@
|
||||
</div>
|
||||
|
||||
<!-- 聊天历史 -->
|
||||
<div class="mb-4">
|
||||
<h5><i class="fas fa-history me-2"></i>对话历史</h5>
|
||||
<div id="chatHistory" style="max-height: 400px; overflow-y: auto;"></div>
|
||||
<div class="accordion mb-4" id="chatAccordion">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseChat" aria-expanded="false" aria-controls="collapseChat">
|
||||
<i class="fas fa-history me-2"></i>对话历史
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseChat" class="accordion-collapse collapse" data-bs-parent="#chatAccordion">
|
||||
<div class="accordion-body">
|
||||
<div id="chatHistory" style="max-height: 400px; overflow-y: auto;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 生成的图像画廊 -->
|
||||
|
||||
Reference in New Issue
Block a user