shiyue/OpenRouter_Image
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

重构: 使用手风琴组件优化API设置和对话历史的UI布局

Browse Source
This commit is contained in:
shiyue
2025-08-29 14:00:40 +08:00
parent db6d9efd95
commit fed199f08d
2 changed files with 138 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
index.html
View File

@@ -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>
<!-- 生成的图像画廊 -->

68
styles.css
View File

@@ -48,8 +48,8 @@ body {
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
/* transform: translateY(-5px); */
box-shadow: 0 15px 40px rgba(233, 233, 233, 0.65);
}
.card-header {
@@ -484,6 +484,15 @@ body {
border: none;
}
#imageViewerModal .modal-header .btn-close {
filter: invert(1);
opacity: 0.8;
}
#imageViewerModal .modal-header .btn-close:hover {
opacity: 1;
}
#imageViewerModal .modal-footer {
background: rgba(0, 0, 0, 0.05);
border: none;
@@ -636,3 +645,58 @@ body {
font-size: 14px;
}
}
/* Accordion 样式定制 */
.accordion {
border-radius: var(--border-radius);
overflow: hidden;
}
.accordion-item {
border: none;
margin-bottom: 1px;
}
.accordion-button {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
color: white;
font-weight: 600;
border: none;
padding: 15px 20px;
border-radius: 0;
}
.accordion-button:not(.collapsed) {
background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
color: white;
box-shadow: none;
}
.accordion-button:focus {
box-shadow: none;
border: none;
}
.accordion-button::after {
filter: invert(1);
}
.accordion-body {
background: rgba(255, 255, 255, 0.95);
padding: 20px;
}
.accordion-item:first-of-type .accordion-button {
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
.accordion-item:last-of-type .accordion-button.collapsed {
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.accordion-item:last-of-type .accordion-collapse {
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}