update

packages/frontend/src/components/CommandInputBar.vue

@@ -36,10 +36,10 @@ const sendCommand = () => {
 .command-input-bar {
   display: flex;
   align-items: center;
-  padding: 5px 10px;
-  background-color: #f0f0f0; /* 背景色，可调整 */
-  border-top: 1px solid #ccc;
-  border-bottom: 1px solid #ccc;
+  padding: var(--base-margin); /* Use theme variable */
+  background-color: var(--header-bg-color); /* Use theme variable */
+  border-top: 1px solid var(--border-color); /* Use theme variable */
+  border-bottom: 1px solid var(--border-color); /* Use theme variable */
   min-height: 40px; /* 保证一定高度 */
 }
 
@@ -51,9 +51,11 @@ const sendCommand = () => {
 
 .command-input {
   padding: 6px 10px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--border-color); /* Use theme variable */
   border-radius: 4px;
   font-size: 0.9em;
+  background-color: var(--app-bg-color); /* Use theme variable */
+  color: var(--text-color); /* Use theme variable */
   width: 60%; /* 输入框宽度，可调整 */
   max-width: 800px; /* 最大宽度 */
   outline: none;
@@ -61,8 +63,8 @@ const sendCommand = () => {
 }
 
 .command-input:focus {
-  border-color: #007bff;
-  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+  border-color: var(--button-bg-color); /* Use theme variable */
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); /* Keep existing shadow or define variable */
 }
 
 /* 可以添加按钮样式 */

packages/frontend/src/components/FileManager.vue

@@ -845,24 +845,28 @@ const cancelPathEdit = () => {
 
 <style scoped>
 /* Styles remain the same, but add .selected style */
-.file-manager { height: 100%; display: flex; flex-direction: column; font-family: sans-serif; font-size: 0.9rem; overflow: hidden; }
-.toolbar { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem; background-color: #f0f0f0; border-bottom: 1px solid #ccc; flex-wrap: wrap; }
-.path-bar { white-space: nowrap; overflow-x: auto; flex-grow: 1; margin-right: 1rem; padding: 0.2rem 0.4rem; border-radius: 3px; } /* Remove cursor:text and hover */
+.file-manager { height: 100%; display: flex; flex-direction: column; font-family: var(--font-family-sans-serif); font-size: 0.9rem; overflow: hidden; background-color: var(--app-bg-color); color: var(--text-color); }
+.toolbar { display: flex; justify-content: space-between; align-items: center; padding: var(--base-margin); background-color: var(--header-bg-color); border-bottom: 1px solid var(--border-color); flex-wrap: wrap; }
+.path-bar { white-space: nowrap; overflow-x: auto; flex-grow: 1; margin-right: var(--base-padding); padding: 0.2rem 0.4rem; border-radius: 3px; } /* Remove cursor:text and hover */
 .path-bar strong.editable-path {
     font-weight: normal;
-    background-color: #e0e0e0;
+    background-color: var(--header-bg-color); /* Use header bg */
+    filter: brightness(0.95); /* Slightly darken */
     padding: 0.1rem 0.4rem;
     border-radius: 3px;
     margin-left: 0.3rem;
     cursor: text; /* Add cursor only to the clickable part */
 }
 .path-bar strong.editable-path:hover {
-    background-color: #d0d0d0; /* Slightly darker hover for the path */
+    background-color: var(--header-bg-color); /* Use header bg */
+    filter: brightness(0.9); /* Darker hover */
 }
 .path-input {
     font-family: inherit;
     font-size: inherit;
-    border: 1px solid #ccc;
+    border: 1px solid var(--border-color); /* Use theme variable */
+    background-color: var(--app-bg-color); /* Use theme variable */
+    color: var(--text-color); /* Use theme variable */
     padding: 0.1rem 0.4rem;
     border-radius: 3px;
     width: calc(100% - 70px); /* Adjust width based on button sizes */
@@ -872,14 +876,14 @@ const cancelPathEdit = () => {
 .path-bar button:disabled { opacity: 0.5; cursor: not-allowed; }
 .actions-bar button { padding: 0.3rem 0.6rem; cursor: pointer; margin-left: 0.5rem; }
 .actions-bar button:disabled { opacity: 0.5; cursor: not-allowed; }
-.upload-popup { position: fixed; bottom: 1rem; right: 1rem; background-color: white; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); padding: 0.8rem; max-width: 300px; max-height: 200px; overflow-y: auto; z-index: 1001; }
-.upload-popup h4 { margin: 0 0 0.5rem 0; font-size: 0.9em; border-bottom: 1px solid #eee; padding-bottom: 0.3rem; }
+.upload-popup { position: fixed; bottom: var(--base-padding); right: var(--base-padding); background-color: var(--app-bg-color); border: 1px solid var(--border-color); border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); padding: 0.8rem; max-width: 300px; max-height: 200px; overflow-y: auto; z-index: 1001; color: var(--text-color); } /* Use theme variables */
+.upload-popup h4 { margin: 0 0 var(--base-margin) 0; font-size: 0.9em; border-bottom: 1px solid var(--border-color); padding-bottom: 0.3rem; } /* Use theme variables */
 .upload-popup ul { list-style: none; padding: 0; margin: 0; }
-.upload-popup li { margin-bottom: 0.4rem; font-size: 0.85em; display: flex; align-items: center; flex-wrap: wrap; }
+.upload-popup li { margin-bottom: var(--base-margin); font-size: 0.85em; display: flex; align-items: center; flex-wrap: wrap; } /* Use theme variable */
 .upload-popup progress { margin: 0 0.5rem; width: 80px; height: 0.8em; }
-.upload-popup .error { color: red; margin-left: 0.5rem; flex-basis: 100%; font-size: 0.8em; }
-.upload-popup .cancel-btn { margin-left: auto; padding: 0.1rem 0.4rem; font-size: 0.8em; background-color: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; cursor: pointer; }
-.loading, .no-files { padding: 1rem; text-align: center; color: #666; }
+.upload-popup .error { color: red; margin-left: 0.5rem; flex-basis: 100%; font-size: 0.8em; } /* Keep error color */
+.upload-popup .cancel-btn { margin-left: auto; padding: 0.1rem 0.4rem; font-size: 0.8em; background-color: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; cursor: pointer; } /* Keep specific cancel button style */
+.loading, .no-files { padding: var(--base-padding); text-align: center; color: var(--text-color-secondary); } /* Use theme variable */
 /* 移除 .error-alert 和 .close-error-btn 样式 */
 /* .error-alert { ... } */
 /* .close-error-btn { ... } */
@@ -909,9 +913,9 @@ table.resizable-table {
   table-layout: fixed; /* Crucial for resizing */
   overflow: hidden; /* Prevent resizer overflow */
 }
-thead { background-color: #f8f8f8; position: sticky; top: 0; z-index: 1; }
+thead { background-color: var(--header-bg-color); position: sticky; top: 0; z-index: 1; } /* Use theme variable */
 th, td {
-    border: 1px solid #eee;
+    border: 1px solid var(--border-color); /* Use theme variable */
     padding: 0.4rem 0.6rem;
     text-align: left;
     white-space: nowrap;
@@ -922,21 +926,21 @@ th {
     position: relative; /* Needed for absolute positioning of resizer */
 }
 th.sortable { cursor: pointer; }
-th.sortable:hover { background-color: #e9e9e9; }
+th.sortable:hover { background-color: var(--header-bg-color); filter: brightness(0.95); } /* Use theme variable */
 /* Removed fixed width for first column, handled by colgroup */
 td:first-child {
   text-align: center; /* Center the icon */
 }
-tbody tr:hover { background-color: #f5f5f5; }
+tbody tr:hover { background-color: var(--header-bg-color); } /* Use theme variable */
 tbody tr.clickable { cursor: pointer; user-select: none; /* Prevent text selection on click */ }
 /* Removed .actions-cell style */
-tbody tr.selected { background-color: #cce5ff; }
-tbody tr.selected:hover { background-color: #b8daff; }
-.context-menu { position: fixed; background-color: white; border: 1px solid #ccc; box-shadow: 2px 2px 5px rgba(0,0,0,0.2); z-index: 1002; min-width: 150px; }
-.context-menu ul { list-style: none; padding: 5px 0; margin: 0; }
-.context-menu li { padding: 8px 12px; cursor: pointer; }
-.context-menu li:hover { background-color: #eee; }
-.context-menu li.disabled { color: #aaa; cursor: not-allowed; background-color: white; }
+tbody tr.selected { background-color: var(--button-bg-color); color: var(--button-text-color); } /* Use theme variables */
+tbody tr.selected:hover { background-color: var(--button-hover-bg-color); color: var(--button-text-color); } /* Use theme variables */
+.context-menu { position: fixed; background-color: var(--app-bg-color); border: 1px solid var(--border-color); box-shadow: 2px 2px 5px rgba(0,0,0,0.2); z-index: 1002; min-width: 150px; } /* Use theme variables */
+.context-menu ul { list-style: none; padding: var(--base-margin) 0; margin: 0; } /* Use theme variable */
+.context-menu li { padding: var(--base-margin) var(--base-padding); cursor: pointer; color: var(--text-color); } /* Use theme variables */
+.context-menu li:hover { background-color: var(--header-bg-color); } /* Use theme variable */
+.context-menu li.disabled { color: var(--text-color-secondary); cursor: not-allowed; background-color: var(--app-bg-color); opacity: 0.6; } /* Use theme variables */
 
 /* Resizer Handle Styles */
 .resizer {
@@ -961,42 +965,42 @@ tbody tr.selected:hover { background-color: #b8daff; }
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(40, 40, 40, 0.95); /* Dark semi-transparent background */
+  background-color: rgba(40, 40, 40, 0.95); /* Keep dark background for overlay */
   z-index: 1000; /* Ensure it's above the file list but below popups */
   display: flex;
   flex-direction: column;
-  color: #f0f0f0;
+  color: #f0f0f0; /* Keep light text for dark overlay */
 }
 
 .editor-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0.5rem 1rem;
-  background-color: #333;
-  border-bottom: 1px solid #555;
+  padding: var(--base-margin) var(--base-padding); /* Use theme variables */
+  background-color: #333; /* Keep dark header for overlay */
+  border-bottom: 1px solid #555; /* Keep dark border for overlay */
   font-size: 0.9em;
 }
 
 .close-editor-btn {
   background: none;
   border: none;
-  color: #ccc;
+  color: #ccc; /* Keep light color for dark header */
   font-size: 1.2em;
   cursor: pointer;
   padding: 0.2rem 0.5rem;
 }
 .close-editor-btn:hover {
-  color: white;
+  color: white; /* Keep light hover color */
 }
 
 .editor-loading, .editor-error {
-  padding: 2rem;
+  padding: calc(var(--base-padding) * 2); /* Use theme variable */
   text-align: center;
   font-size: 1.1em;
 }
 .editor-error {
-    color: #ff8a8a;
+    color: #ff8a8a; /* Keep specific error color */
 }
 
 .editor-actions {
@@ -1005,11 +1009,11 @@ tbody tr.selected:hover { background-color: #b8daff; }
 }
 
 .save-btn {
-    background-color: #4CAF50;
-    color: white;
+    background-color: var(--button-bg-color); /* Use theme variable */
+    color: var(--button-text-color); /* Use theme variable */
     border: none;
     padding: 0.4rem 0.8rem;
-    margin-left: 1rem;
+    margin-left: var(--base-padding); /* Use theme variable */
     cursor: pointer;
     border-radius: 3px;
     font-size: 0.9em;
@@ -1019,25 +1023,25 @@ tbody tr.selected:hover { background-color: #b8daff; }
     cursor: not-allowed;
 }
 .save-btn:hover:not(:disabled) {
-    background-color: #45a049;
+    background-color: var(--button-hover-bg-color); /* Use theme variable */
 }
 
 .save-status {
-    margin-left: 1rem;
+    margin-left: var(--base-padding); /* Use theme variable */
     font-size: 0.9em;
     padding: 0.2rem 0.5rem;
     border-radius: 3px;
 }
 .save-status.saving {
-    color: #888;
+    color: var(--text-color-secondary); /* Use theme variable */
 }
 .save-status.success {
-    color: #4CAF50;
-    background-color: #e8f5e9;
+    color: #4CAF50; /* Keep specific success color */
+    background-color: #e8f5e9; /* Keep specific success background */
 }
 .save-status.error {
-    color: #f44336;
-    background-color: #ffebee;
+    color: #f44336; /* Keep specific error color */
+    background-color: #ffebee; /* Keep specific error background */
 }
 
 .editor-instance {

packages/frontend/src/components/LayoutConfigurator.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch, type Ref } from 'vue';
+import { ref, computed, watch, onMounted, onUnmounted, type Ref, reactive } from 'vue'; // 导入 reactive
 import { useI18n } from 'vue-i18n';
 import { useLayoutStore, type LayoutNode, type PaneName } from '../stores/layout.store';
 import draggable from 'vuedraggable';
@@ -26,18 +26,67 @@ const localLayoutTree: Ref<LayoutNode | null> = ref(null);
 // 标记是否有更改未保存
 const hasChanges = ref(false);
 
+// --- Resizing State ---
+const dialogRef = ref<HTMLElement | null>(null); // 对话框元素的引用
+const initialDialogState = { width: 800, height: 600 }; // 初始/默认尺寸 (px)
+const dialogStyle = reactive({
+  width: `${initialDialogState.width}px`,
+  height: `${initialDialogState.height}px`,
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)', // 初始居中
+  position: 'absolute' as 'absolute', // 显式设置定位
+});
+const isResizing = ref(false);
+const resizeHandle = ref<string | null>(null); // 记录当前拖拽的手柄 ('t', 'b', 'l', 'r', 'tl', 'tr', 'bl', 'br')
+const startDragPos = { x: 0, y: 0 };
+const startDialogRect = { width: 0, height: 0, top: 0, left: 0 };
+const minDialogSize = { width: 400, height: 300 }; // 最小尺寸限制
+
 // --- Watchers ---
-// 当弹窗可见时，从 store 加载当前布局到本地副本
+// 当弹窗可见时，从 store 加载当前布局并计算初始位置
 watch(() => props.isVisible, (newValue) => {
-  if (newValue && layoutStore.layoutTree) {
-    // 深拷贝以避免直接修改 store 状态
-    localLayoutTree.value = JSON.parse(JSON.stringify(layoutStore.layoutTree));
-    hasChanges.value = false; // 重置更改状态
+  if (newValue) {
+    // 加载布局
+    if (layoutStore.layoutTree) {
+      localLayoutTree.value = JSON.parse(JSON.stringify(layoutStore.layoutTree));
+    }
+    hasChanges.value = false;
     console.log('[LayoutConfigurator] 弹窗打开，已加载当前布局到本地副本。');
+
+    // 重置/计算初始位置和大小 (确保在 DOM 更新后执行，或给个延迟)
+    requestAnimationFrame(() => {
+      if (dialogRef.value) {
+        // 尝试读取当前计算出的尺寸，如果失败则使用默认值
+        const currentRect = dialogRef.value.getBoundingClientRect();
+        const initialWidth = currentRect.width > minDialogSize.width ? currentRect.width : initialDialogState.width;
+        const initialHeight = currentRect.height > minDialogSize.height ? currentRect.height : initialDialogState.height;
+
+        dialogStyle.width = `${initialWidth}px`;
+        dialogStyle.height = `${initialHeight}px`;
+        dialogStyle.left = `${(window.innerWidth - initialWidth) / 2}px`;
+        dialogStyle.top = `${(window.innerHeight - initialHeight) / 2}px`;
+        dialogStyle.transform = 'none'; // 移除 transform 居中
+        dialogStyle.position = 'absolute';
+        console.log('[LayoutConfigurator] Dialog initial position calculated:', dialogStyle);
+      } else {
+         // Fallback if ref not ready (less accurate centering)
+         dialogStyle.width = `${initialDialogState.width}px`;
+         dialogStyle.height = `${initialDialogState.height}px`;
+         dialogStyle.left = '50%';
+         dialogStyle.top = '50%';
+         dialogStyle.transform = 'translate(-50%, -50%)';
+         dialogStyle.position = 'absolute';
+      }
+    });
+
   } else {
     localLayoutTree.value = null; // 关闭时清空本地副本
+    isResizing.value = false; // 确保关闭时重置拖拽状态
+    window.removeEventListener('mousemove', handleMouseMove);
+    window.removeEventListener('mouseup', handleMouseUp);
   }
-});
+}, { immediate: true }); // immediate: true 可能导致初始计算问题，先去掉试试
 
 // 监听本地布局树的变化，标记有未保存更改
 watch(localLayoutTree, (newValue, oldValue) => {
@@ -125,7 +174,99 @@ const resetToDefault = () => {
   }
 };
 
-// --- Drag & Drop Methods ---
+// --- Resizing Methods ---
+const handleMouseDown = (event: MouseEvent, handle: string) => {
+  if (!dialogRef.value) return;
+  event.preventDefault(); // 阻止默认行为，如文本选择
+  event.stopPropagation();
+
+  isResizing.value = true;
+  resizeHandle.value = handle;
+  startDragPos.x = event.clientX;
+  startDragPos.y = event.clientY;
+
+  // 解析当前的 px 值
+  const currentWidth = parseFloat(dialogStyle.width);
+  const currentHeight = parseFloat(dialogStyle.height);
+  const currentTop = parseFloat(dialogStyle.top);
+  const currentLeft = parseFloat(dialogStyle.left);
+
+  startDialogRect.width = isNaN(currentWidth) ? initialDialogState.width : currentWidth;
+  startDialogRect.height = isNaN(currentHeight) ? initialDialogState.height : currentHeight;
+  startDialogRect.top = isNaN(currentTop) ? (window.innerHeight - startDialogRect.height) / 2 : currentTop;
+  startDialogRect.left = isNaN(currentLeft) ? (window.innerWidth - startDialogRect.width) / 2 : currentLeft;
+
+  console.log(`[LayoutConfigurator] MouseDown on handle ${handle}. Start rect:`, { ...startDialogRect });
+
+
+  window.addEventListener('mousemove', handleMouseMove);
+  window.addEventListener('mouseup', handleMouseUp);
+};
+
+const handleMouseMove = (event: MouseEvent) => {
+  if (!isResizing.value || !resizeHandle.value) return;
+
+  const deltaX = event.clientX - startDragPos.x;
+  const deltaY = event.clientY - startDragPos.y;
+
+  let newWidth = startDialogRect.width;
+  let newHeight = startDialogRect.height;
+  let newTop = startDialogRect.top;
+  let newLeft = startDialogRect.left;
+
+  // 根据拖拽的手柄计算新的尺寸和位置 (中心缩放)
+  if (resizeHandle.value.includes('r')) {
+    newWidth = startDialogRect.width + deltaX * 2;
+    newLeft = startDialogRect.left - deltaX;
+  }
+  if (resizeHandle.value.includes('l')) {
+    newWidth = startDialogRect.width - deltaX * 2;
+    newLeft = startDialogRect.left + deltaX;
+  }
+  if (resizeHandle.value.includes('b')) {
+    newHeight = startDialogRect.height + deltaY * 2;
+    newTop = startDialogRect.top - deltaY;
+  }
+  if (resizeHandle.value.includes('t')) {
+    newHeight = startDialogRect.height - deltaY * 2;
+    newTop = startDialogRect.top + deltaY;
+  }
+
+  // 应用最小尺寸限制
+  if (newWidth < minDialogSize.width) {
+      const diff = minDialogSize.width - newWidth;
+      newWidth = minDialogSize.width;
+      // 根据拖拽方向调整 left 以保持中心
+      if (resizeHandle.value.includes('r')) newLeft += diff / 2;
+      if (resizeHandle.value.includes('l')) newLeft -= diff / 2;
+  }
+   if (newHeight < minDialogSize.height) {
+       const diff = minDialogSize.height - newHeight;
+       newHeight = minDialogSize.height;
+       // 根据拖拽方向调整 top 以保持中心
+       if (resizeHandle.value.includes('b')) newTop += diff / 2;
+       if (resizeHandle.value.includes('t')) newTop -= diff / 2;
+   }
+
+
+  // 更新样式
+  dialogStyle.width = `${newWidth}px`;
+  dialogStyle.height = `${newHeight}px`;
+  dialogStyle.top = `${newTop}px`;
+  dialogStyle.left = `${newLeft}px`;
+};
+
+const handleMouseUp = () => {
+  if (isResizing.value) {
+    console.log(`[LayoutConfigurator] MouseUp. Final rect:`, { width: dialogStyle.width, height: dialogStyle.height, top: dialogStyle.top, left: dialogStyle.left });
+    isResizing.value = false;
+    resizeHandle.value = null;
+    window.removeEventListener('mousemove', handleMouseMove);
+    window.removeEventListener('mouseup', handleMouseUp);
+  }
+};
+
+// --- Drag & Drop Methods (for panes, unchanged) ---
 // 克隆函数：当从可用列表拖拽时，创建新的 LayoutNode 对象
 const clonePane = (paneName: PaneName): LayoutNode => {
   console.log(`[LayoutConfigurator] 克隆面板: ${paneName}`);
@@ -204,7 +345,18 @@ const handleNodeRemove = (payload: { parentNodeId: string | undefined; nodeIndex
 
 <template>
   <div v-if="isVisible" class="layout-configurator-overlay" @click.self="closeDialog">
-    <div class="layout-configurator-dialog">
+    <!-- 应用动态样式，并添加 ref -->
+    <div ref="dialogRef" class="layout-configurator-dialog" :style="dialogStyle">
+      <!-- Resize Handles -->
+      <div class="resize-handle top" @mousedown.prevent="handleMouseDown($event, 't')"></div>
+      <div class="resize-handle bottom" @mousedown.prevent="handleMouseDown($event, 'b')"></div>
+      <div class="resize-handle left" @mousedown.prevent="handleMouseDown($event, 'l')"></div>
+      <div class="resize-handle right" @mousedown.prevent="handleMouseDown($event, 'r')"></div>
+      <div class="resize-handle top-left" @mousedown.prevent="handleMouseDown($event, 'tl')"></div>
+      <div class="resize-handle top-right" @mousedown.prevent="handleMouseDown($event, 'tr')"></div>
+      <div class="resize-handle bottom-left" @mousedown.prevent="handleMouseDown($event, 'bl')"></div>
+      <div class="resize-handle bottom-right" @mousedown.prevent="handleMouseDown($event, 'br')"></div>
+
       <header class="dialog-header">
         <h2>{{ t('layoutConfigurator.title', '配置工作区布局') }}</h2>
         <button class="close-button" @click="closeDialog" :title="t('common.close', '关闭')">&times;</button>
@@ -287,20 +439,32 @@ const handleNodeRemove = (payload: { parentNodeId: string | undefined; nodeIndex
   background-color: rgba(0, 0, 0, 0.6);
   display: flex;
   justify-content: center;
-  align-items: center;
-  z-index: 1000; /* 低于 TerminalTabBar 的弹出窗口？可能需要调整 */
+  align-items: flex-start; /* 改为 flex-start 以配合 absolute 定位 */
+  /* 移除 justify-content: center; */
+  z-index: 1000;
+  /* 添加 pointer-events none 以允许点击穿透覆盖层，除非点在 dialog 上 */
+  pointer-events: none;
 }
 
 .layout-configurator-dialog {
   background-color: #fff;
   border-radius: 8px;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
-  width: 80vw;
-  max-width: 900px; /* 增加最大宽度 */
-  max-height: 85vh;
+  /* width, height, top, left 由 dialogStyle 控制 */
+  /* 移除 max-width, max-height，由拖拽逻辑和 minSize 控制 */
   display: flex;
   flex-direction: column;
   overflow: hidden; /* 防止内容溢出 */
+  position: absolute; /* 确保是 absolute */
+  /* 允许 dialog 接收点击事件 */
+  pointer-events: auto;
+  /* 添加 resize 光标，当悬停在 dialog 上但不在 handle 上时 */
+  cursor: default;
+}
+
+/* 当正在调整大小时，给 body 添加样式以覆盖其他元素的鼠标指针 */
+body.resizing * {
+  cursor: grabbing !important; /* 或者根据 handle 方向设置不同的 cursor */
 }
 
 .dialog-header {
@@ -462,4 +626,44 @@ h3 {
   background-color: #dee2e6;
 }
 
+
+/* --- Resize Handle Styles --- */
+.resize-handle {
+  position: absolute;
+  background: transparent; /* 使手柄不可见，但可交互 */
+  z-index: 10; /* 确保在内容之上 */
+}
+.resize-handle.top, .resize-handle.bottom {
+  left: 10px; /* 调整手柄区域 */
+  right: 10px;
+  height: 10px; /* 手柄厚度 */
+  cursor: ns-resize;
+}
+.resize-handle.left, .resize-handle.right {
+  top: 10px;
+  bottom: 10px;
+  width: 10px;
+  cursor: ew-resize;
+}
+.resize-handle.top { top: -5px; }
+.resize-handle.bottom { bottom: -5px; }
+.resize-handle.left { left: -5px; }
+.resize-handle.right { right: -5px; }
+
+.resize-handle.top-left, .resize-handle.top-right, .resize-handle.bottom-left, .resize-handle.bottom-right {
+  width: 16px; /* 角落手柄稍大 */
+  height: 16px;
+}
+.resize-handle.top-left { top: -8px; left: -8px; cursor: nwse-resize; }
+.resize-handle.top-right { top: -8px; right: -8px; cursor: nesw-resize; }
+.resize-handle.bottom-left { bottom: -8px; left: -8px; cursor: nesw-resize; }
+.resize-handle.bottom-right { bottom: -8px; right: -8px; cursor: nwse-resize; }
+
+/* 可选：添加一个细微的边框或背景色以便调试 */
+/*
+.resize-handle {
+  border: 1px dotted rgba(255, 0, 0, 0.5);
+}
+*/
+
 </style>

packages/frontend/src/components/LayoutRenderer.vue

@@ -328,7 +328,7 @@ const handlePaneResize = (eventData: { panes: Array<{ size: number; [key: string
   display: flex;
   flex-direction: column;
   overflow: hidden; /* 隐藏内部滚动条，由子组件处理 */
-  background-color: #f8f9fa; /* 默认背景，可能被子组件覆盖 */
+  background-color: var(--app-bg-color); /* Use app background */
 }
 
 /* 确保动态加载的组件能正确应用 pane-content 样式 */
@@ -346,17 +346,17 @@ const handlePaneResize = (eventData: { panes: Array<{ size: number; [key: string
    justify-content: center;
    align-items: center;
    text-align: center;
-   color: #adb5bd;
-   background-color: #f8f9fa;
+   color: var(--text-color-secondary); /* Use secondary text color */
+   background-color: var(--header-bg-color); /* Use header background */
    font-size: 0.9em;
-   padding: 1rem;
+   padding: var(--base-padding); /* Use base padding */
 }
 
 /* 增强空会话显示样式 */
 :deep(.empty-session) {
-  background-color: #fcfcfc;
+  background-color: var(--app-bg-color); /* Use app background */
   border-radius: 8px;
-  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.03);
+  /* box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.03); */ /* Optional: Consider removing or using theme variables */
   width: 100%;
   height: 100%;
   display: flex;
@@ -377,24 +377,24 @@ const handlePaneResize = (eventData: { panes: Array<{ size: number; [key: string
 :deep(.empty-session-content i) {
   font-size: 2.5rem;
   margin-bottom: 0.75rem;
-  color: #d1d5db;
+  color: var(--text-color-secondary); /* Use secondary text color */
 }
 
 :deep(.empty-session-content span) {
   font-size: 1.1rem;
   font-weight: 500;
-  color: #9ca3af;
+  color: var(--text-color-secondary); /* Use secondary text color */
   margin-bottom: 0.5rem;
 }
 
 :deep(.empty-session-tip) {
   font-size: 0.85rem;
-  color: #c0c5cc;
+  color: var(--text-color-secondary); /* Use secondary text color */
   margin-top: 0.5rem;
 }
 :deep(.layout-pane-wrapper > .pane-placeholder.error) {
-  color: #dc3545; /* 错误用红色 */
-  background-color: #fdd;
+  color: #dc3545; /* Keep hardcoded error color for now */
+  background-color: #fdd; /* Keep hardcoded error background for now */
 }
 
 

packages/frontend/src/components/NotificationSettings.vue

@@ -118,18 +118,66 @@ const handleSave = (savedSetting: NotificationSetting) => {
 
 <style scoped>
 .notification-settings {
-  padding: 1rem;
+  padding: var(--base-padding, 1rem); /* 使用变量 */
+  /* Inherits text color and background from parent */
 }
 .loading-indicator, .error-message {
-  margin-top: 1rem;
+  margin-top: var(--base-margin, 1rem); /* 使用变量 */
+  color: var(--text-color-secondary); /* 使用次要文本颜色 */
 }
 .error-message {
-  color: var(--bs-danger);
+  color: var(--bs-danger); /* 保留 Bootstrap 变量或特定错误颜色 */
 }
+
+/* Apply variables to list items if needed (assuming Bootstrap classes handle most styling) */
+.list-group-item {
+    background-color: var(--app-bg-color);
+    border-color: var(--border-color);
+    color: var(--text-color);
+}
+.list-group-item .text-muted {
+    color: var(--text-color-secondary);
+}
+/* Apply variables to buttons if not handled by global styles or Bootstrap */
+.btn-primary {
+    background-color: var(--button-bg-color);
+    border-color: var(--button-bg-color);
+    color: var(--button-text-color);
+}
+.btn-primary:hover {
+     background-color: var(--button-hover-bg-color);
+     border-color: var(--button-hover-bg-color);
+}
+.btn-outline-secondary {
+    color: var(--text-color-secondary);
+    border-color: var(--border-color);
+}
+.btn-outline-secondary:hover {
+    background-color: var(--header-bg-color); /* Example hover */
+    color: var(--text-color);
+}
+.btn-outline-danger {
+    color: var(--bs-danger); /* Keep specific color */
+    border-color: var(--bs-danger);
+}
+.btn-outline-danger:hover {
+    background-color: var(--bs-danger);
+    color: var(--button-text-color);
+}
+/* Apply variables to badges if needed */
+.badge.bg-secondary {
+    background-color: var(--text-color-secondary);
+    color: var(--button-text-color); /* Assuming high contrast needed */
+}
+/* Keep success/warning colors for status or define specific variables later */
+/* .badge.bg-success {} */
+/* .badge.bg-warning {} */
+
+
 .modal-placeholder {
-  margin-top: 2rem;
-  padding: 1rem;
-  border: 1px dashed #ccc;
-  background-color: #f8f9fa;
+  margin-top: calc(var(--base-margin, 1rem) * 2); /* 使用变量 */
+  padding: var(--base-padding, 1rem); /* 使用变量 */
+  border: 1px dashed var(--border-color, #ccc); /* 使用变量 */
+  background-color: var(--header-bg-color, #f8f9fa); /* 使用变量 */
 }
 </style>

packages/frontend/src/components/StatusMonitor.vue

@@ -190,9 +190,9 @@ const swapDisplay = computed(() => {
 
 <style scoped>
 .status-monitor {
-  padding: 1rem;
-  border-left: 1px solid #ccc;
-  background-color: #f9f9f9;
+  padding: var(--base-padding); /* Use theme variable */
+  border-left: 1px solid var(--border-color); /* Use theme variable */
+  background-color: var(--app-bg-color); /* Use theme variable */
   height: 100%;
   overflow-y: auto;
   font-size: 0.9em;
@@ -200,17 +200,17 @@ const swapDisplay = computed(() => {
 
 .status-monitor h4 {
   margin-top: 0;
-  margin-bottom: 1rem;
-  border-bottom: 1px solid #eee;
-  padding-bottom: 0.5rem;
+  margin-bottom: var(--base-padding); /* Use theme variable */
+  border-bottom: 1px solid var(--border-color); /* Use theme variable */
+  padding-bottom: var(--base-margin); /* Use theme variable */
   font-size: 1em;
-  color: #333;
+  color: var(--text-color); /* Use theme variable */
 }
 
 .loading-status, .status-error {
-    color: #888;
+    color: var(--text-color-secondary); /* Use theme variable */
     text-align: center;
-    margin-top: 1rem;
+    margin-top: var(--base-padding); /* Use theme variable */
 }
 .status-error {
     color: #dc3545;
@@ -248,7 +248,7 @@ const swapDisplay = computed(() => {
     text-overflow: ellipsis;
     /* No longer needs grid-column span */
     text-align: left;
-    color: #333;
+    color: var(--text-color); /* Use theme variable */
 }
 
 /* Specific style for OS name row - Keep consistent with general status-item */
@@ -265,20 +265,20 @@ const swapDisplay = computed(() => {
     text-overflow: ellipsis;
     text-align: left; /* Explicitly left align text */
     /* justify-self: start; No longer needed with 2-col grid */
-    color: #333;
+    color: var(--text-color); /* Use theme variable */
     min-width: auto; /* Override generic min-width */
 }
 
 
 .status-item label {
   font-weight: bold;
-  color: #555;
+  color: var(--text-color-secondary); /* Use theme variable */
   text-align: left; /* 改为左对齐 */
   white-space: nowrap;
 }
 
 .progress-bar-container {
-  background-color: #e9ecef;
+  background-color: var(--header-bg-color); /* Use theme variable */
   border-radius: 0.25rem;
   height: 1rem; /* Adjust height */
   overflow: hidden;
@@ -286,7 +286,7 @@ const swapDisplay = computed(() => {
 }
 
 .progress-bar {
-  background-color: #007bff; /* Blue for CPU/Mem/Disk */
+  background-color: var(--button-bg-color); /* Use theme variable for default bar */
   height: 100%;
   transition: width 0.3s ease-in-out;
   text-align: center;
@@ -303,7 +303,7 @@ const swapDisplay = computed(() => {
   font-variant-numeric: tabular-nums; /* Keep numbers aligned */
   min-width: 45px; /* Ensure space for percentage */
   text-align: left; /* 改为左对齐 */
-  color: #333;
+  color: var(--text-color); /* Use theme variable */
 }
 
 .mem-disk-details {

packages/frontend/src/components/TerminalTabBar.vue

@@ -161,11 +161,17 @@ const handleTogglePane = (paneName: PaneName) => {
 <style scoped>
 .terminal-tab-bar {
   display: flex;
-  background-color: #e0e0e0; /* 标签栏背景色 */
-  border-bottom: 1px solid #bdbdbd;
+  background-color: var(--header-bg-color, #e0e0e0); /* 使用变量 */
+  /* border-bottom: 1px solid var(--border-color, #bdbdbd); */ /* 移除底部边框，让主内容区处理 */
+  border: 1px solid var(--border-color, #bdbdbd); /* 添加完整边框 */
+  border-bottom: none; /* 明确移除底部边框 */
   white-space: nowrap;
   height: 2.5rem; /* 固定标签栏高度 */
   box-sizing: border-box; /* 确保 padding 不会增加总高度 */
+  border-radius: 5px 5px 0 0; /* Top-left, Top-right, Bottom-right, Bottom-left */
+  margin: 0 var(--base-margin, 0.5rem); /* Add horizontal margin to match content area */
+  margin-top: var(--base-margin, 0.5rem); /* Add top margin */
+  overflow: hidden; /* Clip content to rounded corners */
 }
 
 /* 包裹标签和+按钮的容器 */
@@ -211,23 +217,22 @@ const handleTogglePane = (paneName: PaneName) => {
   padding: 0 0.8rem; /* 基础内边距 */
   height: 100%;
   cursor: pointer;
-  border-right: 1px solid #bdbdbd;
+  border-right: 1px solid var(--border-color, #bdbdbd); /* 使用变量 */
   box-sizing: border-box;
-  background-color: #f0f0f0; /* 未激活标签背景 */
-  color: #616161; /* 未激活标签文字颜色 */
+  background-color: var(--app-bg-color, #f0f0f0); /* 使用变量 - 未激活标签背景 */
+  color: var(--text-color-secondary, #616161); /* 使用变量 - 未激活标签文字颜色 */
   transition: background-color 0.2s ease, color 0.2s ease;
-  /* max-width: 200px; */ /* 移除最大宽度限制 */
   position: relative; /* 保持相对定位，以防万一需要定位子元素 */
 }
 
 .tab-item:hover {
-  background-color: #e0e0e0; /* 悬停时背景 */
+  background-color: var(--header-bg-color, #e0e0e0); /* 使用变量 - 悬停时背景 */
 }
 
 .tab-item.active {
-  background-color: #ffffff; /* 激活标签背景 */
-  color: #333333; /* 激活标签文字颜色 */
-  /* 移除所有可能影响高度的边框或伪元素 */
+  background-color: var(--app-bg-color, #ffffff); /* 使用变量 - 激活标签背景 */
+  color: var(--text-color, #333333); /* 使用变量 - 激活标签文字颜色 */
+  border-bottom-color: transparent; /* 隐藏激活标签的底部边框，模拟连接效果 */
   position: relative;
   z-index: 1;
 }
@@ -244,10 +249,9 @@ const handleTogglePane = (paneName: PaneName) => {
 }
 
 .close-tab-button {
-  /* 恢复简单布局 */
   background: none;
   border: none;
-  color: #9e9e9e;
+  color: var(--text-color-secondary, #9e9e9e); /* 使用变量 */
   cursor: pointer;
   font-size: 1.1em;
   padding: 0 0.3rem;
@@ -262,27 +266,27 @@ const handleTogglePane = (paneName: PaneName) => {
 }
 
 .close-tab-button:hover {
-  background-color: #bdbdbd;
-  color: #ffffff;
+  background-color: var(--border-color, #bdbdbd); /* 使用变量 */
+  color: var(--app-bg-color, #ffffff); /* 使用变量 */
 }
 
 .tab-item.active .close-tab-button {
-    color: #757575;
+    color: var(--text-color-secondary, #757575); /* 使用变量 */
 }
 .tab-item.active .close-tab-button:hover {
-    background-color: #e0e0e0;
-    color: #333333;
+    background-color: var(--header-bg-color, #e0e0e0); /* 使用变量 */
+    color: var(--text-color, #333333); /* 使用变量 */
 }
 
 /* 添加新标签按钮样式 */
 .add-tab-button {
   background: none;
   border: none;
-  border-left: 1px solid #bdbdbd; /* 恢复左侧分隔线 */
+  border-left: 1px solid var(--border-color, #bdbdbd); /* 使用变量 */
   padding: 0 0.8rem;
   cursor: pointer;
   font-size: 1.1em;
-  color: #616161;
+  color: var(--text-color-secondary, #616161); /* 使用变量 */
   display: flex;
   align-items: center;
   justify-content: center;
@@ -290,7 +294,7 @@ const handleTogglePane = (paneName: PaneName) => {
   flex-shrink: 0; /* 防止按钮被压缩 */
 }
 .add-tab-button:hover {
-  background-color: #d0d0d0;
+  background-color: var(--header-bg-color, #d0d0d0); /* 使用变量 */
 }
 .add-tab-button i {
   line-height: 1; /* 确保图标垂直居中 */
@@ -309,11 +313,11 @@ const handleTogglePane = (paneName: PaneName) => {
 .layout-config-button {
   background: none;
   border: none;
-  border-left: 1px solid #bdbdbd; /* 左侧分隔线 */
+  border-left: 1px solid var(--border-color, #bdbdbd); /* 使用变量 */
   padding: 0 0.8rem;
   cursor: pointer;
   font-size: 1.1em; /* 与其他按钮一致 */
-  color: #616161;
+  color: var(--text-color-secondary, #616161); /* 使用变量 */
   display: flex;
   align-items: center;
   justify-content: center;
@@ -321,7 +325,7 @@ const handleTogglePane = (paneName: PaneName) => {
   flex-shrink: 0;
 }
 .layout-config-button:hover {
-  background-color: #d0d0d0;
+  background-color: var(--header-bg-color, #d0d0d0); /* 使用变量 */
 }
 .layout-config-button i {
   line-height: 1;
@@ -343,7 +347,7 @@ const handleTogglePane = (paneName: PaneName) => {
 }
 
 .popup-content {
-  background-color: white;
+  background-color: var(--app-bg-color, white); /* 使用变量 */
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
@@ -363,25 +367,25 @@ const handleTogglePane = (paneName: PaneName) => {
   border: none;
   font-size: 1.5rem;
   cursor: pointer;
-  color: #aaa;
+  color: var(--text-color-secondary, #aaa); /* 使用变量 */
   line-height: 1;
 }
 .popup-close-button:hover {
-  color: #333;
+  color: var(--text-color, #333); /* 使用变量 */
 }
 
 .popup-content h3 {
   margin-top: 0;
   margin-bottom: 15px;
   text-align: center;
-  color: #333;
+  color: var(--text-color, #333); /* 使用变量 */
 }
 
 .popup-connection-list {
   flex-grow: 1; /* 让列表占据剩余空间 */
   overflow-y: auto; /* 列表内容滚动 */
   /* 可能需要覆盖 WorkspaceConnectionList 的一些默认样式 */
-  border: 1px solid #eee;
+  border: 1px solid var(--border-color); /* Use theme variable */
   border-radius: 4px;
 }
 /* 覆盖 WorkspaceConnectionList 内部样式（如果需要） */
@@ -390,6 +394,7 @@ const handleTogglePane = (paneName: PaneName) => {
 /* } */
 :deep(.popup-connection-list .connection-list-area) {
   padding: 0; /* 保持移除内边距 */
+  background-color: var(--app-bg-color); /* 确保列表背景 */
 }
 
 /* 调整：旧布局菜单容器样式 */
@@ -399,7 +404,7 @@ const handleTogglePane = (paneName: PaneName) => {
   align-items: center;
   height: 100%;
   /* margin-left: auto; */ /* 移除：由父容器 .action-buttons-container 控制 */
-  border-left: 1px solid #bdbdbd; /* 保持左侧分隔线 */
+  border-left: 1px solid var(--border-color, #bdbdbd); /* 使用变量 */
   flex-shrink: 0; /* 保持：防止被压缩 */
 }
 
@@ -407,11 +412,11 @@ const handleTogglePane = (paneName: PaneName) => {
 .layout-menu-button {
   background: none;
   border: none;
-  /* border-left: 1px solid #bdbdbd; */ /* 移除按钮左侧分隔线 */
+  /* border-left: 1px solid var(--border-color, #bdbdbd); */ /* 移除按钮左侧分隔线 */
   padding: 0 0.8rem;
   cursor: pointer;
   font-size: 1.1em;
-  color: #616161;
+  color: var(--text-color-secondary, #616161); /* 使用变量 */
   display: flex;
   align-items: center;
   justify-content: center;
@@ -419,7 +424,7 @@ const handleTogglePane = (paneName: PaneName) => {
   flex-shrink: 0;
 }
 .layout-menu-button:hover {
-  background-color: #d0d0d0;
+  background-color: var(--header-bg-color, #d0d0d0); /* 使用变量 */
 }
 .layout-menu-button i {
   line-height: 1;
@@ -429,9 +434,9 @@ const handleTogglePane = (paneName: PaneName) => {
   position: absolute; /* 恢复绝对定位 */
   top: 100%; /* 定位在按钮下方 */
   right: 0; /* 对齐到右侧 */
-  background-color: white; /* 恢复默认背景色 */
+  background-color: var(--app-bg-color, white); /* 使用变量 */
   /* min-height: 20px; */ /* 移除临时调试最小高度 */
-  border: 1px solid #ccc;
+  border: 1px solid var(--border-color, #ccc); /* 使用变量 */
   box-shadow: 0 2px 5px rgba(0,0,0,0.15);
   z-index: 9999; /* 保持高 z-index */
   min-width: 150px; /* 最小宽度 */
@@ -451,10 +456,11 @@ const handleTogglePane = (paneName: PaneName) => {
   white-space: nowrap;
   display: flex;
   align-items: center;
+  color: var(--text-color); /* 使用变量 */
 }
 
 .layout-menu-dropdown li:hover {
-  background-color: #f0f0f0;
+  background-color: var(--header-bg-color, #f0f0f0); /* 使用变量 */
 }
 
 .layout-menu-dropdown .checkmark {

packages/frontend/src/components/WorkspaceConnectionList.vue

@@ -265,41 +265,43 @@ const handleOpenInNewTab = (connectionId: number) => {
   display: flex;
   flex-direction: column;
   overflow: hidden; /* 防止内部滚动条影响布局 */
-  background-color: #f8f9fa;
+  background-color: var(--app-bg-color); /* Use theme variable */
   font-size: 0.9em;
 }
 
 .search-add-bar {
   display: flex;
-  padding: 0.5rem;
-  border-bottom: 1px solid #dee2e6;
-  background-color: #e9ecef; /* 给搜索栏一个背景色 */
+  padding: var(--base-margin); /* Use theme variable */
+  border-bottom: 1px solid var(--border-color); /* Use theme variable */
+  background-color: var(--header-bg-color); /* Use theme variable */
 }
 
 .search-input {
   flex-grow: 1;
   padding: 0.4rem 0.6rem;
-  border: 1px solid #ced4da;
+  border: 1px solid var(--border-color); /* Use theme variable */
   border-radius: 4px 0 0 4px; /* 左侧圆角 */
   font-size: 0.9em;
   outline: none;
+  background-color: var(--app-bg-color); /* Use theme variable */
+  color: var(--text-color); /* Use theme variable */
 }
 .search-input:focus {
-  border-color: #80bdff;
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+  border-color: var(--button-bg-color); /* Use theme variable */
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Keep existing shadow or define a variable */
 }
 
 .add-button {
   padding: 0.4rem 0.8rem;
-  border: 1px solid #ced4da;
+  border: 1px solid var(--border-color); /* Use theme variable */
   border-left: none; /* 移除左边框，与输入框合并 */
-  background-color: #f8f9fa;
+  background-color: var(--app-bg-color); /* Use theme variable */
   cursor: pointer;
   border-radius: 0 4px 4px 0; /* 右侧圆角 */
-  color: #495057;
+  color: var(--text-color); /* Use theme variable */
 }
 .add-button:hover {
-  background-color: #e2e6ea;
+  background-color: var(--header-bg-color); /* Use theme variable */
 }
 .add-button i {
   font-size: 1em; /* 图标大小 */
@@ -308,14 +310,13 @@ const handleOpenInNewTab = (connectionId: number) => {
 .connection-list-area {
   flex-grow: 1; /* 占据剩余空间 */
   overflow-y: auto; /* 列表内容滚动 */
-  padding: 0.5rem 0;
 }
 
 
 .loading, .error, .no-connections, .no-results {
-  padding: 1rem;
+  padding: var(--base-padding); /* Use theme variable */
   text-align: center;
-  color: #6c757d;
+  color: var(--text-color-secondary); /* Use theme variable */
 }
 .error {
     color: #dc3545;
@@ -327,19 +328,20 @@ const handleOpenInNewTab = (connectionId: number) => {
 
 .add-connection-button {
     display: block;
-    width: calc(100% - 1rem); /* Adjust width */
-    margin: 0.5rem;
-    padding: 0.5rem;
+    width: calc(100% - 2 * var(--base-margin)); /* Use theme variable */
+    margin: var(--base-margin); /* Use theme variable */
+    padding: var(--base-margin); /* Use theme variable */
     text-align: left;
-    background-color: #e9ecef;
-    border: 1px solid #ced4da;
+    background-color: var(--header-bg-color); /* Use theme variable */
+    border: 1px solid var(--border-color); /* Use theme variable */
     border-radius: 4px;
     cursor: pointer;
     font-size: 0.9em;
-    color: #495057;
+    color: var(--text-color); /* Use theme variable */
 }
 .add-connection-button:hover {
-    background-color: #dee2e6;
+    background-color: var(--header-bg-color); /* Use theme variable (or darker variant) */
+    filter: brightness(0.95); /* Example: slightly darken */
 }
 .add-connection-button i {
     margin-right: 0.5rem;
@@ -354,15 +356,16 @@ const handleOpenInNewTab = (connectionId: number) => {
   padding: 0.4rem 0.8rem;
   font-weight: bold;
   cursor: pointer;
-  background-color: #e9ecef;
-  border-top: 1px solid #dee2e6;
-  border-bottom: 1px solid #dee2e6;
+  background-color: var(--header-bg-color); /* Use theme variable */
+  border-top: 1px solid var(--border-color); /* Use theme variable */
+  border-bottom: 1px solid var(--border-color); /* Use theme variable */
   display: flex;
   align-items: center;
-  color: #495057;
+  color: var(--text-color); /* Use theme variable */
 }
 .group-header:hover {
-    background-color: #ced4da;
+    background-color: var(--header-bg-color); /* Use theme variable */
+    filter: brightness(0.95); /* Example: slightly darken on hover */
 }
 
 .group-header i {
@@ -371,13 +374,7 @@ const handleOpenInNewTab = (connectionId: number) => {
   text-align: center;
   transition: transform 0.2s ease-in-out;
 }
-/* Rotate chevron when collapsed */
-.group-header i.fa-chevron-right {
-    /* transform: rotate(0deg); */ /* Default state */
-}
-.group-header i.fa-chevron-down {
-    /* transform: rotate(90deg); */ /* Rotated state */
-}
+
 
 
 .connection-items {
@@ -391,19 +388,20 @@ const handleOpenInNewTab = (connectionId: number) => {
   cursor: pointer;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid #f1f3f5; /* Lighter separator */
+  border-bottom: 1px solid var(--border-color); /* Use theme variable */
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  color: var(--text-color); /* Use theme variable */
 }
 
 .connection-item:hover {
-  background-color: #e9ecef;
+  background-color: var(--header-bg-color); /* Use theme variable */
 }
 
 .connection-icon {
   margin-right: 0.6rem;
-  color: #6c757d;
+  color: var(--text-color-secondary); /* Use theme variable */
   width: 1em;
   text-align: center;
 }
@@ -418,11 +416,11 @@ const handleOpenInNewTab = (connectionId: number) => {
 /* Context Menu Styles */
 .context-menu {
   position: fixed;
-  background-color: white;
-  border: 1px solid #ccc;
-  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
+  background-color: var(--app-bg-color); /* Use theme variable */
+  border: 1px solid var(--border-color); /* Use theme variable */
+  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15); /* Keep shadow or define variable */
   border-radius: 4px;
-  padding: 0.5rem 0;
+  padding: var(--base-margin) 0; /* Use theme variable */
   z-index: 1001; /* Above the list */
   min-width: 150px;
 }
@@ -438,14 +436,15 @@ const handleOpenInNewTab = (connectionId: number) => {
   cursor: pointer;
   display: flex;
   align-items: center;
+  color: var(--text-color); /* Use theme variable */
 }
 .context-menu li:hover {
-  background-color: #f0f0f0;
+  background-color: var(--header-bg-color); /* Use theme variable */
 }
 .context-menu li i {
     margin-right: 0.75rem;
     width: 1em;
     text-align: center;
-    color: #495057;
+    color: var(--text-color); /* Use theme variable */
 }
 </style>