From fed199f08d5721ee77727571af13d1f57f769ebd Mon Sep 17 00:00:00 2001
From: shiyue <935732994@qq.com>
Date: Fri, 29 Aug 2025 14:00:40 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84:=20=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E6=89=8B=E9=A3=8E=E7=90=B4=E7=BB=84=E4=BB=B6=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?API=E8=AE=BE=E7=BD=AE=E5=92=8C=E5=AF=B9=E8=AF=9D=E5=8E=86?=
 =?UTF-8?q?=E5=8F=B2=E7=9A=84UI=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 124 +++++++++++++++++++++++++++++++----------------------
 styles.css |  68 ++++++++++++++++++++++++++++-
 2 files changed, 138 insertions(+), 54 deletions(-)

diff --git a/index.html b/index.html
index e215897..da876c3 100644
--- a/index.html
+++ b/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>
 
                         <!-- 生成的图像画廊 -->
diff --git a/styles.css b/styles.css
index 1a0587c..8f3194b 100644
--- a/styles.css
+++ b/styles.css
@@ -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);
+}