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

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