diff --git a/packages/frontend/src/App.vue b/packages/frontend/src/App.vue
index 6954a4c..3ddc5e5 100644
--- a/packages/frontend/src/App.vue
+++ b/packages/frontend/src/App.vue
@@ -39,17 +39,20 @@ const closeStyleCustomizer = () => {
   <div id="app-container">
     <header>
       <nav>
-        <RouterLink to="/">{{ t('nav.dashboard') }}</RouterLink> |
-        <RouterLink to="/connections">{{ t('nav.connections') }}</RouterLink> |
-         <RouterLink to="/workspace">{{ t('nav.terminal') }}</RouterLink> | <!-- 新增终端链接 -->
-         <RouterLink to="/proxies">{{ t('nav.proxies') }}</RouterLink> | <!-- 新增代理链接 -->
-         <!-- <RouterLink to="/tags">{{ t('nav.tags') }}</RouterLink> | --> <!-- 移除标签链接 -->
-         <RouterLink to="/notifications">{{ t('nav.notifications') }}</RouterLink> | <!-- 新增通知链接 -->
-         <RouterLink to="/audit-logs">{{ t('nav.auditLogs') }}</RouterLink> | <!-- 新增审计日志链接 -->
-         <RouterLink to="/settings">{{ t('nav.settings') }}</RouterLink> | <!-- 新增设置链接 -->
-        <a href="#" @click.prevent="openStyleCustomizer" :title="t('nav.customizeStyle')">🎨</a> | <!-- 点击调用 openStyleCustomizer -->
-        <RouterLink v-if="!isAuthenticated" to="/login">{{ t('nav.login') }}</RouterLink>
-        <a href="#" v-if="isAuthenticated" @click.prevent="handleLogout">{{ t('nav.logout') }}</a>
+        <div class="nav-left"> <!-- Group left-aligned links -->
+            <RouterLink to="/">{{ t('nav.dashboard') }}</RouterLink>
+            <RouterLink to="/connections">{{ t('nav.connections') }}</RouterLink>
+            <RouterLink to="/workspace">{{ t('nav.terminal') }}</RouterLink>
+            <RouterLink to="/proxies">{{ t('nav.proxies') }}</RouterLink>
+            <RouterLink to="/notifications">{{ t('nav.notifications') }}</RouterLink>
+            <RouterLink to="/audit-logs">{{ t('nav.auditLogs') }}</RouterLink>
+            <RouterLink to="/settings">{{ t('nav.settings') }}</RouterLink>
+        </div>
+        <div class="nav-right"> <!-- Group right-aligned links -->
+            <a href="#" @click.prevent="openStyleCustomizer" :title="t('nav.customizeStyle')">🎨</a>
+            <RouterLink v-if="!isAuthenticated" to="/login">{{ t('nav.login') }}</RouterLink>
+            <a href="#" v-if="isAuthenticated" @click.prevent="handleLogout">{{ t('nav.logout') }}</a>
+        </div>
       </nav>
     </header>
 
@@ -79,31 +82,101 @@ const closeStyleCustomizer = () => {
   flex-direction: column;
   min-height: 100vh;
   font-family: var(--font-family-sans-serif); /* 使用字体变量 */
+  background-color: var(--app-bg-color); /* Set base background for the whole app */
 }
 
 header {
   background-color: var(--header-bg-color); /* 使用头部背景色变量 */
-  padding: var(--base-padding); /* 使用基础内边距变量 */
+  padding: 0 calc(var(--base-padding) * 1.5); /* Adjust padding: 0 top/bottom, more left/right */
   border-bottom: 1px solid var(--border-color); /* 使用边框颜色变量 */
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); /* Softer shadow */
+  height: 55px; /* Slightly taller header */
+  display: flex; /* Use flexbox for alignment */
+  align-items: center; /* Center items vertically */
+  position: sticky; /* Make header sticky */
+  top: 0;
+  z-index: 10; /* Ensure header stays on top */
+}
+
+nav {
+  display: flex;
+  align-items: center; /* Align nav items vertically */
+  width: 100%; /* Make nav take full width */
+  justify-content: space-between; /* Space out left and right groups */
+}
+
+.nav-left, .nav-right {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--base-margin) / 3); /* Add small gap between items */
 }
 
 nav a {
-  margin: 0 var(--base-margin); /* 使用基础外边距变量 */
   text-decoration: none;
-  color: var(--link-color); /* 使用链接颜色变量 */
+  color: var(--text-color-secondary); /* Use secondary text color for inactive links */
+  padding: 0.6rem 0.9rem; /* Adjust padding */
+  border-radius: 6px; /* Slightly more rounded */
+  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; /* Smooth transition */
+  font-size: 0.9rem;
+  line-height: 1;
+  white-space: nowrap;
+  position: relative; /* For potential pseudo-elements */
+  border: 1px solid transparent; /* Add transparent border for layout consistency */
 }
 
 nav a:hover {
-  color: var(--link-hover-color); /* 使用链接悬停颜色变量 */
+  color: var(--link-hover-color); /* Use specific hover color */
+  background-color: rgba(128, 128, 128, 0.1); /* Subtle grey background on hover */
 }
 
 nav a.router-link-exact-active {
-  font-weight: bold;
-  color: var(--link-active-color); /* 使用激活链接颜色变量 */
+  font-weight: 500; /* Medium weight */
+  color: var(--link-active-color); /* Use active link color */
+  background-color: transparent; /* Remove background for active link */
+  /* Add a bottom border for active state */
 }
 
