refactor: 优化面板状态管理，移除冗余的桌面折叠逻辑并调整样式

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. */ }

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

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,
   };
 }