Enhance modal styles for better visibility and responsiveness; add initialization logic to sync modal state

static/css/components/modal.css

@@ -6,7 +6,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(0, 0, 0, 0.8);
+    background: rgba(0, 0, 0, 0.2); /* 调整为更淡的半透明黑色 */
     z-index: var(--z-modal);
     overflow: hidden; /* 改为 hidden，防止双滚动条 */
 }
@@ -25,11 +25,14 @@ body.modal-open {
     height: auto;
     max-height: 90vh;
     margin: 2rem auto;
-    background: var(--lora-surface);
+    background: #ffffff; /* 使用纯白色背景 */
     border-radius: var(--border-radius-base);
     padding: var(--space-3);
-    border: 1px solid var(--lora-border);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(0, 0, 0, 0.1); /* 更细腻的边框 */
+    box-shadow: 
+        0 4px 6px -1px rgba(0, 0, 0, 0.1),
+        0 2px 4px -1px rgba(0, 0, 0, 0.06),
+        0 10px 15px -3px rgba(0, 0, 0, 0.05); /* 多层阴影创造深度 */
     overflow-y: auto;
     overflow-x: hidden; /* 防止水平滚动条 */
 }
@@ -1019,10 +1022,11 @@ body.modal-open {
 }
 
 .support-section {
-    background: var(--bg-color);
-    border: 1px solid var(--lora-border);
+    background: rgba(0, 0, 0, 0.02); /* 轻微的灰色背景 */
+    border: 1px solid rgba(0, 0, 0, 0.08); /* 更明显的边框 */
     border-radius: var(--border-radius-sm);
-    padding: var(--space-2);
+    padding: var(--space-3);
+    margin-bottom: var(--space-2);
 }
 
 .support-section h3 {
@@ -1172,10 +1176,10 @@ body.modal-open {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background: var(--bg-color);
-    border: 1px solid var(--lora-border);
+    background: rgba(0, 0, 0, 0.02); /* 轻微的灰色背景 */
+    border: 1px solid rgba(0, 0, 0, 0.08); /* 更明显的边框 */
     border-radius: var(--border-radius-sm);
-    padding: var(--space-2);
+    padding: var(--space-3);
 }
 
 .version-info {
@@ -1225,10 +1229,10 @@ body.modal-open {
 }
 
 .changelog-section {
-    background: var(--bg-color);
-    border: 1px solid var(--lora-border);
+    background: rgba(0, 0, 0, 0.02); /* 轻微的灰色背景 */
+    border: 1px solid rgba(0, 0, 0, 0.08); /* 更明显的边框 */
     border-radius: var(--border-radius-sm);
-    padding: var(--space-2);
+    padding: var(--space-3);
 }
 
 .changelog-section h3 {
@@ -1359,4 +1363,39 @@ input:checked + .toggle-slider:before {
     color: white; /* Icon color changes to white on hover */
 }
 
-/* ...existing code... */
+/* 增强hover状态的视觉反馈 */
+.social-link:hover,
+.update-link:hover,
+.folder-item:hover {
+    border-color: var(--lora-accent);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* 调整深色主题 */
+[data-theme="dark"] .modal-content {
+    background: var(--lora-surface);
+    border: 1px solid var(--lora-border);
+    box-shadow: 
+        0 4px 6px -1px rgba(0, 0, 0, 0.2),
+        0 2px 4px -1px rgba(0, 0, 0, 0.15),
+        0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+
+[data-theme="dark"] .support-section,
+[data-theme="dark"] .changelog-section,
+[data-theme="dark"] .update-info,
+[data-theme="dark"] .info-item,
+[data-theme="dark"] .path-preview {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--lora-border);
+}
+
+/* 调整内容区域的间距，增加呼吸感 */
+.support-section,
+.changelog-section,
+.update-info,
+.info-item {
+    padding: var(--space-3);
+    margin-bottom: var(--space-2);
+    border-radius: var(--border-radius-sm);
+}

static/js/managers/SettingsManager.js

@@ -5,6 +5,29 @@ export class SettingsManager {
     constructor() {
         this.initialized = false;
         this.isOpen = false;
+        
+        // Add initialization to sync with modal state
+        this.initialize();
+    }
+
+    initialize() {
+        if (this.initialized) return;
+        
+        // Add event listener to sync state when modal is closed via other means (like Escape key)
+        const settingsModal = document.getElementById('settingsModal');
+        if (settingsModal) {
+            const observer = new MutationObserver((mutations) => {
+                mutations.forEach((mutation) => {
+                    if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
+                        this.isOpen = settingsModal.style.display === 'block';
+                    }
+                });
+            });
+            
+            observer.observe(settingsModal, { attributes: true });
+        }
+        
+        this.initialized = true;
     }
 
     toggleSettings() {