+/* Add a pseudo-element for the active indicator */
+nav a.router-link-exact-active::after {
+    content: '';
+    position: absolute;
+    bottom: -1px; /* Position slightly below the text, aligning with header border */
+    left: 10%; /* Start slightly indented */
+    right: 10%; /* End slightly indented */
+    height: 2px; /* Thickness of the indicator */
+    background-color: var(--link-active-color); /* Color of the indicator */
+    border-radius: 1px;
+}
+
+
+/* Style the theme icon link */
+nav a[title*="t('nav.customizeStyle')"] {
+    padding: 0.5rem 0.7rem; /* Adjust padding for icon */
+    font-size: 1.1rem; /* Make icon slightly larger */
+    color: var(--text-color-secondary); /* Match other inactive links */
+}
+nav a[title*="t('nav.customizeStyle')"]:hover {
+    color: var(--link-hover-color);
+    background-color: rgba(128, 128, 128, 0.1);
+}
+
+/* Style logout/login link */
+.nav-right a {
+    /* Specific styles if needed, e.g., slightly different color */
+    color: var(--text-color-secondary);
+}
+.nav-right a:hover {
+    color: var(--link-hover-color);
+    background-color: rgba(128, 128, 128, 0.1);
+}
+
+
 main {
   flex-grow: 1;
+  /* padding: var(--base-padding); */ /* Keep padding removed from main */
+}
+
+footer {
   padding: var(--base-padding); /* 使用基础内边距变量 */
 }
 
diff --git a/packages/frontend/src/components/CommandInputBar.vue b/packages/frontend/src/components/CommandInputBar.vue
index a56bd2f..110d846 100644
--- a/packages/frontend/src/components/CommandInputBar.vue
+++ b/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 */
 }
 
 /* 可以添加按钮样式 */
diff --git a/packages/frontend/src/components/FileManager.vue b/packages/frontend/src/components/FileManager.vue
index 192a5ce..2a284a2 100644
--- a/packages/frontend/src/components/FileManager.vue
+++ b/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 {
diff --git a/packages/frontend/src/components/LayoutConfigurator.vue b/packages/frontend/src/components/LayoutConfigurator.vue
index 20f843c..7006993 100644
--- a/packages/frontend/src/components/LayoutConfigurator.vue
+++ b/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>
diff --git a/packages/frontend/src/components/LayoutRenderer.vue b/packages/frontend/src/components/LayoutRenderer.vue
index 3244964..cdb6376 100644
--- a/packages/frontend/src/components/LayoutRenderer.vue
+++ b/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 */
 }
 
 
