update

packages/frontend/src/components/CommandInputBar.vue

@@ -37,7 +37,7 @@ const sendCommand = () => {
   display: flex;
   align-items: center;
   padding: 5px 0px;
-  background-color: var(--header-bg-color); /* Use theme variable */
+  background-color: var(--app-bg-color); /* Use theme variable */
   min-height: 30px; /* 保证一定高度 */
 }
 

packages/frontend/src/components/LayoutRenderer.vue

@@ -3,7 +3,6 @@ import { computed, defineAsyncComponent, type PropType, type Component } from 'v
 // 添加依赖 font-awesome
 import '@fortawesome/fontawesome-free/css/all.min.css';
 import { Splitpanes, Pane } from 'splitpanes';
-import 'splitpanes/dist/splitpanes.css'; // 引入 splitpanes 样式
 import { useLayoutStore, type LayoutNode, type PaneName } from '../stores/layout.store';
 import { useSessionStore } from '../stores/session.store';
 import { storeToRefs } from 'pinia';

packages/frontend/src/style.css

@@ -53,7 +53,7 @@ a:hover {
 
 /* 为历史记录和快捷命令列表设置字体 */
 /* 注意：这里的选择器可能需要根据实际组件结构调整 */
-.command-history-item, 
+.command-history-item,
 .quick-command-item { /* 假设这些是列表项的类名 */
   font-family: var(--font-family-sans-serif);
 }
@@ -62,3 +62,53 @@ a:hover {
 .el-table .cell {
   font-family: var(--font-family-sans-serif);
 }
+
+/* Override splitpanes default theme pane background */
+.splitpanes.default-theme .splitpanes__pane {
+    background-color: var(--app-bg-color) !important;
+}
+
+/* Style the splitpane splitter */
+.splitpanes.default-theme .splitpanes__splitter {
+  background-color: var(--app-bg-color) !important; /* Use important to ensure override */
+  border-left: 1px solid var(--border-color); /* Add a subtle border */
+  border-right: 1px solid var(--border-color);
+  box-sizing: border-box;
+  transition: background-color 0.2s ease; /* Add transition for hover effect */
+}
+.splitpanes.default-theme .splitpanes__splitter:hover {
+  background-color: var(--link-active-color) !important; /* Highlight on hover, keep important */
+}
+.splitpanes--vertical > .splitpanes__splitter {
+  width: 7px; /* Adjust width as needed */
+  border-top: none;
+  border-bottom: none;
+}
+.splitpanes--horizontal > .splitpanes__splitter {
+  height: 7px; /* Adjust height as needed */
+  border-left: none;
+  border-right: none;
+  border-top: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
+}
+
+/* Style scrollbars */
+::-webkit-scrollbar {
+  width: 8px; /* Width of vertical scrollbar */
+  height: 8px; /* Height of horizontal scrollbar */
+}
+
+::-webkit-scrollbar-track {
+  background: var(--app-bg-color); /* Scrollbar track background */
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--border-color); /* Scrollbar handle color */
+  border-radius: 4px;
+  border: 2px solid var(--app-bg-color); /* Creates padding around thumb */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--text-color-secondary); /* Scrollbar handle hover color */
+}