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

28
index.html
View File

@@ -22,8 +22,15 @@
</div>
<div class="card-body">
<!-- 设置面板 -->
<div class="settings-panel">
<h5><i class="fas fa-cog me-2"></i>API设置</h5>
<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">
@@ -75,6 +82,9 @@
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 图像上传区域 -->
<div class="mb-4">
@@ -130,10 +140,20 @@
</div>
<!-- 聊天历史 -->
<div class="mb-4">
<h5><i class="fas fa-history me-2"></i>对话历史</h5>
<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>
<!-- 生成的图像画廊 -->
<div class="mb-4">

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);
}