diff --git a/packages/frontend/src/components/NotificationSettings.vue b/packages/frontend/src/components/NotificationSettings.vue
index db9bee8..d1ce9ec 100644
--- a/packages/frontend/src/components/NotificationSettings.vue
+++ b/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>
diff --git a/packages/frontend/src/components/StatusMonitor.vue b/packages/frontend/src/components/StatusMonitor.vue
index 96ee25f..504436f 100644
--- a/packages/frontend/src/components/StatusMonitor.vue
+++ b/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 {
diff --git a/packages/frontend/src/components/TerminalTabBar.vue b/packages/frontend/src/components/TerminalTabBar.vue
index 372c2e1..967c487 100644
--- a/packages/frontend/src/components/TerminalTabBar.vue
+++ b/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 {
diff --git a/packages/frontend/src/components/WorkspaceConnectionList.vue b/packages/frontend/src/components/WorkspaceConnectionList.vue
index 8b4db72..43501bb 100644
--- a/packages/frontend/src/components/WorkspaceConnectionList.vue
+++ b/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>
diff --git a/packages/frontend/src/views/AuditLogView.vue b/packages/frontend/src/views/AuditLogView.vue
index 1e5905c..2e00c1f 100644
--- a/packages/frontend/src/views/AuditLogView.vue
+++ b/packages/frontend/src/views/AuditLogView.vue
@@ -145,24 +145,155 @@ const paginationRange = computed(() => {
 
 <style scoped>
 .audit-log-view {
-  padding: 20px;
+  padding: var(--base-padding, 20px); /* 使用变量 */
+  color: var(--text-color);
+  background-color: var(--app-bg-color);
+  min-height: calc(100vh - 60px); /* Example: Adjust based on header/footer height */
 }
+
+.audit-log-view h1 {
+    margin-bottom: calc(var(--base-margin, 1rem) * 2); /* Add space below title */
+    color: var(--text-color); /* Ensure title color */
+}
+
 .loading-indicator, .error-message {
-  margin-top: 1rem;
+  margin-top: var(--base-margin, 1rem); /* 使用变量 */
   text-align: center;
+  color: var(--text-color-secondary); /* 使用次要文本颜色 */
 }
+
 .error-message {
-  color: var(--bs-danger);
+  color: var(--bs-danger); /* 保留特定错误颜色 */
 }
+
+/* 表格容器，增加边框和圆角 */
+.table-container {
+    border: 1px solid var(--border-color, #dee2e6);
+    border-radius: 5px;
+    overflow: hidden; /* Ensures border-radius clips table corners */
+    margin-top: var(--base-margin, 1rem);
+    background-color: var(--app-bg-color); /* Ensure background */
+}
+
+/* 表格样式 */
+.table {
+    width: 100%;
+    /* margin-top: var(--base-margin, 1rem); */ /* Moved margin to container */
+    border-collapse: collapse; /* 移除单元格间距 */
+    /* background-color: var(--app-bg-color); */ /* Background on container */
+    color: var(--text-color); /* 确保文本颜色 */
+    border: none; /* Remove table's own border if container has one */
+}
+
+.table th,
+.table td {
+    padding: 0.8rem 1rem; /* Slightly increase padding */
+    vertical-align: middle; /* Align vertically in the middle */
+    border-top: 1px solid var(--border-color, #dee2e6); /* 使用变量 */
+    text-align: left; /* 确保左对齐 */
+}
+
+/* Remove top border for the first row */
+.table tbody tr:first-child td {
+    border-top: none;
+}
+
+
+.table thead th {
+    padding: 0.8rem 1rem; /* Match cell padding */
+    vertical-align: bottom;
+    border-bottom: 2px solid var(--border-color, #dee2e6); /* 使用变量，加粗底部边框 */
+    border-top: none; /* No top border for header */
+    background-color: var(--header-bg-color, #f8f9fa); /* 使用变量 */
+    color: var(--text-color); /* 确保表头文本颜色 */
+    font-weight: 600; /* Slightly less bold */
+    white-space: nowrap; /* Prevent header text wrapping */
+}
+
+/* 条纹样式 */
+.table-striped tbody tr:nth-of-type(odd) {
+     background-color: var(--header-bg-color, #f8f9fa); /* Use header bg for subtle stripe */
+     /* Ensure text color remains readable */
+     color: var(--text-color);
+}
+.table-striped tbody tr:nth-of-type(even) {
+     background-color: var(--app-bg-color); /* Ensure even rows match app background */
+}
+
+
+/* 悬停样式 */
+.table-hover tbody tr:hover {
+    background-color: rgba(0, 0, 0, 0.05); /* Subtle hover effect */
+    /* Or use a variable like --row-hover-bg-color */
+    cursor: default; /* Indicate non-interactive rows */
+}
+
+
 pre {
   white-space: pre-wrap; /* Allow wrapping */
   word-break: break-all; /* Break long strings */
-  background-color: #f8f9fa;
-  padding: 0.5rem;
-  border-radius: 0.25rem;
-  font-size: 0.9em;
+  background-color: var(--app-bg-color); /* Match app background */
+  padding: calc(var(--base-padding, 0.5rem) * 0.8); /* Slightly smaller padding */
+  border: 1px solid var(--border-color, #dee2e6); /* 添加边框 */
+  border-radius: 4px; /* Consistent border radius */
+  font-size: 0.85em; /* Slightly smaller font */
+  color: var(--text-color); /* 确保文本颜色 */
+  max-height: 150px; /* Limit height */
+  overflow-y: auto; /* Add scroll if needed */
+  margin: 0; /* Remove default margin */
 }
+
+/* 分页样式 */
 .pagination {
-    margin-top: 1.5rem;
+    margin-top: calc(var(--base-margin, 1rem) * 1.5); /* 使用变量 */
+}
+
+.page-item .page-link {
+    color: var(--link-color, #007bff); /* 使用变量 */
+    background-color: var(--app-bg-color);
+    border: 1px solid var(--border-color, #dee2e6);
+    margin: 0 2px; /* Add small horizontal margin */
+    border-radius: 4px; /* Add border radius */
+    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out; /* Smooth transition */
+}
+
+.page-item.active .page-link {
+    z-index: 3;
+    color: var(--button-text-color, #fff); /* 使用变量 */
+    background-color: var(--button-bg-color, #007bff); /* 使用变量 */
+    border-color: var(--button-bg-color, #007bff); /* 使用变量 */
+}
+
+.page-item.disabled .page-link {
+    color: var(--text-color-secondary, #6c757d); /* 使用变量 */
+    pointer-events: none;
+    background-color: var(--app-bg-color);
+    border-color: var(--border-color, #dee2e6);
+    opacity: 0.65; /* Indicate disabled state */
+}
+
+.page-link:hover:not(.active) { /* Apply hover only if not active */
+    color: var(--link-hover-color, #0056b3); /* 使用变量 */
+    background-color: var(--header-bg-color, #e9ecef); /* 使用变量 */
+    border-color: var(--border-color, #dee2e6);
+}
+
+/* Remove border from the pagination container itself */
+.pagination {
+    border: none;
+}
+
+/* Alert 样式 */
+.alert-info {
+    color: var(--text-color); /* 调整颜色使其更通用 */
+    background-color: var(--header-bg-color, #e9ecef); /* 使用变量 */
+    border-color: var(--border-color, #dee2e6); /* 使用变量 */
+    padding: var(--base-padding, 1rem);
+    margin-top: var(--base-margin, 1rem);
+    border-radius: 0.25rem;
+}
+
+.text-muted {
+     color: var(--text-color-secondary) !important; /* 确保覆盖 Bootstrap */
 }
 </style>
diff --git a/packages/frontend/src/views/CommandHistoryView.vue b/packages/frontend/src/views/CommandHistoryView.vue
index 0973fa7..6b5fd6e 100644
--- a/packages/frontend/src/views/CommandHistoryView.vue
+++ b/packages/frontend/src/views/CommandHistoryView.vue
@@ -1,19 +1,21 @@
 <template>
   <div class="command-history-view">
     <!-- 移除 PaneTitleBar -->
-    <div class="history-controls">
-      <input
-        type="text"
-        :placeholder="$t('commandHistory.searchPlaceholder', '搜索历史记录...')"
-        :value="searchTerm"
-        @input="updateSearchTerm($event)"
-        class="search-input"
-      />
-      <button @click="confirmClearAll" class="clear-button" :title="$t('commandHistory.clear', '清空')">
-        <i class="fas fa-trash-alt"></i> <!-- 假设使用 Font Awesome -->
-      </button>
-    </div>
+    <!-- Removed original top controls -->
     <div class="history-list-container">
+      <!-- Moved controls inside the container -->
+      <div class="embedded-controls">
+        <input
+          type="text"
+          :placeholder="$t('commandHistory.searchPlaceholder', '搜索历史记录...')"
+          :value="searchTerm"
+          @input="updateSearchTerm($event)"
+          class="search-input"
+        />
+        <button @click="confirmClearAll" class="clear-button" :title="$t('commandHistory.clear', '清空')">
+          <i class="fas fa-trash-alt"></i>
+        </button>
+      </div>
       <ul v-if="filteredHistory.length > 0" class="history-list">
         <li
           v-for="entry in filteredHistory"
@@ -120,45 +122,71 @@ const executeCommand = (command: string) => {
   flex-direction: column;
   height: 100%; /* 填充父 Pane 高度 */
   overflow: hidden;
-  background-color: var(--color-bg-secondary);
+  background-color: var(--app-bg-color); /* Use standard app background */
+  padding: 0.5rem; /* Keep overall padding */
+  box-sizing: border-box;
 }
 
-.history-controls {
+/* Remove original .history-controls styles */
+/* .history-controls { ... } */
+
+/* Styles for controls embedded within the list container */
+.embedded-controls {
   display: flex;
   align-items: center;
-  padding: 8px;
-  border-bottom: 1px solid var(--color-border);
-  background-color: var(--color-bg-tertiary);
-  flex-shrink: 0; /* 防止被压缩 */
+  padding: 0.5rem; /* Add padding around embedded controls */
+  /* Removed border-bottom and margin-bottom */
+  flex-shrink: 0;
+  gap: 0.25rem;
 }
 
 .search-input {
   flex-grow: 1;
-  padding: 6px 8px;
-  border: 1px solid var(--color-border);
-  border-radius: 3px;
-  background-color: var(--color-input-bg);
-  color: var(--color-text);
-  margin-right: 8px;
+  min-width: 8px; /* Added smaller min-width */
+  padding: 0.3rem 0.5rem; /* Reduced padding */
+  border: 1px solid var(--border-color); /* Use standard border color */
+  border-radius: 4px; /* Consistent border radius */
+  background-color: var(--app-bg-color); /* Use app background */
+  color: var(--text-color); /* Use standard text color */
+  /* margin-right: 8px; */ /* Replaced by gap */
   font-size: 0.9em;
 }
+.search-input:focus {
+    outline: none;
+    border-color: var(--button-bg-color); /* Highlight border on focus */
+    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); /* Example focus shadow */
+}
 
 .clear-button {
   background: none;
-  border: none;
-  color: var(--color-text-secondary);
+  border: 1px solid var(--border-color); /* Add border */
+  color: var(--text-color-secondary); /* Use standard secondary text color */
   cursor: pointer;
-  padding: 5px;
-  font-size: 1.1em;
+  padding: 0.3rem 0.5rem; /* Reduced padding */
+  font-size: 0.9em; /* Match input font size */
   line-height: 1;
+  border-radius: 4px; /* Consistent border radius */
+  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
 }
 .clear-button:hover {
-  color: var(--color-danger);
+  color: var(--bs-danger, red); /* Use danger color on hover */
+  border-color: var(--bs-danger, red);
+  background-color: rgba(220, 53, 69, 0.1); /* Subtle danger background */
 }
+.clear-button i {
+    display: block; /* Ensure icon takes space */
+}
+
 
 .history-list-container {
   flex-grow: 1; /* 占据剩余空间 */
   overflow-y: auto; /* 超出时显示滚动条 */
+  border: 1px solid var(--border-color); /* Keep border */
+  border-radius: 5px; /* Keep radius */
+  background-color: var(--app-bg-color); /* Ensure background */
+  /* Add display:flex and flex-direction:column to stack controls and list */
+  display: flex;
+  flex-direction: column;
 }
 
 .history-list {
@@ -171,18 +199,18 @@ const executeCommand = (command: string) => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 8px 12px;
-  cursor: default; /* 列表项本身不可点击 */
-  border-bottom: 1px solid var(--color-border-light);
-  transition: background-color 0.2s ease;
+  padding: 0.4rem 0.75rem; /* Reduced padding */
+  cursor: pointer; /* Make item clickable */
+  border-bottom: 1px solid var(--border-color); /* Use standard border color */
+  transition: background-color 0.15s ease;
 }
 
 .history-item:last-child {
-  border-bottom: none;
+  border-bottom: none; /* Keep removing border for last item */
 }
 
 .history-item:hover {
-  background-color: var(--color-bg-hover);
+  background-color: var(--header-bg-color); /* Use header background for hover */
 }
 
 .command-text {
@@ -191,8 +219,9 @@ const executeCommand = (command: string) => {
   text-overflow: ellipsis;
   margin-right: 10px;
   flex-grow: 1;
-  font-family: var(--font-family-mono);
+  font-family: var(--font-family-mono, monospace); /* Use mono font variable */
   font-size: 0.9em;
+  color: var(--text-color); /* Use standard text color */
 }
 
 .item-actions {
@@ -204,26 +233,31 @@ const executeCommand = (command: string) => {
 .action-button {
   background: none;
   border: none;
-  color: var(--color-text-secondary);
+  color: var(--text-color-secondary); /* Use standard secondary text color */
   cursor: pointer;
-  padding: 2px 4px;
-  margin-left: 6px;
-  font-size: 0.9em;
+  padding: 2px 4px; /* Reduced padding */
+  margin-left: 4px; /* Reduced margin */
+  font-size: 1em; /* Slightly larger icon size */
   line-height: 1;
+  border-radius: 4px; /* Add radius for hover */
+  transition: color 0.15s ease, background-color 0.15s ease;
 }
 
 .action-button:hover {
-  color: var(--color-primary);
+  background-color: rgba(128, 128, 128, 0.1); /* Subtle hover background */
+  color: var(--link-hover-color); /* Use link hover color */
 }
 
 .action-button.delete:hover {
-  color: var(--color-danger);
+  color: var(--bs-danger, red); /* Use danger color */
+  background-color: rgba(220, 53, 69, 0.1); /* Subtle danger background */
 }
 
 .loading-message,
 .empty-message {
-  padding: 20px;
+  padding: calc(var(--base-padding, 1rem) * 2); /* Increase padding */
   text-align: center;
-  color: var(--color-text-secondary);
+  color: var(--text-color-secondary); /* Use standard secondary text color */
+  font-style: italic;
 }
 </style>
diff --git a/packages/frontend/src/views/ConnectionsView.vue b/packages/frontend/src/views/ConnectionsView.vue
index 92ac969..532c6f1 100644
--- a/packages/frontend/src/views/ConnectionsView.vue
+++ b/packages/frontend/src/views/ConnectionsView.vue
@@ -237,26 +237,44 @@ const handleFileChange = async (event: Event) => {
 
 <style scoped>
 .connections-view {
-  padding: 1rem;
+  padding: var(--base-padding, 1rem); /* 使用变量 */
+  color: var(--text-color);
+  background-color: var(--app-bg-color);
 }
 
 .actions-bar {
     display: flex;
     justify-content: space-between; /* 让按钮和下拉框分开 */
     align-items: center;
-    margin-bottom: 1rem;
+    margin-bottom: var(--base-margin, 1rem); /* 使用变量 */
 }
 
 .actions-bar button {
   /* margin-bottom: 1rem; */ /* 移除按钮的下边距 */
   padding: 0.5rem 1rem;
   cursor: pointer;
+  background-color: var(--button-bg-color, #007bff); /* 使用变量 */
+  color: var(--button-text-color, #ffffff); /* 使用变量 */
+  border: none; /* 移除默认边框 */
+  border-radius: 4px;
+}
+
+.actions-bar button:hover:not(:disabled) {
+  background-color: var(--button-hover-bg-color, #0056b3); /* 使用变量 */
+}
+
+.actions-bar button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
 }
 
 .tag-filter-select {
     padding: 0.4rem 0.8rem;
-    border: 1px solid #ccc;
+    border: 1px solid var(--border-color, #ccc); /* 使用变量 */
     border-radius: 4px;
     min-width: 150px; /* 给下拉框一个最小宽度 */
+    color: var(--text-color); /* 确保文本颜色 */
+    background-color: var(--app-bg-color); /* 确保背景色 */
+    font-family: var(--font-family-sans-serif, sans-serif); /* 使用变量 */
 }
 </style>
diff --git a/packages/frontend/src/views/NotificationsView.vue b/packages/frontend/src/views/NotificationsView.vue
index 008c982..45beab9 100644
--- a/packages/frontend/src/views/NotificationsView.vue
+++ b/packages/frontend/src/views/NotificationsView.vue
@@ -12,6 +12,8 @@ import NotificationSettings from '../components/NotificationSettings.vue';
 
 <style scoped>
 .notifications-view {
-  padding: 20px;
+  padding: var(--base-padding, 20px); /* 使用变量 */
+  color: var(--text-color);
+  background-color: var(--app-bg-color);
 }
 </style>
diff --git a/packages/frontend/src/views/ProxiesView.vue b/packages/frontend/src/views/ProxiesView.vue
index b4fa658..bbdc2cc 100644
--- a/packages/frontend/src/views/ProxiesView.vue
+++ b/packages/frontend/src/views/ProxiesView.vue
@@ -63,19 +63,36 @@ const closeForm = () => {
 
 <style scoped>
 .proxies-view {
-  padding: 1rem;
+  padding: var(--base-padding, 1rem); /* 使用变量 */
+  color: var(--text-color);
+  background-color: var(--app-bg-color);
 }
 
 button {
-  margin-bottom: 1rem;
+  margin-bottom: var(--base-margin, 1rem); /* 使用变量 */
   padding: 0.5rem 1rem;
   cursor: pointer;
+  background-color: var(--button-bg-color, #007bff); /* 使用变量 */
+  color: var(--button-text-color, #ffffff); /* 使用变量 */
+  border: none; /* 移除默认边框 */
+  border-radius: 4px;
 }
 
+button:hover:not(:disabled) {
+  background-color: var(--button-hover-bg-color, #0056b3); /* 使用变量 */
+}
+
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* 保持 placeholder 样式，但使用变量 */
 .placeholder-form, .placeholder-list {
-    border: 1px dashed #ccc;
-    padding: 1rem;
-    margin-top: 1rem;
-    background-color: #f9f9f9;
+    border: 1px dashed var(--border-color, #ccc); /* 使用变量 */
+    padding: var(--base-padding, 1rem); /* 使用变量 */
+    margin-top: var(--base-margin, 1rem); /* 使用变量 */
+    background-color: var(--header-bg-color, #f9f9f9); /* 使用变量，选择一个合适的背景色 */
+    color: var(--text-color-secondary); /* 使用次要文本颜色 */
 }
 </style>
diff --git a/packages/frontend/src/views/QuickCommandsView.vue b/packages/frontend/src/views/QuickCommandsView.vue
index b0ea52c..d9606ab 100644
--- a/packages/frontend/src/views/QuickCommandsView.vue
+++ b/packages/frontend/src/views/QuickCommandsView.vue
@@ -1,26 +1,23 @@
 <template>
   <div class="quick-commands-view">
-    <div class="view-header">
-      <input
-        type="text"
-        :placeholder="$t('quickCommands.searchPlaceholder', '搜索名称或指令...')"
-        :value="searchTerm"
-        @input="updateSearchTerm($event)"
-        class="search-input"
-      />
-      <div class="sort-controls">
-        <label for="sort-select">{{ t('quickCommands.sortBy', '排序:') }}</label>
-        <select id="sort-select" :value="sortBy" @change="updateSortBy($event)">
-          <option value="name">{{ t('quickCommands.sortByName', '名称') }}</option>
-          <option value="usage_count">{{ t('quickCommands.sortByUsage', '使用频率') }}</option>
-        </select>
-      </div>
-      <button @click="openAddForm" class="add-button" :title="$t('quickCommands.add', '添加快捷指令')">
-        <i class="fas fa-plus"></i> {{ t('quickCommands.add', '添加') }}
-      </button>
-    </div>
-
+    <!-- Removed original top controls -->
     <div class="commands-list-container">
+      <!-- Moved controls inside the container -->
+      <div class="embedded-controls">
+        <input
+          type="text"
+          :placeholder="$t('quickCommands.searchPlaceholder', '搜索名称或指令...')"
+          :value="searchTerm"
+          @input="updateSearchTerm($event)"
+          class="search-input"
+        />
+        <button @click="toggleSortBy" class="sort-toggle-button" :title="sortButtonTitle">
+          <i :class="sortButtonIcon"></i>
+        </button>
+        <button @click="openAddForm" class="add-button icon-only" :title="$t('quickCommands.add', '添加快捷指令')">
+          <i class="fas fa-plus"></i>
+        </button>
+      </div>
       <ul v-if="filteredAndSortedCommands.length > 0" class="commands-list">
         <li
           v-for="cmd in filteredAndSortedCommands"
@@ -100,12 +97,25 @@ const updateSearchTerm = (event: Event) => {
   quickCommandsStore.setSearchTerm(target.value);
 };
 
-const updateSortBy = (event: Event) => {
-    const target = event.target as HTMLSelectElement;
-    const newSortBy = target.value as QuickCommandSortByType;
-    quickCommandsStore.setSortBy(newSortBy);
+// 切换排序方式
+const toggleSortBy = () => {
+  const newSortBy = sortBy.value === 'name' ? 'usage_count' : 'name';
+  quickCommandsStore.setSortBy(newSortBy);
 };
 
+// 计算排序按钮的 title 和 icon
+const sortButtonTitle = computed(() => {
+  return sortBy.value === 'name'
+    ? t('quickCommands.sortByName', '按名称排序')
+    : t('quickCommands.sortByUsage', '按使用频率排序');
+});
+
+const sortButtonIcon = computed(() => {
+  // 使用 Font Awesome 图标示例
+  return sortBy.value === 'name' ? 'fas fa-sort-alpha-down' : 'fas fa-sort-numeric-down';
+});
+
+
 const openAddForm = () => {
   commandToEdit.value = null;
   isFormVisible.value = true;
@@ -141,73 +151,103 @@ const executeCommand = (command: QuickCommandFE) => {
 .quick-commands-view {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  height: 100%; /* Occupy available height */
   overflow: hidden;
-  background-color: var(--color-bg-secondary);
+  background-color: var(--app-bg-color); /* Use standard app background */
+  padding: 0.5rem; /* Keep overall padding */
+  box-sizing: border-box;
 }
 
-.view-header {
+/* Remove original .view-header styles */
+/* .view-header { ... } */
+
+/* Styles for controls embedded within the list container */
+.embedded-controls {
   display: flex;
   align-items: center;
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--color-border);
-  background-color: var(--color-bg-tertiary);
+  flex-wrap: wrap; /* Allow wrapping */
+  padding: 0.5rem; /* Add padding around embedded controls */
+  /* Removed border-bottom and margin-bottom */
   flex-shrink: 0;
+  gap: 0.25rem;
 }
 
 .search-input {
-  flex-grow: 1;
-  padding: 6px 8px;
-  border: 1px solid var(--color-border);
-  border-radius: 3px;
-  background-color: var(--color-input-bg);
-  color: var(--color-text);
-  margin-right: 12px;
+  flex-grow: 1; /* Allow search to grow */
+  flex-basis: 10px; /* Give search a base width before growing */
+  min-width: 8px; /* Reduced min-width */
+  padding: 0.3rem 0.5rem; /* Reduced padding */
+  border: 1px solid var(--border-color); /* Use standard border color */
+  border-radius: 4px; /* Consistent border radius */
+  background-color: var(--app-bg-color); /* Use app background for input */
+  color: var(--text-color); /* Use standard text color */
+  /* margin-right: 12px; */ /* Replaced by gap */
   font-size: 0.9em;
 }
-
-.sort-controls {
-    display: flex;
-    align-items: center;
-    margin-right: 12px;
+.search-input:focus {
+    outline: none;
+    border-color: var(--button-bg-color); /* Highlight border on focus */
+    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); /* Example focus shadow */
 }
 
-.sort-controls label {
-    margin-right: 6px;
-    font-size: 0.9em;
-    color: var(--color-text-secondary);
+/* 移除 .sort-controls 和 select 样式 */
+
+.sort-toggle-button {
+  background: none;
+  border: 1px solid var(--border-color);
+  color: var(--text-color-secondary);
+  cursor: pointer;
+  padding: 0.3rem 0.5rem; /* Match input padding */
+  font-size: 0.9em; /* Match input font size */
+  line-height: 1;
+  border-radius: 4px;
+  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
+  flex-shrink: 0; /* Prevent shrinking */
+}
+.sort-toggle-button:hover {
+  color: var(--text-color);
+  border-color: var(--button-bg-color);
+  background-color: rgba(128, 128, 128, 0.1);
+}
+.sort-toggle-button i {
+    display: block; /* Ensure icon takes space */
 }
 
-.sort-controls select {
-    padding: 5px 8px;
-    border: 1px solid var(--color-border);
-    border-radius: 3px;
-    background-color: var(--color-input-bg);
-    color: var(--color-text);
-    font-size: 0.9em;
-}
 
 .add-button {
-  padding: 6px 12px;
-  background-color: var(--color-primary);
-  color: white;
+  padding: 0.3rem 0.6rem; /* Default padding */
+  background-color: var(--button-bg-color); /* Use standard button color */
+  color: var(--button-text-color); /* Use standard button text color */
   border: none;
-  border-radius: 3px;
+  border-radius: 4px; /* Consistent border radius */
   cursor: pointer;
   font-size: 0.9em;
   display: flex;
   align-items: center;
+  white-space: nowrap;
+  transition: background-color 0.15s ease;
+  flex-shrink: 0; /* Prevent shrinking */
+}
+.add-button.icon-only {
+    padding: 0.3rem 0.5rem; /* Slightly adjust padding for icon only */
 }
 .add-button i {
-    margin-right: 4px;
+    margin-right: 0; /* Remove margin when text is gone */
 }
 .add-button:hover {
-  background-color: var(--color-primary-dark);
+  background-color: var(--button-hover-bg-color); /* Use standard hover color */
 }
 
 .commands-list-container {
   flex-grow: 1;
   overflow-y: auto;
+  /* Add subtle border/background for visual separation */
+  border: 1px solid var(--border-color);
+  border-radius: 5px;
+  background-color: var(--app-bg-color);
+  /* Add display:flex and flex-direction:column to stack controls and list */
+  display: flex;
+  flex-direction: column;
 }
 
 .commands-list {
@@ -220,18 +260,18 @@ const executeCommand = (command: QuickCommandFE) => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px 12px;
+  padding: 0.4rem 0.75rem; /* Reduced padding */
   cursor: pointer;
-  border-bottom: 1px solid var(--color-border-light);
-  transition: background-color 0.2s ease;
+  border-bottom: 1px solid var(--border-color); /* Use standard border color */
+  transition: background-color 0.15s ease;
 }
 
 .command-item:last-child {
-  border-bottom: none;
+  border-bottom: none; /* Keep removing border for last item */
 }
 
 .command-item:hover {
-  background-color: var(--color-bg-hover);
+  background-color: var(--header-bg-color); /* Use header background for hover */
 }
 
 .command-info {
@@ -243,8 +283,8 @@ const executeCommand = (command: QuickCommandFE) => {
 }
 
 .command-name {
-    font-weight: bold;
-    color: var(--color-text);
+    font-weight: 500; /* Medium weight */
+    color: var(--text-color); /* Use standard text color */
     font-size: 0.95em;
     white-space: nowrap;
     overflow: hidden;
@@ -256,13 +296,13 @@ const executeCommand = (command: QuickCommandFE) => {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-family: var(--font-family-mono);
+  font-family: var(--font-family-mono, monospace); /* Use mono font variable */
   font-size: 0.85em;
-  color: var(--color-text-secondary);
+  color: var(--text-color-secondary); /* Use standard secondary text color */
 }
 .command-text.full-width { /* 当没有名称时，指令占据全部空间 */
     font-size: 0.9em; /* 可以稍微大一点 */
-    color: var(--color-text); /* 颜色也可以更深 */
+    color: var(--text-color); /* Use standard text color */
 }
 
 
@@ -274,40 +314,44 @@ const executeCommand = (command: QuickCommandFE) => {
 
 .usage-count {
     font-size: 0.8em;
-    color: var(--color-text-muted);
-    margin-right: 8px;
-    background-color: var(--color-bg-tertiary);
-    padding: 2px 5px;
-    border-radius: 3px;
-    min-width: 18px; /* 保证宽度 */
+    color: var(--text-color-secondary); /* Use standard secondary text color */
+    margin-right: 4px; /* Reduced margin */
+    background-color: var(--header-bg-color); /* Use header background */
+    padding: 2px 4px; /* Reduced padding */
+    border-radius: 4px; /* Consistent border radius */
+    min-width: 18px; /* Adjust min-width */
     text-align: center;
+    font-weight: 500;
 }
 
 .action-button {
   background: none;
   border: none;
-  color: var(--color-text-secondary);
+  color: var(--text-color-secondary); /* Use standard secondary text color */
   cursor: pointer;
-  padding: 2px 4px;
-  margin-left: 6px;
-  font-size: 0.9em;
+  padding: 2px 4px; /* Reduced padding */
+  margin-left: 4px; /* Reduced margin */
+  font-size: 1em; /* Slightly larger icon size */
   line-height: 1;
+  border-radius: 4px; /* Add radius for hover effect */
+  transition: color 0.15s ease, background-color 0.15s ease;
 }
 
 .action-button:hover {
-  color: var(--color-primary);
+  background-color: rgba(128, 128, 128, 0.1); /* Subtle hover background */
 }
 .action-button.edit:hover {
-    color: var(--color-warning); /* 编辑按钮用警告色 */
+    color: var(--bs-warning, orange); /* Use Bootstrap warning or fallback */
 }
 .action-button.delete:hover {
-  color: var(--color-danger);
+  color: var(--bs-danger, red); /* Use Bootstrap danger or fallback */
 }
 
 .loading-message,
 .empty-message {
-  padding: 20px;
+  padding: var(--base-padding, 1rem) * 2; /* Increase padding */
   text-align: center;
-  color: var(--color-text-secondary);
+  color: var(--text-color-secondary); /* Use standard secondary text color */
+  font-style: italic;
 }
 </style>
diff --git a/packages/frontend/src/views/SettingsView.vue b/packages/frontend/src/views/SettingsView.vue
index d8c26fa..3650118 100644
--- a/packages/frontend/src/views/SettingsView.vue
+++ b/packages/frontend/src/views/SettingsView.vue
@@ -574,14 +574,17 @@ onMounted(async () => {
 
 <style scoped>
 .settings-view {
-  padding: 20px;
+  padding: var(--base-padding, 20px); /* 使用变量，保留默认值 */
+  color: var(--text-color);
+  background-color: var(--app-bg-color);
 }
 
 .settings-section {
-  margin-bottom: 30px;
-  padding: 20px;
-  border: 1px solid #ccc;
+  margin-bottom: calc(var(--base-margin, 0.5rem) * 3); /* 调整间距 */
+  padding: var(--base-padding, 20px); /* 使用变量 */
+  border: 1px solid var(--border-color, #ccc); /* 使用变量 */
   border-radius: 5px;
+  background-color: var(--app-bg-color); /* 确保背景色一致 */
 }
 
 .form-group {
@@ -598,12 +601,14 @@ input[type="text"],
 textarea,
 select { /* Add select style */
   width: 100%;
-  padding: 8px;
+  padding: 8px; /* 保持特定内边距 */
   box-sizing: border-box;
-  border: 1px solid #ccc;
+  border: 1px solid var(--border-color, #ccc); /* 使用变量 */
   border-radius: 4px;
-  font-family: inherit;
+  font-family: var(--font-family-sans-serif, sans-serif); /* 使用变量 */
   font-size: inherit;
+  color: var(--text-color); /* 确保输入文本颜色 */
+  background-color: var(--app-bg-color); /* 确保输入背景色 */
 }
 
 textarea {
@@ -615,13 +620,21 @@ small {
     display: block;
     margin-top: 5px;
     font-size: 0.85em;
-    color: #666;
+    color: var(--text-color-secondary, #666); /* 使用变量 */
 }
 
 
 button {
   padding: 10px 15px;
   cursor: pointer;
+  background-color: var(--button-bg-color, #007bff); /* 使用变量 */
+  color: var(--button-text-color, #ffffff); /* 使用变量 */
+  border: none; /* 移除默认边框 */
+  border-radius: 4px;
+}
+
+button:hover:not(:disabled) {
+  background-color: var(--button-hover-bg-color, #0056b3); /* 使用变量 */
 }
 
 button:disabled {
@@ -631,14 +644,15 @@ button:disabled {
 
 hr {
     border: none;
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--border-color, #eee); /* 使用变量 */
     margin: 30px 0;
 }
 
 code {
-    background-color: #f1f1f1;
+    background-color: var(--header-bg-color, #f1f1f1); /* 使用变量 */
     padding: 2px 4px;
     border-radius: 3px;
+    color: var(--text-color); /* 确保代码文本颜色 */
     font-family: monospace;
 }
 
@@ -667,7 +681,7 @@ img {
 
 .blacklist-table th,
 .blacklist-table td {
-  border: 1px solid #ddd;
+  border: 1px solid var(--border-color, #ddd); /* 使用变量 */
   padding: 8px;
   text-align: left;
 }
@@ -690,13 +704,14 @@ img {
 }
 
 .blacklist-table th {
-  background-color: #f2f2f2;
+  background-color: var(--header-bg-color, #f2f2f2); /* 使用变量 */
   font-weight: bold;
+  color: var(--text-color); /* 确保表头文本颜色 */
 }
 
 .blacklist-table .btn-danger {
-  background-color: #dc3545;
-  color: white;
+  background-color: #dc3545; /* 保留危险色 */
+  color: var(--button-text-color, white); /* 使用变量 */
   border: none;
   padding: 5px 10px;
   border-radius: 4px;
@@ -710,7 +725,7 @@ img {
 
 .loading-message {
     margin-top: 15px;
-    color: #666;
+    color: var(--text-color-secondary, #666); /* 使用变量 */
 }
 
 /* Pagination Styles (Optional) */
diff --git a/packages/frontend/src/views/WorkspaceView.vue b/packages/frontend/src/views/WorkspaceView.vue
index ca5bd8e..0168c80 100644
--- a/packages/frontend/src/views/WorkspaceView.vue
+++ b/packages/frontend/src/views/WorkspaceView.vue
@@ -299,13 +299,18 @@ onBeforeUnmount(() => {
   flex-direction: column;
   height: calc(100vh - 60px - 30px - 2rem); /* 保持原始高度计算 */
   overflow: hidden;
+  background-color: var(--app-bg-color); /* Added app background */
 }
 
 .main-content-area {
     display: flex;
     flex: 1;
-    overflow: hidden;
-    border-top: 1px solid #ccc;
+    overflow: hidden; /* Keep overflow hidden */
+    border: 1px solid var(--border-color, #ccc); /* Use variable for border */
+    border-top: none; /* Remove top border as it's handled by the tab bar */
+    border-radius: 0 0 5px 5px; /* Top-left, Top-right, Bottom-right, Bottom-left */
+    margin: var(--base-margin, 0.5rem); /* Add some margin around the content area */
+    margin-top: 0; /* Remove top margin if tab bar is directly above */
 }
 
 .layout-renderer-wrapper {
@@ -322,10 +327,10 @@ onBeforeUnmount(() => {
     justify-content: center;
     align-items: center;
     text-align: center;
-    color: #adb5bd;
-    background-color: #f8f9fa;
+    color: var(--text-color-secondary); /* Use secondary text color variable */
+    background-color: var(--header-bg-color); /* Use header background for slight contrast */
     font-size: 0.9em;
-    padding: 1rem;
+    padding: var(--base-padding); /* Use base padding variable */
 }
 
 /* 移除旧的、不再需要的特定面板样式，因为渲染由 LayoutRenderer 处理 */