update

packages/frontend/src/components/LayoutConfigurator.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, onUnmounted, type Ref, reactive } from 'vue'; // 导入 reactive
+import { ref, computed, watch, type Ref } from 'vue'; // Removed reactive as it wasn't used after style removal
 import { useI18n } from 'vue-i18n';
 import { useLayoutStore, type LayoutNode, type PaneName } from '../stores/layout.store';
 import draggable from 'vuedraggable';
-import LayoutNodeEditor from './LayoutNodeEditor.vue'; // *** 导入节点编辑器 ***
+import LayoutNodeEditor from './LayoutNodeEditor.vue';
 
 // --- Props ---
 const props = defineProps({
@@ -21,67 +21,69 @@ const { t } = useI18n();
 const layoutStore = useLayoutStore();
 
 // --- State ---
-// 创建布局树的本地副本，以便在不直接修改 store 的情况下进行编辑
 const localLayoutTree: Ref<LayoutNode | null> = ref(null);
-// 标记是否有更改未保存
 const hasChanges = ref(false);
+const localSidebarPanes: Ref<{ left: PaneName[], right: PaneName[] }> = ref({ left: [], right: [] });
 
 // --- Dialog State ---
-const dialogRef = ref<HTMLElement | null>(null); // 对话框元素的引用
-// 移除 initialDialogState, width, height 从 dialogStyle
-// dialogStyle 现在不再需要，因为定位由 overlay flex 处理，尺寸由 CSS 处理
-// const dialogStyle = reactive({
-//   top: '50%',
-//   left: '50%',
-//   transform: 'translate(-50%, -50%)', // 初始居中
-//   position: 'absolute' as 'absolute', // 显式设置定位
-// });
-// 移除 Resizing 相关的状态
-// const isResizing = ref(false);
-// const resizeHandle = ref<string | null>(null);
-// const startDragPos = { x: 0, y: 0 };
-// const startDialogRect = { width: 0, height: 0, top: 0, left: 0 };
-// const minDialogSize = { width: 400, height: 300 }; // 移至 CSS
+const dialogRef = ref<HTMLElement | null>(null);
 
 // --- Watchers ---
-// 当弹窗可见时，从 store 加载当前布局并计算初始位置
 watch(() => props.isVisible, (newValue) => {
   if (newValue) {
-    // 加载布局
+    // Load main layout
     if (layoutStore.layoutTree) {
       localLayoutTree.value = JSON.parse(JSON.stringify(layoutStore.layoutTree));
+    } else {
+      localLayoutTree.value = null; // Ensure it's null if store is null
     }
-    hasChanges.value = false;
-    console.log('[LayoutConfigurator] 弹窗打开，已加载当前布局到本地副本。');
-
-    // 弹窗打开时的逻辑 (不再需要设置样式)
-    console.log('[LayoutConfigurator] Dialog opened.');
-    // 移除 requestAnimationFrame 和尺寸/位置计算逻辑
-
+    // Load sidebar config
+    if (layoutStore.sidebarPanes) {
+      localSidebarPanes.value = JSON.parse(JSON.stringify(layoutStore.sidebarPanes));
+    } else {
+      localSidebarPanes.value = { left: [], right: [] }; // Default
+    }
+    hasChanges.value = false; // Reset changes flag on open
+    console.log('[LayoutConfigurator] Dialog opened, loaded layout and sidebar config.');
   } else {
-    localLayoutTree.value = null; // 关闭时清空本地副本
-    // 移除 isResizing 和事件监听器移除 (因为 resizing 功能已移除)
-    // isResizing.value = false;
-    // window.removeEventListener('mousemove', handleMouseMove);
-    // window.removeEventListener('mouseup', handleMouseUp);
+    localLayoutTree.value = null;
+    localSidebarPanes.value = { left: [], right: [] };
+    console.log('[LayoutConfigurator] Dialog closed.');
   }
-}, /*{ immediate: true }*/); // 移除 immediate: true 解决初始化顺序问题
+});
 
-// 监听本地布局树的变化，标记有未保存更改
+// Watch for changes in the main layout tree
 watch(localLayoutTree, (newValue, oldValue) => {
-  // 确保不是初始化加载触发的 watch
-  if (oldValue !== null && props.isVisible) {
-    hasChanges.value = true;
-    console.log('[LayoutConfigurator] 本地布局已更改。');
+  // Check if it's not the initial load and the dialog is visible
+  if (oldValue !== undefined && oldValue !== null && props.isVisible) {
+      // Use stringify for a simple deep comparison
+      if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
+          console.log('[LayoutConfigurator] Main layout tree changed.');
+          hasChanges.value = true;
+      }
   }
 }, { deep: true });
 
