From 17288a98c92433f07207ae717fe3ec00be967e5c Mon Sep 17 00:00:00 2001
From: cmliu <cmliu@users.noreply.github.com>
Date: Tue, 28 Jul 2026 11:59:32 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E9=9D=A2?=
 =?UTF-8?q?=E6=9D=BF=E7=8A=B6=E6=80=81=E7=AE=A1=E7=90=86=EF=BC=8C=E7=A7=BB?=
 =?UTF-8?q?=E9=99=A4=E5=86=97=E4=BD=99=E7=9A=84=E6=A1=8C=E9=9D=A2=E6=8A=98?=
 =?UTF-8?q?=E5=8F=A0=E9=80=BB=E8=BE=91=E5=B9=B6=E8=B0=83=E6=95=B4=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/main.ts     | 10 ++++------
 frontend/src/style.css   | 19 ++++++++-----------
 frontend/src/ui-state.ts |  4 +---
 3 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 08cf51a..240c499 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -241,7 +241,6 @@ function element<T extends HTMLElement>(id: string): T {
 }
 
 const ui = {
-  shell: element<HTMLElement>('app-shell'),
   panel: element<HTMLElement>('connection-panel'),
   panelToggle: element<HTMLButtonElement>('panel-toggle'),
   panelScrim: element<HTMLButtonElement>('panel-scrim'),
@@ -1039,13 +1038,12 @@ function fitTerminal(send = true): void {
 }
 
 function setPanelOpen(open: boolean): void {
-  panelOpen = open;
   const view = resolveConnectionPanel(open, panelMedia.matches);
-  if (!open && (connectionState === 'connecting' || connectionState === 'connected' || connectionState === 'disconnecting')) {
+  panelOpen = view.expanded;
+  if (!view.expanded && (connectionState === 'connecting' || connectionState === 'connected' || connectionState === 'disconnecting')) {
     invalidateHistoryPasswordLoad();
   }
   if (!view.expanded && ui.panel.contains(document.activeElement)) ui.panelToggle.focus();
-  ui.shell.classList.toggle('panel-collapsed', view.desktopCollapsed);
   ui.panel.classList.toggle('open', view.drawerOpen);
   ui.panel.inert = !view.expanded;
   ui.panel.setAttribute('aria-hidden', String(!view.expanded));
@@ -1097,7 +1095,7 @@ function markReady(message = bilingual('交互式 Shell 已就绪', 'Interactive
   if (connectionState === 'connected') return;
   invalidateHistoryPasswordLoad();
   setState('connected');
-  setPanelOpen(false);
+  if (panelMedia.matches) setPanelOpen(false);
   void saveConnectedProfile().catch(() => {
     toast(bilingual('连接成功，但无法更新历史记录。', 'Connected, but the history could not be updated.'), 'error');
   });
@@ -1713,7 +1711,7 @@ document.addEventListener('keydown', (keyEvent) => {
     ui.panelToggle.focus();
   }
 });
-panelMedia.addEventListener('change', (mediaEvent) => setPanelOpen(mediaEvent.matches ? false : panelOpen));
+panelMedia.addEventListener('change', (mediaEvent) => setPanelOpen(!mediaEvent.matches));
 
 let storedTheme: string | null = null;
 try { storedTheme = localStorage.getItem(THEME_STORAGE_KEY); } catch { /* Storage can be disabled. */ }
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 0efd0b2..22a4758 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -193,6 +193,10 @@ button:disabled {
   transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
 }
 
+#panel-toggle {
+  display: none;
+}
+
 .icon-button:hover {
   background: var(--surface-2);
   color: var(--text);
@@ -1296,17 +1300,6 @@ button:disabled {
   from { opacity: 0; transform: translateY(8px); }
 }
 
-.app-shell.panel-collapsed {
-  grid-template-columns: 0 minmax(0, 1fr);
-}
-
-.app-shell.panel-collapsed .connection-panel {
-  visibility: hidden;
-  padding-inline: 0;
-  border-right: 0;
-  opacity: 0;
-}
-
 @media (max-width: 960px) {
   .app-shell {
     grid-template-columns: minmax(280px, 310px) minmax(0, 1fr);
@@ -1336,6 +1329,10 @@ button:disabled {
     height: calc(100% - var(--topbar-height));
   }
 
+  #panel-toggle {
+    display: grid;
+  }
+
   .connection-panel {
     position: fixed;
     top: var(--topbar-height);
diff --git a/frontend/src/ui-state.ts b/frontend/src/ui-state.ts
index 14ce84a..ba8d692 100644
--- a/frontend/src/ui-state.ts
+++ b/frontend/src/ui-state.ts
@@ -17,15 +17,13 @@ export function resolveConnectionControl(state: ConnectionControlState, password
 export interface ConnectionPanelView {
   expanded: boolean;
   drawerOpen: boolean;
-  desktopCollapsed: boolean;
   scrimVisible: boolean;
 }
 
 export function resolveConnectionPanel(open: boolean, mobile: boolean): ConnectionPanelView {
   return {
-    expanded: open,
+    expanded: !mobile || open,
     drawerOpen: mobile && open,
-    desktopCollapsed: !mobile && !open,
     scrimVisible: mobile && open,
   };
 }