From 3468fd83737580fa0db96e117624166e8b2dc75d Mon Sep 17 00:00:00 2001
From: Supra4E8C <tan13318527080@163.com>
Date: Mon, 10 Nov 2025 18:07:31 +0800
Subject: [PATCH] feat(app.js, styles): enhance connection state handling and
 update editor dimensions

- Added a new property to track the last connection state in CLIProxyManager.
- Updated the config editor availability logic to reflect changes in connection state.
- Increased minimum height for various editor components in styles to improve usability.
- Introduced responsive styles for smaller screens to ensure proper display of editor elements.
---
 app.js     |  6 +++++-
 styles.css | 21 +++++++++++++++++++--
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/app.js b/app.js
index 4cfc450..5060a7f 100644
--- a/app.js
+++ b/app.js
@@ -41,6 +41,7 @@ class CLIProxyManager {
             statusEl: null
         };
         this.lastConfigFetchUrl = null;
+        this.lastEditorConnectionState = null;
 
         this.init();
     }
@@ -967,6 +968,7 @@ class CLIProxyManager {
         }
 
         this.refreshConfigEditor();
+        this.lastEditorConnectionState = this.isConnected;
     }
 
     refreshConfigEditor() {
@@ -1326,7 +1328,9 @@ class CLIProxyManager {
 
         lastUpdate.textContent = new Date().toLocaleString('zh-CN');
 
-        this.updateConfigEditorAvailability();
+        if (this.lastEditorConnectionState !== this.isConnected) {
+            this.updateConfigEditorAvailability();
+        }
 
         // 更新连接信息显示
         this.updateConnectionInfo();
diff --git a/styles.css b/styles.css
index b7a9a04..1bc9602 100644
--- a/styles.css
+++ b/styles.css
@@ -1364,6 +1364,7 @@ textarea::placeholder {
     display: flex;
     flex-direction: column;
     gap: 12px;
+    min-height: 520px;
 }
 
 #config-management .card {
@@ -1383,12 +1384,13 @@ textarea::placeholder {
     flex: 1;
     display: flex;
     flex-direction: column;
+    min-height: 520px;
 }
 
 .yaml-editor {
     width: 100%;
     flex: 1;
-    min-height: 360px;
+    min-height: 520px;
     border: 1px solid var(--border-primary);
     border-radius: 6px;
     padding: 12px 14px;
@@ -1402,6 +1404,7 @@ textarea::placeholder {
 
 #config-management .CodeMirror {
     flex: 1;
+    min-height: 520px;
     height: 100%;
     font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
     font-size: 14px;
@@ -1414,8 +1417,10 @@ textarea::placeholder {
 
 #config-management .CodeMirror-scroll {
     min-height: 0;
-    max-height: calc(100vh - 440px);
+    height: 100%;
+    max-height: none;
     overflow-y: auto;
+    overscroll-behavior: contain;
 }
 
 #config-management .CodeMirror.cm-s-default {
@@ -1458,6 +1463,18 @@ textarea::placeholder {
     opacity: 0.6;
 }
 
+@media (max-width: 768px) {
+    .yaml-editor-container,
+    #config-management .yaml-editor-container {
+        min-height: 360px;
+    }
+
+    .yaml-editor,
+    #config-management .CodeMirror {
+        min-height: 360px;
+    }
+}
+
 .editor-status {
     font-size: 13px;
     color: var(--text-quaternary);