-// --- Helper Function for Local Tree ---
-// 递归查找本地布局树中所有使用的面板组件名称
-function getLocalUsedPaneNames(node: LayoutNode | null): Set<PaneName> {
+// Watch for changes in the sidebar configuration
+watch(localSidebarPanes, (newValue, oldValue) => {
+   // Check if it's not the initial load and the dialog is visible
+   if (oldValue !== undefined && props.isVisible) {
+       const newJson = JSON.stringify(newValue);
+       const oldJson = JSON.stringify(oldValue);
+       console.log('[LayoutConfigurator Watcher] localSidebarPanes changed.');
+       // Use stringify for a simple deep comparison, including order changes
+       if (newJson !== oldJson) {
+            console.log('[LayoutConfigurator Watcher] Sidebar panes changed, setting hasChanges.');
+            hasChanges.value = true;
+       }
+   }
+}, { deep: true });
+
+
+// --- Helper Functions ---
+function getMainLayoutUsedPaneNames(node: LayoutNode | null): Set<PaneName> {
   const usedNames = new Set<PaneName>();
   if (!node) return usedNames;
-
   function traverse(currentNode: LayoutNode) {
     if (currentNode.type === 'pane' && currentNode.component) {
       usedNames.add(currentNode.component);
@@ -89,24 +91,26 @@ function getLocalUsedPaneNames(node: LayoutNode | null): Set<PaneName> {
       currentNode.children.forEach(traverse);
     }
   }
-
   traverse(node);
   return usedNames;
 }
 
+function getAllLocalUsedPaneNames(mainNode: LayoutNode | null, sidebars: { left: PaneName[], right: PaneName[] }): Set<PaneName> {
+  const usedNames = getMainLayoutUsedPaneNames(mainNode);
+  sidebars.left.forEach(pane => usedNames.add(pane));
+  sidebars.right.forEach(pane => usedNames.add(pane));
+  return usedNames;
+}
 
 // --- Computed ---
-// const availablePanes = computed(() => layoutStore.availablePanes); // 旧的，基于 store
-const allPossiblePanes = computed(() => layoutStore.allPossiblePanes); // 获取所有可能的面板
+const allPossiblePanes = computed(() => layoutStore.allPossiblePanes);
 
-// *** 新增：计算当前配置器预览中可用的面板 ***
 const configuratorAvailablePanes = computed(() => {
-  const localUsed = getLocalUsedPaneNames(localLayoutTree.value);
+  const localUsed = getAllLocalUsedPaneNames(localLayoutTree.value, localSidebarPanes.value);
   return allPossiblePanes.value.filter(pane => !localUsed.has(pane));
 });
 
-
-// 将 PaneName 映射到用户友好的中文标签
+// Panel Labels for display
 const paneLabels = computed(() => ({
   connections: t('layout.pane.connections', '连接列表'),
   terminal: t('layout.pane.terminal', '终端'),
@@ -116,7 +120,7 @@ const paneLabels = computed(() => ({
   statusMonitor: t('layout.pane.statusMonitor', '状态监视器'),
   commandHistory: t('layout.pane.commandHistory', '命令历史'),
   quickCommands: t('layout.pane.quickCommands', '快捷指令'),
-  dockerManager: t('layout.pane.dockerManager', 'Docker 管理器'), // 添加 dockerManager
+  dockerManager: t('layout.pane.dockerManager', 'Docker 管理器'),
 }));
 
 // --- Methods ---
@@ -131,122 +135,145 @@ const closeDialog = () => {
 };
 
 const saveLayout = () => {
+  // Save main layout
   if (localLayoutTree.value) {
     layoutStore.updateLayoutTree(localLayoutTree.value);
-    hasChanges.value = false;
-    console.log('[LayoutConfigurator] 布局已保存到 Store。');
-    emit('close'); // 保存后关闭
+    console.log('[LayoutConfigurator] Main layout saved to Store.');
   } else {
-    console.error('[LayoutConfigurator] 无法保存，本地布局树为空。');
+    // Handle potentially empty layout based on store logic
+     layoutStore.updateLayoutTree(null); // Assuming null is valid for empty
+    console.log('[LayoutConfigurator] Main layout is empty, saved null to Store.');
   }
+
+  // Save sidebar config
+  const sidebarConfigToSave = JSON.parse(JSON.stringify(localSidebarPanes.value));
+  console.log('[LayoutConfigurator] Preparing to save sidebar config:', sidebarConfigToSave); // Log before sending
+  layoutStore.updateSidebarPanes(sidebarConfigToSave);
+  console.log('[LayoutConfigurator] Sidebar config sent to Store.');
+
+  hasChanges.value = false;
+  emit('close');
 };
 
 const resetToDefault = () => {
-  if (confirm(t('layoutConfigurator.confirmReset', '确定要恢复默认布局吗？当前更改将丢失。'))) {
-    // 调用 store 中获取系统默认布局的方法
+  if (confirm(t('layoutConfigurator.confirmReset', '确定要恢复默认布局和侧栏配置吗？当前更改将丢失。'))) {
+    // Reset main layout
     const defaultLayout = layoutStore.getSystemDefaultLayout();
-    // 直接将获取到的默认布局（深拷贝）赋值给本地副本
     localLayoutTree.value = JSON.parse(JSON.stringify(defaultLayout));
-    hasChanges.value = true; // 标记为有更改，因为是重置操作
-    console.log('[LayoutConfigurator] 已重置为系统默认布局。');
+
+    // Reset sidebar config (assuming store provides a default or empty)
+    const defaultSidebarPanes = layoutStore.getSystemDefaultSidebarPanes(); // Get default from store
+    localSidebarPanes.value = JSON.parse(JSON.stringify(defaultSidebarPanes));
+    console.log('[LayoutConfigurator] Reset to default layout and sidebar panes.');
+
+    hasChanges.value = true; // Mark as changed after reset
   }
 };
 
-// --- Resizing Methods (Removed) ---
-// Resizing functionality is removed to allow content-based sizing.
-
-// --- Drag & Drop Methods (for panes, unchanged) ---
-// 克隆函数：当从可用列表拖拽时，创建新的 LayoutNode 对象
+// Clone function for dragging available panes
 const clonePane = (paneName: PaneName): LayoutNode => {
-  console.log(`[LayoutConfigurator] 克隆面板: ${paneName}`);
+  console.log(`[LayoutConfigurator] Cloning pane: ${paneName}`);
   return {
-    id: layoutStore.generateId(), // 使用 store 中的函数生成新 ID
+    id: layoutStore.generateId(),
     type: 'pane',
     component: paneName,
-    size: 50, // 默认大小，可以后续调整
+    size: 50, // Default size, can be adjusted later
   };
 };
 
-// 移除旧的 handleDragStart
-// const handleDragStart = (event: DragEvent, paneName: PaneName) => { ... }
-
-// 移除旧的预览区域 drop/dragover 处理，由 LayoutNodeEditor 内部处理
-// const handleDropOnPreview = (event: DragEvent) => { ... };
-// const handleDragOverPreview = (event: DragEvent) => { ... };
-
-// *** 新增：处理来自 LayoutNodeEditor 的更新事件 ***
+// Handle updates from LayoutNodeEditor (for main layout)
 const handleNodeUpdate = (updatedNode: LayoutNode) => {
-  // 因为 LayoutNodeEditor 是直接操作 localLayoutTree 的副本，
-  // 理论上 v-model 绑定应该能处理更新。
-  // 但为了明确和处理可能的深层更新问题，我们直接替换根节点。
-  // 注意：这假设 LayoutNodeEditor 只会 emit 根节点的更新事件，
-  // 或者我们需要一个更复杂的查找和替换逻辑。
-  // 简单的做法是，只要有更新，就认为整个 localLayoutTree 可能变了。
-  // （vuedraggable 的 v-model 应该能处理大部分情况）
-  // 暂时只打印日志，依赖 v-model 的更新
-  console.log('[LayoutConfigurator] Received node update:', updatedNode);
-  // 如果 v-model 更新不完全，可能需要手动更新：
-  localLayoutTree.value = updatedNode; // 强制更新整个树
+  console.log('[LayoutConfigurator] Received node update from editor:', updatedNode);
+  // Assuming the update is for the root node for simplicity
+  // v-model on LayoutNodeEditor might handle this, but explicit update is safer
+  localLayoutTree.value = updatedNode;
+  // No need to set hasChanges here, the watcher on localLayoutTree handles it
 };
 
-// *** 新增：处理来自 LayoutNodeEditor 的移除事件 ***
-// 递归查找并移除指定索引的节点
+// Handle remove requests from LayoutNodeEditor (for main layout)
 function findAndRemoveNode(node: LayoutNode | null, parentNodeId: string | undefined, nodeIndex: number): LayoutNode | null {
   if (!node) return null;
-
-  // 如果当前节点是目标节点的父节点
   if (node.id === parentNodeId && node.type === 'container' && node.children && node.children[nodeIndex]) {
     const updatedChildren = [...node.children];
     updatedChildren.splice(nodeIndex, 1);
-     console.log(`[LayoutConfigurator] Removed node at index ${nodeIndex} from parent ${parentNodeId}`);
-    // 如果移除后容器为空，可以选择移除容器自身，这里暂时保留空容器
+    console.log(`[LayoutConfigurator] Removed node at index ${nodeIndex} from parent ${parentNodeId}`);
     return { ...node, children: updatedChildren };
   }
-
-  // 递归查找子节点
   if (node.type === 'container' && node.children) {
     const updatedChildren = node.children.map(child => findAndRemoveNode(child, parentNodeId, nodeIndex));
-     // 检查是否有子节点被更新（即目标节点在更深层被找到并移除）
-     if (updatedChildren.some((child, index) => child !== node.children![index])) {
-       return { ...node, children: updatedChildren.filter(Boolean) as LayoutNode[] };
-     }
+    if (updatedChildren.some((child, index) => child !== node.children![index])) {
+      return { ...node, children: updatedChildren.filter(Boolean) as LayoutNode[] };
+    }
   }
-
-  return node; // 未找到或未修改，返回原节点
+  return node;
 }
 
 const handleNodeRemove = (payload: { parentNodeId: string | undefined; nodeIndex: number }) => {
   console.log('[LayoutConfigurator] Received node remove request:', payload);
   if (payload.parentNodeId === undefined && payload.nodeIndex === 0) {
-     // 尝试移除根节点，不允许或清空布局
      if (confirm('确定要清空整个布局吗？')) {
-       localLayoutTree.value = null; // 或者设置为空容器
+       localLayoutTree.value = null;
+       // No need to set hasChanges here, the watcher on localLayoutTree handles it
      }
   } else if (payload.parentNodeId) {
      localLayoutTree.value = findAndRemoveNode(localLayoutTree.value, payload.parentNodeId, payload.nodeIndex);
+     // No need to set hasChanges here, the watcher on localLayoutTree handles it
   } else {
      console.warn('[LayoutConfigurator] Invalid remove payload:', payload);
   }
 };
 
+// Remove pane from sidebar list
+const removeSidebarPane = (side: 'left' | 'right', index: number) => {
+    localSidebarPanes.value[side].splice(index, 1);
+    console.log(`[LayoutConfigurator] Removed pane from ${side} sidebar at index ${index}.`);
+    // Explicitly set hasChanges flag
+    hasChanges.value = true;
+};
+
+// Handler for vuedraggable end event to ensure changes flag is set and handle added items
+const onDraggableChange = (event: any, side: 'left' | 'right') => { // Add side parameter
+    console.log(`[LayoutConfigurator] Draggable change event detected on ${side} sidebar:`, event);
+
+    // Check if an element was added to the sidebar list
+    if (event.added) {
+        const addedElement = event.added.element;
+        const targetList = localSidebarPanes.value[side]; // Use the side parameter directly
+        const addedIndex = event.added.newIndex;
+
+        // Check if the added element is a LayoutNode object (dragged from available panes)
+        if (targetList && typeof addedElement === 'object' && addedElement !== null && addedElement.type === 'pane' && typeof addedElement.component === 'string') {
+            // Replace the added LayoutNode object with its component name (PaneName)
+            targetList.splice(addedIndex, 1, addedElement.component);
+            console.log(`[LayoutConfigurator] Replaced added LayoutNode at index ${addedIndex} on ${side} sidebar with PaneName: ${addedElement.component}`);
+        } else {
+             console.log(`[LayoutConfigurator] Added event detected on ${side} sidebar, but element was not a LayoutNode:`, addedElement);
+        }
+    } else if (event.moved || event.removed) {
+         console.log(`[LayoutConfigurator] Item moved or removed within/from ${side} sidebar.`);
+    }
+
+    // Ensure changes flag is set for any modification (add, remove, move)
+    hasChanges.value = true;
+};
 
 </script>
 
 <template>
   <div v-if="isVisible" class="layout-configurator-overlay" @click.self="closeDialog">
-    <!-- 移除 :style 绑定，尺寸和定位由 CSS 控制 -->
     <div ref="dialogRef" class="layout-configurator-dialog">
-      <!-- Resize Handles Removed -->
 
       <header class="dialog-header">
         <h2>{{ t('layoutConfigurator.title', '配置工作区布局') }}</h2>
         <button class="close-button" @click="closeDialog" :title="t('common.close', '关闭')">&times;</button>
       </header>
 
-      <main class="dialog-content">
+      <!-- Grid Layout -->
+      <main class="dialog-content-grid">
+
+        <!-- Available Panes -->
         <section class="available-panes-section">
           <h3>{{ t('layoutConfigurator.availablePanes', '可用面板') }}</h3>
-          <!-- *** 使用 draggable 包裹列表 *** -->
           <draggable
             :list="configuratorAvailablePanes"
             tag="ul"
@@ -256,29 +283,24 @@ const handleNodeRemove = (payload: { parentNodeId: string | undefined; nodeIndex
             :sort="false"
             :clone="clonePane"
           >
-            <template #item="{ element }: { element: PaneName }"> 
-              <li
-                class="available-pane-item"
-              >
-                <i class="fas fa-grip-vertical drag-handle"></i> 
-                {{ paneLabels[element] || element }} 
+            <template #item="{ element }: { element: PaneName }">
+              <li class="available-pane-item">
+                <i class="fas fa-grip-vertical drag-handle"></i>
+                {{ paneLabels[element] || element }}
               </li>
             </template>
-
              <template #footer>
-               <li v-if="configuratorAvailablePanes.length === 0" class="no-available-panes"> <!-- *** 使用新的计算属性 *** -->
+               <li v-if="configuratorAvailablePanes.length === 0" class="no-available-panes">
                  {{ t('layoutConfigurator.noAvailablePanes', '所有面板都已在布局中') }}
                </li>
              </template>
           </draggable>
         </section>
 
-        <section
-          class="layout-preview-section"
-        >
-          <h3>{{ t('layoutConfigurator.layoutPreview', '布局预览（拖拽到此处）') }}</h3>
-          <div class="preview-area">
-            <!-- *** 使用 LayoutNodeEditor 渲染预览 *** -->
+        <!-- Main Layout Preview -->
+        <section class="layout-preview-section">
+          <h3>{{ t('layoutConfigurator.layoutPreview', '主布局预览（拖拽到此处）') }}</h3>
+          <div class="preview-area main-layout-area">
             <LayoutNodeEditor
               v-if="localLayoutTree"
               :node="localLayoutTree"
@@ -287,8 +309,9 @@ const handleNodeRemove = (payload: { parentNodeId: string | undefined; nodeIndex
               :pane-labels="paneLabels"
               @update:node="handleNodeUpdate"
               @removeNode="handleNodeRemove"
+              :group="'layout-items'"
             />
-            <p v-else style="text-align: center; color: #aaa; margin-top: 50px;">
+            <p v-else class="empty-placeholder">
               {{ t('layoutConfigurator.emptyLayout', '布局为空，请从左侧拖拽面板或添加容器。') }}
             </p>
           </div>
@@ -296,9 +319,68 @@ const handleNodeRemove = (payload: { parentNodeId: string | undefined; nodeIndex
              <button @click="resetToDefault" class="button-secondary">
                {{ t('layoutConfigurator.resetDefault', '恢复默认') }}
              </button>
-             
            </div>
         </section>
+
+        <!-- Sidebar Configuration Container -->
+        <div class="sidebar-container">
+            <!-- Left Sidebar Config -->
+            <section class="sidebar-config-section left-sidebar-section">
+                <h3>{{ t('layoutConfigurator.leftSidebar', '左侧栏面板') }}</h3>
+                <draggable
+                    :list="localSidebarPanes.left"
+                    tag="ul"
+                    class="sidebar-panes-list"
+                    :item-key="(element: PaneName) => `left-${element}`"
+                    group="layout-items"
+                    :sort="true"
+                    @change="(event) => onDraggableChange(event, 'left')"
+                >
+                    <template #item="{ element, index }: { element: PaneName, index: number }">
+                        <li class="sidebar-pane-item">
+                            <i class="fas fa-grip-vertical drag-handle"></i>
+                            <!-- Correctly display translated label -->
+                            <span>{{ paneLabels[element] || element }}</span>
+                            <button @click="removeSidebarPane('left', index)" class="remove-sidebar-btn" :title="t('common.remove', '移除')">&times;</button>
+                        </li>
+                    </template>
+                    <template #footer>
+                        <li v-if="localSidebarPanes.left.length === 0" class="empty-placeholder sidebar-empty">
+                            {{ t('layoutConfigurator.dropHere', '从可用面板拖拽到此处') }}
+                        </li>
+                    </template>
+                </draggable>
+            </section>
+
+            <!-- Right Sidebar Config -->
+            <section class="sidebar-config-section right-sidebar-section">
+                <h3>{{ t('layoutConfigurator.rightSidebar', '右侧栏面板') }}</h3>
+                 <draggable
+                    :list="localSidebarPanes.right"
+                    tag="ul"
+                    class="sidebar-panes-list"
+                    :item-key="(element: PaneName) => `right-${element}`"
+                    group="layout-items"
+                    :sort="true"
+                    @change="(event) => onDraggableChange(event, 'right')" 
+                >
+                    <template #item="{ element, index }: { element: PaneName, index: number }">
+                         <li class="sidebar-pane-item">
+                            <i class="fas fa-grip-vertical drag-handle"></i>
+                            <!-- Correctly display translated label -->
+                            <span>{{ paneLabels[element] || element }}</span>
+                            <button @click="removeSidebarPane('right', index)" class="remove-sidebar-btn" :title="t('common.remove', '移除')">&times;</button>
+                        </li>
+                    </template>
+                     <template #footer>
+                        <li v-if="localSidebarPanes.right.length === 0" class="empty-placeholder sidebar-empty">
+                             {{ t('layoutConfigurator.dropHere', '从可用面板拖拽到此处') }}
+                        </li>
+                    </template>
+                </draggable>
+            </section>
+        </div>
+
       </main>
 
       <footer class="dialog-footer">
@@ -320,39 +402,29 @@ const handleNodeRemove = (payload: { parentNodeId: string | undefined; nodeIndex
   height: 100%;
   background-color: rgba(0, 0, 0, 0.6);
   display: flex;
-  /* 使用 Flexbox 居中 */
-  display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1000;
-  /* 移除 pointer-events: none; */
 }
 
 .layout-configurator-dialog {
   background-color: #fff;
   border-radius: 8px;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
-  /* 让宽度和高度自适应内容 */
-  width: auto; /* 或移除 */
-  height: auto; /* 或移除 */
-  /* 添加最大/最小尺寸限制 */
-  min-width: 500px; /* 根据需要调整 */
-  min-height: 400px; /* 根据需要调整 */
-  max-width: 90vw; /* 视口宽度的90% */
-  max-height: 90vh; /* 视口高度的90% */
+  width: auto;
+  height: auto;
+  min-width: 800px; /* Adjusted min-width */
+  min-height: 600px; /* Adjusted min-height */
+  max-width: 95vw;
+  max-height: 90vh;
   display: flex;
   flex-direction: column;
-  /* overflow: hidden; */ /* 改为 auto 或 visible 以允许内容撑开 */
-  overflow: auto; /* 如果内容可能超出 max-height/max-width */
-  position: relative; /* 改为 relative，因为 overlay flex 负责居中 */
-  /* 移除 top, left, transform, position: absolute */
-  /* 允许 dialog 接收点击事件 */
+  overflow: auto;
+  position: relative;
   pointer-events: auto;
-  cursor: default; /* 保持默认光标 */
+  cursor: default;
 }
 
-/* 移除 body.resizing 样式 */
-
 .dialog-header {
   display: flex;
   justify-content: space-between;
@@ -381,23 +453,51 @@ const handleNodeRemove = (payload: { parentNodeId: string | undefined; nodeIndex
   color: #333;
 }
 
-.dialog-content {
+/* Grid Layout for Dialog Content */
+.dialog-content-grid {
   flex-grow: 1;
   padding: 1.5rem;
-  overflow-y: auto; /* 允许内容区滚动 */
-  display: flex; /* 左右布局 */
+  overflow-y: auto;
+  display: grid;
+  grid-template-columns: 220px 1fr;
+  grid-template-rows: auto 1fr;
+  grid-template-areas:
+    "available main"
+    "available sidebars";
   gap: 1.5rem;
+  min-height: 450px;
 }
 
 .available-panes-section {
-  flex: 1; /* 占据一部分空间 */
-  min-width: 200px;
+  grid-area: available;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
   border-right: 1px solid #eee;
   padding-right: 1.5rem;
+  min-width: 200px; /* Ensure minimum width */
 }
 
 .layout-preview-section {
-  flex: 2; /* 占据更多空间 */
+  grid-area: main;
+  display: flex;
+  flex-direction: column;
+  min-width: 350px;
+  min-height: 250px;
+}
+
+.sidebar-container {
+   grid-area: sidebars;
+   display: grid;
+   grid-template-columns: 1fr 1fr;
+   gap: 1.5rem;
+   border-top: 1px solid #eee;
+   padding-top: 1rem;
+   margin-top: 1rem;
+   min-height: 150px;
+}
+
+.sidebar-config-section {
   display: flex;
   flex-direction: column;
 }
@@ -414,6 +514,7 @@ h3 {
   list-style: none;
   padding: 0;
   margin: 0;
+  flex-grow: 1; /* Allow list to take available space */
 }
 
 .available-pane-item {
@@ -450,18 +551,15 @@ h3 {
   padding: 0.5rem 0;
 }
 
-.preview-area {
+.preview-area.main-layout-area {
   flex-grow: 1;
   border: 2px dashed #ced4da;
   border-radius: 4px;
   padding: 1rem;
   background-color: #f8f9fa;
-  min-height: 300px; /* 保证预览区有一定高度 */
-  display: flex; /* 用于内部占位符居中 */
+  display: flex;
   flex-direction: column;
-  /* justify-content: center; */ /* 移除，让内容从顶部开始 */
-  /* align-items: center; */ /* 移除 */
-  overflow: auto; /* 如果预览内容复杂，允许滚动 */
+  overflow: auto;
 }
 
 .preview-actions {
@@ -479,7 +577,7 @@ h3 {
   background-color: #f8f9fa;
 }
 
-/* 通用按钮样式 */
+/* Button Styles */
 .button-primary,
 .button-secondary {
   padding: 0.5rem 1rem;
@@ -512,7 +610,86 @@ h3 {
   background-color: #dee2e6;
 }
 
+/* Sidebar List Styles */
+.sidebar-panes-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    min-height: 120px;
+    background-color: #f8f9fa;
+    border: 1px dashed #ced4da;
+    border-radius: 4px;
+    padding: 0.5rem;
+    flex-grow: 1;
+    overflow-y: auto;
+}
 
-/* --- Resize Handle Styles (Removed) --- */
+.sidebar-pane-item {
+    padding: 0.5rem 0.8rem;
+    margin-bottom: 0.5rem;
+    background-color: #e9ecef;
+    border: 1px solid #dee2e6;
+    border-radius: 4px;
+    cursor: grab;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    transition: background-color 0.2s ease;
+}
+.sidebar-pane-item:hover {
+    background-color: #d8dde2;
+}
+.sidebar-pane-item:active {
+    cursor: grabbing;
+    background-color: #ced4da;
+}
+
+.sidebar-pane-item .drag-handle {
+    margin-right: 0.5rem;
+    color: #6c757d;
+    cursor: grab;
+}
+.sidebar-pane-item:active .drag-handle {
+    cursor: grabbing;
+}
+/* Ensure text span takes available space */
+.sidebar-pane-item span {
+    flex-grow: 1; /* Allow text to take space */
+    margin-right: 0.5rem; /* Space before remove button */
+    overflow: hidden; /* Prevent long text overflow */
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+
+.remove-sidebar-btn {
+    background: none;
+    border: none;
+    color: #adb5bd;
+    font-size: 1.2rem;
+    cursor: pointer;
+    padding: 0 0.3rem;
+    line-height: 1;
+    flex-shrink: 0; /* Prevent button from shrinking */
+}
+.remove-sidebar-btn:hover {
+    color: #dc3545; /* Red on hover */
+}
+
+.empty-placeholder {
+    text-align: center;
+    color: #aaa;
+    padding: 2rem 1rem;
+    font-style: italic;
+    font-size: 0.9em;
+    width: 100%;
+}
+.sidebar-empty {
+    padding: 1rem;
+    min-height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
 
 </style>

packages/frontend/src/components/LayoutRenderer.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { computed, defineAsyncComponent, type PropType, type Component } from 'vue';
+import { computed, defineAsyncComponent, type PropType, type Component, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n'; // <-- Import useI18n
 // 添加依赖 font-awesome
 import '@fortawesome/fontawesome-free/css/all.min.css';
 import { Splitpanes, Pane } from 'splitpanes';
 import { useLayoutStore, type LayoutNode, type PaneName } from '../stores/layout.store';
 import { useSessionStore } from '../stores/session.store';
 import { storeToRefs } from 'pinia';
-import { defineEmits } from 'vue'; // *** 新增：导入 defineEmits ***
+import { defineEmits } from 'vue';
 
 // --- Props ---
 const props = defineProps({
@@ -14,6 +15,11 @@ const props = defineProps({
     type: Object as PropType<LayoutNode>,
     required: true,
   },
+  // 新增：标识是否为顶层渲染器
+  isRootRenderer: {
+    type: Boolean,
+    default: false,
+  },
   // 传递必要的上下文数据，避免在递归中重复获取
   activeSessionId: {
     type: String as PropType<string | null>,
@@ -59,7 +65,13 @@ const emit = defineEmits({
 // --- Setup ---
 const layoutStore = useLayoutStore();
 const sessionStore = useSessionStore();
+const { t } = useI18n(); // <-- Get translation function
 const { activeSession } = storeToRefs(sessionStore);
+const { sidebarPanes } = storeToRefs(layoutStore);
+
+// --- Sidebar State ---
+const activeLeftSidebarPane = ref<PaneName | null>(null);
+const activeRightSidebarPane = ref<PaneName | null>(null);
 
 // --- Component Mapping ---
 // 使用 defineAsyncComponent 优化加载，并映射 PaneName 到实际组件
@@ -76,18 +88,40 @@ const componentMap: Record<PaneName, Component> = {
 };
 
 // --- Computed ---
-// 获取当前节点对应的组件实例
-const currentComponent = computed(() => {
+// 获取当前节点对应的组件实例 (用于主布局)
+const currentMainComponent = computed(() => {
   if (props.layoutNode.type === 'pane' && props.layoutNode.component) {
     return componentMap[props.layoutNode.component] || null;
   }
   return null;
 });
 
-// 为特定组件计算需要传递的 Props
+// 获取当前激活的左侧侧栏组件实例
+const currentLeftSidebarComponent = computed(() => {
+  return activeLeftSidebarPane.value ? componentMap[activeLeftSidebarPane.value] : null;
+});
+
+// 获取当前激活的右侧侧栏组件实例
+const currentRightSidebarComponent = computed(() => {
+  return activeRightSidebarPane.value ? componentMap[activeRightSidebarPane.value] : null;
+});
+
+// 面板标签 (Similar to LayoutConfigurator)
+const paneLabels = computed(() => ({
+  connections: t('layout.pane.connections', '连接列表'),
+  terminal: t('layout.pane.terminal', '终端'),
+  commandBar: t('layout.pane.commandBar', '命令栏'),
+  fileManager: t('layout.pane.fileManager', '文件管理器'),
+  editor: t('layout.pane.editor', '编辑器'),
+  statusMonitor: t('layout.pane.statusMonitor', '状态监视器'),
+  commandHistory: t('layout.pane.commandHistory', '命令历史'),
+  quickCommands: t('layout.pane.quickCommands', '快捷指令'),
+  dockerManager: t('layout.pane.dockerManager', 'Docker 管理器'),
+}));
+
+
+// 为特定组件计算需要传递的 Props (主布局)
 // 注意：这是一个简化示例，实际可能需要更复杂的逻辑来传递正确的 props
-// 例如，Terminal, FileManager, StatusMonitor 需要当前 activeSession 的数据
-// Editor 需要根据共享模式决定数据来源
 const componentProps = computed(() => {
   const componentName = props.layoutNode.component;
   const currentActiveSession = activeSession.value; // 获取当前活动会话
@@ -193,9 +227,32 @@ const componentProps = computed(() => {
  }
 });
 
+// 为侧栏组件计算 Props (可能需要简化或根据组件调整)
+const sidebarComponentProps = computed(() => (paneName: PaneName | null) => {
+    if (!paneName) return {};
+    // 侧栏组件通常不需要像主布局那样复杂的事件转发和 session 依赖
+    // 这里可以返回一个通用的 props 对象，或者根据 paneName 返回特定 props
+    // 示例：只传递 class
+    return { class: 'sidebar-pane-content' };
+    // 如果侧栏组件也需要 session 信息或事件：
+    /*
+    switch (paneName) {
+        case 'connections':
+             return {
+                 class: 'sidebar-pane-content',
+                 onConnectRequest: (id: number) => emit('connect-request', id),
+                 // ... 其他 connections 需要的 props
+             };
+        // ... 其他 case
+        default:
+            return { class: 'sidebar-pane-content' };
+    }
+    */
+});
+
+
 // --- Methods ---
-// 处理 Splitpanes 大小调整事件，更新 layoutStore 中的节点 size
-// @resized 事件参数是一个包含 panes 数组的对象
+// 处理 Splitpanes 大小调整事件
 const handlePaneResize = (eventData: { panes: Array<{ size: number; [key: string]: any }> }) => {
   console.log('Splitpanes resized event object:', eventData); // 打印整个事件对象
   const paneSizes = eventData.panes; // 从事件对象中提取 panes 数组
@@ -219,151 +276,319 @@ const handlePaneResize = (eventData: { panes: Array<{ size: number; [key: string
   }
 };
 
+// 打开/切换侧栏面板
+const toggleSidebarPane = (side: 'left' | 'right', paneName: PaneName) => {
+  if (side === 'left') {
+    activeLeftSidebarPane.value = activeLeftSidebarPane.value === paneName ? null : paneName;
+    if (activeLeftSidebarPane.value) activeRightSidebarPane.value = null; // Close other side
+  } else {
+    activeRightSidebarPane.value = activeRightSidebarPane.value === paneName ? null : paneName;
+    if (activeRightSidebarPane.value) activeLeftSidebarPane.value = null; // Close other side
+  }
+};
+
+// 关闭所有侧栏
+const closeSidebars = () => {
+  activeLeftSidebarPane.value = null;
+  activeRightSidebarPane.value = null;
+};
+
+// 监听 activeSessionId 的变化，如果会话切换，则关闭侧栏 (可选行为)
+watch(() => props.activeSessionId, () => {
+    // closeSidebars(); // 取消注释以在切换会话时关闭侧栏
+});
+
+// --- Debug Watcher for sidebarPanes from store ---
+watch(sidebarPanes, (newVal) => {
+  console.log('[LayoutRenderer] Received updated sidebarPanes from store:', JSON.parse(JSON.stringify(newVal)));
+}, { deep: true, immediate: true }); // Immediate to log initial value
+
+// --- Icon Helper ---
+const getIconClasses = (paneName: PaneName): string[] => {
+  switch (paneName) {
+    case 'connections': return ['fas', 'fa-network-wired'];
+    case 'fileManager': return ['fas', 'fa-folder-open'];
+    case 'commandHistory': return ['fas', 'fa-history'];
+    case 'quickCommands': return ['fas', 'fa-bolt'];
+    case 'dockerManager': return ['fab', 'fa-docker']; // Use 'fab' for Docker
+    case 'editor': return ['fas', 'fa-file-alt'];
+    case 'statusMonitor': return ['fas', 'fa-tachometer-alt'];
+    // Add other specific icons here if needed
+    default: return ['fas', 'fa-question-circle']; // Default icon
+  }
+};
+
 </script>
 
 <template>
-  <div class="layout-renderer" :data-node-id="layoutNode.id">
-    <!-- 如果是容器节点 -->
-    <template v-if="layoutNode.type === 'container' && layoutNode.children && layoutNode.children.length > 0">
-      <splitpanes
-        :horizontal="layoutNode.direction === 'vertical'"
-        class="default-theme"
-        style="height: 100%; width: 100%;"
-        @resized="handlePaneResize"
-      >
-        <pane
-          v-for="childNode in layoutNode.children"
-          :key="childNode.id"
-          :size="childNode.size ?? (100 / layoutNode.children.length)"
-          :min-size="5"
-          class="layout-pane-wrapper"
+  <div class="layout-renderer-wrapper">
+    <!-- Left Sidebar Buttons (Only render if root) -->
+    <div class="sidebar-buttons left-sidebar-buttons" v-if="isRootRenderer && sidebarPanes.left.length > 0">
+        <button
+            v-for="pane in sidebarPanes.left"
+            :key="`left-${pane}`"
+            @click="toggleSidebarPane('left', pane)"
+            :class="{ active: activeLeftSidebarPane === pane }"
+            :title="paneLabels[pane] || pane"
         >
-          <!-- 递归调用自身来渲染子节点，并转发所有必要的事件 -->
-          <LayoutRenderer
-            :layout-node="childNode"
-            :active-session-id="activeSessionId"
-            :editor-tabs="editorTabs"
-            :active-editor-tab-id="activeEditorTabId"
-            @send-command="emit('sendCommand', $event)"
-            @terminal-input="emit('terminalInput', $event)"
-            @terminal-resize="emit('terminalResize', $event)"
-            @terminal-ready="emit('terminal-ready', $event)"
-            @close-editor-tab="emit('closeEditorTab', $event)"
-            @activate-editor-tab="emit('activateEditorTab', $event)"
-            @update-editor-content="emit('updateEditorContent', $event)"
-            @save-editor-tab="emit('saveEditorTab', $event)"
-            @connect-request="emit('connect-request', $event)"
-            @open-new-session="emit('open-new-session', $event)"
-            @request-add-connection="() => { // 添加日志
-                console.log(`[LayoutRenderer ${props.layoutNode.id}] Received recursive 'request-add-connection', emitting upwards.`);
-                emit('request-add-connection');
-            }"
-            @request-edit-connection="emit('request-edit-connection', $event)"
-            @search="emit('search', $event)"
-            @find-next="emit('find-next')"
-            @find-previous="emit('find-previous')"
-            @close-search="emit('close-search')"
-          />
-        </pane>
-      </splitpanes>
-    </template>
+            <!-- Use helper function for icons -->
+            <i :class="getIconClasses(pane)"></i>
+        </button>
+    </div>
 
-    <!-- 如果是面板节点 -->
-    <template v-else-if="layoutNode.type === 'pane'">
-        <!-- Terminal 需要 keep-alive 处理 -->
-        <template v-if="layoutNode.component === 'terminal'">
-            <keep-alive>
-                <component
-                  v-if="activeSession"
-                  :is="currentComponent"
-                  :key="activeSessionId"
-                  v-bind="componentProps"
+    <!-- Main Layout Area -->
+    <div class="main-layout-area">
+        <div class="layout-renderer" :data-node-id="layoutNode.id">
+            <!-- 如果是容器节点 -->
+            <template v-if="layoutNode.type === 'container' && layoutNode.children && layoutNode.children.length > 0">
+            <splitpanes
+                :horizontal="layoutNode.direction === 'vertical'"
+                class="default-theme"
+                style="height: 100%; width: 100%;"
+                @resized="handlePaneResize"
+            >
+                <pane
+                v-for="childNode in layoutNode.children"
+                :key="childNode.id"
+                :size="childNode.size ?? (100 / layoutNode.children.length)"
+                :min-size="5"
+                class="layout-pane-wrapper"
+                >
+                <!-- 递归调用自身来渲染子节点，并转发所有必要的事件 -->
+                <LayoutRenderer
+                    :layout-node="childNode"
+                    :is-root-renderer="false"
+                    :active-session-id="activeSessionId"
+                    :editor-tabs="editorTabs"
+                    :active-editor-tab-id="activeEditorTabId"
+                    @send-command="emit('sendCommand', $event)"
+                    @terminal-input="emit('terminalInput', $event)"
+                    @terminal-resize="emit('terminalResize', $event)"
+                    @terminal-ready="emit('terminal-ready', $event)"
+                    @close-editor-tab="emit('closeEditorTab', $event)"
+                    @activate-editor-tab="emit('activateEditorTab', $event)"
+                    @update-editor-content="emit('updateEditorContent', $event)"
+                    @save-editor-tab="emit('saveEditorTab', $event)"
+                    @connect-request="emit('connect-request', $event)"
+                    @open-new-session="emit('open-new-session', $event)"
+                    @request-add-connection="() => { // 添加日志
+                        console.log(`[LayoutRenderer ${props.layoutNode.id}] Received recursive 'request-add-connection', emitting upwards.`);
+                        emit('request-add-connection');
+                    }"
+                    @request-edit-connection="emit('request-edit-connection', $event)"
+                    @search="emit('search', $event)"
+                    @find-next="emit('find-next')"
+                    @find-previous="emit('find-previous')"
+                    @close-search="emit('close-search')"
                 />
-            </keep-alive>
-            <div v-if="!activeSession" class="pane-placeholder empty-session">
-              <div class="empty-session-content">
-                <i class="fas fa-terminal-slash"></i>
-                <i class="fas fa-plug"></i>
-                <span>无活动会话</span>
-                <div class="empty-session-tip">请先连接一个会话</div>
-              </div>
-            </div>
-        </template>
-        <!-- FileManager 需要 keep-alive 处理 -->
-        <template v-else-if="layoutNode.component === 'fileManager'">
-            <keep-alive>
-                <component
-                  v-if="activeSession"
-                  :is="currentComponent"
-                  :key="activeSessionId"
-                  v-bind="componentProps"
-                />
-            </keep-alive>
-            <div v-if="!activeSession" class="pane-placeholder empty-session">
-              <div class="empty-session-content">
-                <i class="fas fa-plug"></i>
-                <span>无活动会话</span>
-                <div class="empty-session-tip">请先连接一个会话</div>
-              </div>
-            </div>
-        </template>
-        <!-- StatusMonitor 仅在有活动会话时渲染，并添加 key (无 keep-alive) -->
-        <template v-else-if="layoutNode.component === 'statusMonitor'">
-             <component
-               v-if="activeSession"
-               :is="currentComponent"
-               :key="activeSessionId"
-               v-bind="componentProps"
-             />
-             <div v-else class="pane-placeholder empty-session">
-              <div class="empty-session-content">
-                <i class="fas fa-plug"></i>
-                <span>无活动会话</span>
-                <div class="empty-session-tip">请先连接一个会话</div>
-              </div>
-            </div>
-        </template>
-        <!-- 其他面板正常渲染 (不依赖 activeSession 的) -->
-        <template v-else-if="currentComponent">
-            <!-- 特别处理 connections 组件以添加事件监听器 -->
-            <component
-              v-if="layoutNode.component === 'connections'"
-              :is="currentComponent"
-              v-bind="componentProps"
-              @request-add-connection="() => {
-                  console.log(`[LayoutRenderer ${props.layoutNode.id}] Template received 'request-add-connection', emitting upwards.`);
-                  emit('request-add-connection');
-              }"
-            />
-            <!-- 渲染 CommandInputBar -->
-            <component
-              v-else-if="layoutNode.component === 'commandBar'"
-              :is="currentComponent"
-              v-bind="componentProps"
-            />
-            <!-- 渲染其他组件 -->
-            <component
-              v-else
-              :is="currentComponent"
-              v-bind="componentProps"
-            />
-        </template>
-        <!-- 如果找不到组件 -->
-        <div v-else class="pane-placeholder error">
-            无效面板组件: {{ layoutNode.component || '未指定' }} (ID: {{ layoutNode.id }})
+                </pane>
+            </splitpanes>
+            </template>
+
+            <!-- 如果是面板节点 -->
+            <template v-else-if="layoutNode.type === 'pane'">
+                <!-- Terminal 需要 keep-alive 处理 -->
+                <template v-if="layoutNode.component === 'terminal'">
+                    <keep-alive>
+                        <component
+                          v-if="activeSession"
+                          :is="currentMainComponent"
+                          :key="activeSessionId"
+                          v-bind="componentProps"
+                        />
+                    </keep-alive>
+                    <div v-if="!activeSession" class="pane-placeholder empty-session">
+                      <div class="empty-session-content">
+                        <i class="fas fa-plug"></i>
+                        <span>无活动会话</span>
+                        <div class="empty-session-tip">请先连接一个会话</div>
+                      </div>
+                    </div>
+                </template>
+                <!-- FileManager 需要 keep-alive 处理 -->
+                <template v-else-if="layoutNode.component === 'fileManager'">
+                    <keep-alive>
+                        <component
+                          v-if="activeSession"
+                          :is="currentMainComponent"
+                          :key="activeSessionId"
+                          v-bind="componentProps"
+                        />
+                    </keep-alive>
+                    <div v-if="!activeSession" class="pane-placeholder empty-session">
+                      <div class="empty-session-content">
+                        <i class="fas fa-plug"></i>
+                        <span>无活动会话</span>
+                        <div class="empty-session-tip">请先连接一个会话</div>
+                      </div>
+                    </div>
+                </template>
+                <!-- StatusMonitor 仅在有活动会话时渲染，并添加 key (无 keep-alive) -->
+                <template v-else-if="layoutNode.component === 'statusMonitor'">
+                     <component
+                       v-if="activeSession"
+                       :is="currentMainComponent"
+                       :key="activeSessionId"
+                       v-bind="componentProps"
+                     />
+                     <div v-else class="pane-placeholder empty-session">
+                      <div class="empty-session-content">
+                        <i class="fas fa-plug"></i>
+                        <span>无活动会话</span>
+                        <div class="empty-session-tip">请先连接一个会话</div>
+                      </div>
+                    </div>
+                </template>
+                <!-- 其他面板正常渲染 (不依赖 activeSession 的) -->
+                <template v-else-if="currentMainComponent">
+                    <!-- 特别处理 connections 组件以添加事件监听器 -->
+                    <component
+                      v-if="layoutNode.component === 'connections'"
+                      :is="currentMainComponent"
+                      v-bind="componentProps"
+                      @request-add-connection="() => {
+                          console.log(`[LayoutRenderer ${props.layoutNode.id}] Template received 'request-add-connection', emitting upwards.`);
+                          emit('request-add-connection');
+                      }"
+                    />
+                    <!-- 渲染 CommandInputBar -->
+                    <component
+                      v-else-if="layoutNode.component === 'commandBar'"
+                      :is="currentMainComponent"
+                      v-bind="componentProps"
+                    />
+                    <!-- 渲染其他组件 -->
+                    <component
+                      v-else
+                      :is="currentMainComponent"
+                      v-bind="componentProps"
+                    />
+                </template>
+                <!-- 如果找不到主布局组件 -->
+                <div v-else class="pane-placeholder error">
+                    无效面板组件: {{ layoutNode.component || '未指定' }} (ID: {{ layoutNode.id }})
+                </div>
+            </template>
+
+             <!-- 如果节点类型未知或无效 -->
+             <template v-else>
+               <div class="pane-placeholder error">
+                 无效布局节点 (ID: {{ layoutNode.id }})
+               </div>
+             </template>
         </div>
-    </template>
+    </div>
+
+    <!-- Sidebar Panels Overlay -->
+    <div
+        v-if="activeLeftSidebarPane || activeRightSidebarPane"
+        class="sidebar-overlay"
+        @click="closeSidebars"
+    ></div>
+
+    <!-- Left Sidebar Panel -->
+    <div :class="['sidebar-panel', 'left-sidebar-panel', { active: !!activeLeftSidebarPane }]">
+        <button class="close-sidebar-btn" @click="closeSidebars" title="Close Sidebar">&times;</button>
+        <component
+            v-if="currentLeftSidebarComponent"
+            :is="currentLeftSidebarComponent"
+            :key="`left-panel-${activeLeftSidebarPane}`"
+            v-bind="sidebarComponentProps(activeLeftSidebarPane)"
+        />
+    </div>
+
+    <!-- Right Sidebar Panel -->
+     <div :class="['sidebar-panel', 'right-sidebar-panel', { active: !!activeRightSidebarPane }]">
+        <button class="close-sidebar-btn" @click="closeSidebars" title="Close Sidebar">&times;</button>
+        <component
+            v-if="currentRightSidebarComponent"
+            :is="currentRightSidebarComponent"
+            :key="`right-panel-${activeRightSidebarPane}`"
+            v-bind="sidebarComponentProps(activeRightSidebarPane)"
+        />
+    </div>
+
+     <!-- Right Sidebar Buttons (Only render if root) -->
+    <div class="sidebar-buttons right-sidebar-buttons" v-if="isRootRenderer && sidebarPanes.right.length > 0">
+         <button
+             v-for="pane in sidebarPanes.right"
+            :key="`right-${pane}`"
+            @click="toggleSidebarPane('right', pane)"
+            :class="{ active: activeRightSidebarPane === pane }"
+            :title="paneLabels[pane] || pane"
+        >
+             <!-- Use helper function for icons -->
+             <i :class="getIconClasses(pane)"></i>
+        </button>
+    </div>
 
-     <!-- 如果节点类型未知或无效 -->
-     <template v-else>
-       <div class="pane-placeholder error">
-         无效布局节点 (ID: {{ layoutNode.id }})
-       </div>
-     </template>
   </div>
 </template>
 
 <style scoped>
+.layout-renderer-wrapper {
+  position: relative; /* Needed for absolute positioning of sidebars */
+  display: flex;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.sidebar-buttons {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--sidebar-bg-color, #f8f9fa); /* Use theme variable or default */
+  padding: 5px 0;
+  z-index: 10; /* Above main layout but below panels */
+  flex-shrink: 0; /* Prevent buttons from shrinking */
+}
+
+.left-sidebar-buttons {
+  border-right: 1px solid var(--border-color, #dee2e6);
+}
+
+.right-sidebar-buttons {
+  border-left: 1px solid var(--border-color, #dee2e6);
+}
+
+.sidebar-buttons button {
+  background: none;
+  border: none;
+  color: var(--text-color-secondary, #6c757d);
+  padding: 10px 8px;
+  cursor: pointer;
+  font-size: 1.1rem; /* Slightly smaller icons */
+  line-height: 1;
+  transition: background-color 0.2s, color 0.2s;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px; /* Fixed width for buttons */
+  height: 40px; /* Fixed height for buttons */
+  margin-bottom: 4px; /* Space between buttons */
+}
+
+.sidebar-buttons button:hover {
+  background-color: var(--hover-bg-color, #e9ecef);
+  color: var(--text-color-primary, #343a40);
+}
+
+.sidebar-buttons button.active {
+  background-color: var(--primary-color, #007bff);
+  color: white;
+}
+.sidebar-buttons button.active:hover {
+   background-color: var(--primary-color-dark, #0056b3); /* Darker primary on hover when active */
+}
+
+
+.main-layout-area {
+  flex-grow: 1;
+  height: 100%;
+  overflow: hidden; /* Prevent main layout from overflowing */
+  position: relative; /* Needed for potential internal absolute elements */
+}
+
 .layout-renderer {
   height: 100%;
   width: 100%;
@@ -447,14 +672,114 @@ const handlePaneResize = (eventData: { panes: Array<{ size: number; [key: string
 }
 
 
-/* Splitpanes 默认主题样式调整 (如果需要覆盖全局样式) */
-/* :deep(.splitpanes.default-theme .splitpanes__splitter) { */
-  /* background-color: #ccc; */
-/* } */
-/* :deep(.splitpanes--vertical > .splitpanes__splitter) { */
-  /* width: 7px; */
-/* } */
-/* :deep(.splitpanes--horizontal > .splitpanes__splitter) { */
-  /* height: 7px; */
-/* } */
+/* Sidebar Panel Styles */
+.sidebar-overlay {
+  position: fixed; /* Use fixed to cover the whole viewport */
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: 100; /* Below panel, above main content */
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
+}
+/* Show overlay when either panel is active */
+.layout-renderer-wrapper:has(.sidebar-panel.active) .sidebar-overlay {
+  opacity: 1;
+  visibility: visible;
+  transition: opacity 0.3s ease, visibility 0s linear 0s;
+}
+
+
+.sidebar-panel {
+  position: fixed; /* Use fixed for viewport positioning */
+  top: 0; /* Adjust if you have a fixed header */
+  bottom: 0; /* Adjust if you have a fixed footer */
+  width: 350px; /* Adjust width as needed */
+  max-width: 80vw;
+  background-color: var(--app-bg-color, white);
+  /* box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); */ /* <-- 移除阴影以隐藏边缘 */
+  z-index: 110; /* Above overlay */
+  transform: translateX(-100%); /* Start hidden */
+  transition: transform 0.3s ease-in-out;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden; /* Prevent content overflow */
+}
+
+.left-sidebar-panel {
+  left: 0;
+  transform: translateX(-100%);
+  border-right: 1px solid var(--border-color, #dee2e6);
+}
+.left-sidebar-panel.active {
+  transform: translateX(0);
+}
+
+.right-sidebar-panel {
+  right: 0;
+  transform: translateX(100%);
+   border-left: 1px solid var(--border-color, #dee2e6);
+}
+.right-sidebar-panel.active {
+  transform: translateX(0);
+}
+
+.close-sidebar-btn {
+  position: absolute;
+  top: 5px;
+  right: 10px;
+  background: none;
+  border: none;
+  font-size: 1.8rem;
+  color: var(--text-color-secondary, #aaa);
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+  z-index: 1; /* Above panel content */
+}
+.close-sidebar-btn:hover {
+  color: var(--text-color-primary, #333);
+}
+
+/* Style for the content inside the sidebar panel */
+:deep(.sidebar-pane-content) {
+  flex-grow: 1;
+  overflow-y: auto; /* Allow scrolling within the panel */
+  padding: 1rem; /* Add some padding */
+  padding-top: 2.5rem; /* Add padding to avoid close button overlap */
+}
+
+</style>
+
+<style> /* Global styles for splitpanes if needed, or scoped with :deep() */
+.splitpanes.default-theme .splitpanes__pane {
+  background-color: var(--app-bg-color); /* Ensure panes match app background */
+}
+.splitpanes.default-theme .splitpanes__splitter {
+  background-color: var(--border-color, #dee2e6);
+  border-left: 1px solid var(--border-color-lighter, #f1f3f5); /* Example lighter border */
+  border-right: 1px solid var(--border-color-darker, #ced4da); /* Example darker border */
+  box-sizing: border-box;
+  transition: background-color 0.2s ease-out;
+}
+.splitpanes.default-theme .splitpanes__splitter:hover {
+  background-color: var(--primary-color-light, #a0cfff); /* Lighter primary on hover */
+}
+.splitpanes.default-theme .splitpanes__splitter::before,
+.splitpanes.default-theme .splitpanes__splitter::after {
+    background-color: var(--text-color-secondary, #6c757d); /* Adjust handle color */
+}
+.splitpanes--vertical > .splitpanes__splitter {
+  width: 6px; /* Adjust width */
+  border-left: 1px solid var(--border-color-darker, #ced4da);
+  border-right: 1px solid var(--border-color-lighter, #f1f3f5);
+}
+.splitpanes--horizontal > .splitpanes__splitter {
+  height: 6px; /* Adjust height */
+   border-top: 1px solid var(--border-color-darker, #ced4da);
+   border-bottom: 1px solid var(--border-color-lighter, #f1f3f5);
+}
 </style>