From 8143f3f938ed79de576e41a95ec6179334506740 Mon Sep 17 00:00:00 2001 From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com> Date: Thu, 24 Apr 2025 21:17:49 +0800 Subject: [PATCH] update --- .gitignore | 1 + packages/backend/src/config/default-themes.ts | 29 +++-- packages/frontend/src/stores/layout.store.ts | 108 ++++++++++++------ 3 files changed, 95 insertions(+), 43 deletions(-) diff --git a/.gitignore b/.gitignore index 189d467..09fad4a 100644 --- a/.gitignore +++ b/.gitignore @@ -139,3 +139,4 @@ dist /packages/backend/uploads/backgrounds /temp_iterm_schemes /packages/backend/sessions +/data diff --git a/packages/backend/src/config/default-themes.ts b/packages/backend/src/config/default-themes.ts index d1c8f4b..0cdbb32 100644 --- a/packages/backend/src/config/default-themes.ts +++ b/packages/backend/src/config/default-themes.ts @@ -1,7 +1,7 @@ import type { ITheme } from 'xterm'; // 默认 xterm 主题 -// (与 frontend/src/stores/settings.store.ts 中的定义保持一致) +// (与 backend/src/config/default-themes.ts 中的定义保持一致) export const defaultXtermTheme: ITheme = { background: '#1e1e1e', foreground: '#d4d4d4', @@ -26,23 +26,34 @@ export const defaultXtermTheme: ITheme = { }; // 默认 UI 主题 (CSS 变量) -// (与 frontend/src/stores/settings.store.ts 中的定义保持一致) +// (与 backend/src/config/default-themes.ts 中的定义保持一致) export const defaultUiTheme: Record = { '--app-bg-color': '#ffffff', '--text-color': '#333333', '--text-color-secondary': '#666666', '--border-color': '#cccccc', - '--link-color': '#333', - '--link-hover-color': '#0056b3', - '--link-active-color': '#007bff', + '--link-color': '#8E44AD', // 现代紫色 (Amethyst 变种) + '--link-hover-color': '#B180E0', // 现代紫色 - 悬停 (更亮) + '--link-active-color': '#A06CD5', // 现代紫色 - 激活 (基础) + '--link-active-bg-color': '#F3EBFB', /* 现代紫色 - 激活背景 (非常浅) */ + '--nav-item-active-bg-color': 'var(--link-active-bg-color)', /* Added */ '--header-bg-color': '#f0f0f0', '--footer-bg-color': '#f0f0f0', - '--button-bg-color': '#007bff', + '--button-bg-color': '#A06CD5', // 现代紫色 - 激活 (基础) '--button-text-color': '#ffffff', - '--button-hover-bg-color': '#0056b3', + '--button-hover-bg-color': '#8E44AD', // 现代紫色 - 悬停 (稍暗) + // Added new variables + '--icon-color': 'var(--text-color-secondary)', // 图标颜色 + '--icon-hover-color': 'var(--link-hover-color)', // 图标悬停颜色 (自动更新) + '--split-line-color': 'var(--border-color)', /* 分割线颜色 */ + '--split-line-hover-color': 'var(--border-color)', /* 分割线悬停颜色 */ + '--input-focus-border-color': 'var(--link-active-color)', /* 输入框聚焦边框颜色 (自动更新) */ + '--input-focus-glow': 'var(--link-active-color)', /* 输入框聚焦光晕值 (自动更新) */ + '--ssh-tab-active': 'transparent', /* Added SSH Tab Active */ + '--ssh-tab-background': 'transparent', /* Added SSH Tab Background */ + '--overlay-bg-color': 'rgba(0, 0, 0, 0.6)', /* Added Overlay Background - 恢复 rgba 以支持透明度 */ + // End added variables '--font-family-sans-serif': 'sans-serif', '--base-padding': '1rem', '--base-margin': '0.5rem', }; - -// 未来可以在这里添加其他默认主题 diff --git a/packages/frontend/src/stores/layout.store.ts b/packages/frontend/src/stores/layout.store.ts index 9c9268b..942c4d2 100644 --- a/packages/frontend/src/stores/layout.store.ts +++ b/packages/frontend/src/stores/layout.store.ts @@ -26,52 +26,88 @@ function generateId(): string { return Math.random().toString(36).substring(2, 15); } -// 定义默认布局结构 +// 定义默认布局结构 (根据用户提供的配置更新，但使用 generateId) const getDefaultLayout = (): LayoutNode => ({ - id: generateId(), // 根容器 ID - type: 'container', - direction: 'horizontal', // 主方向：水平分割 + id: generateId(), // Generate new ID + type: "container", + direction: "horizontal", children: [ - // 左侧边栏：连接列表 - { id: generateId(), type: 'pane', component: 'connections', size: 15 }, - // 中间主区域：垂直分割 { - id: generateId(), - type: 'container', - direction: 'vertical', - size: 60, // 中间区域占比 + id: generateId(), // Generate new ID + type: "container", + direction: "vertical", children: [ - // 上方：终端 - { id: generateId(), type: 'pane', component: 'terminal', size: 60 }, - // 中下方：命令栏 (固定高度，特殊处理或放在终端内?) - 暂时移除，可在配置器中添加 - // { id: generateId(), type: 'pane', component: 'commandBar', size: 5 }, - // 下方：文件管理器 - { id: generateId(), type: 'pane', component: 'fileManager', size: 40 }, + { + id: generateId(), // Generate new ID + type: "pane", + component: "statusMonitor", + size: 44.56372126372345 // 使用用户提供的 size + }, + { + id: generateId(), // Generate new ID + type: "pane", + component: "commandHistory", + size: 26.235651482670775 // 使用用户提供的 size + }, + { + id: generateId(), // Generate new ID + type: "pane", + component: "quickCommands", + size: 29.200627253605774 // 使用用户提供的 size + } ], + size: 14.59006012147659 // 使用用户提供的 size }, - // 右侧边栏：垂直分割 { - id: generateId(), - type: 'container', - direction: 'vertical', - size: 25, // 右侧区域占比 + id: generateId(), // Generate new ID + type: "container", + direction: "vertical", + size: 58.02787988626151, // 使用用户提供的 size children: [ - // 上方：编辑器 - { id: generateId(), type: 'pane', component: 'editor', size: 60 }, - // 下方：状态监视器 - { id: generateId(), type: 'pane', component: 'statusMonitor', size: 40 }, - // 可选：命令历史和快捷指令可以放在这里，或者作为可添加的面板 - // { id: generateId(), type: 'pane', component: 'commandHistory', size: 20 }, - // { id: generateId(), type: 'pane', component: 'quickCommands', size: 20 }, - ], + { + id: generateId(), // Generate new ID + type: "pane", + component: "terminal", + size: 59.94833664833884 // 使用用户提供的 size + }, + { + id: generateId(), // Generate new ID + type: "pane", + component: "commandBar", + size: 5 // 使用用户提供的 size + }, + { + id: generateId(), // Generate new ID + type: "pane", + component: "fileManager", + size: 35.05166335166116 // 使用用户提供的 size + } + ] }, - ], + { + id: generateId(), // Generate new ID + type: "container", + direction: "vertical", + size: 27.3820599922619, // 使用用户提供的 size + children: [ + { + id: generateId(), // Generate new ID + type: "pane", + component: "editor", + size: 100 // 使用用户提供的 size + } + ] + } + ] }); -// 定义默认侧栏配置 +// 定义默认侧栏配置 (根据用户提供的配置更新) const getDefaultSidebarPanes = (): { left: PaneName[], right: PaneName[] } => ({ - left: [], - right: [], + "left": [ + "connections", + "dockerManager" + ], + "right": [] }); // 递归查找主布局树中使用的面板 @@ -270,6 +306,10 @@ export const useLayoutStore = defineStore('layout', () => { // Optionally save the default to localStorage now? // try { localStorage.setItem(SIDEBAR_STORAGE_KEY, JSON.stringify(sidebarPanes.value)); } catch(e) {} } + + // --- Log the final layout configuration after initialization --- + console.log('[Layout Store] Final Initialized Layout Tree:', JSON.stringify(layoutTree.value, null, 2)); + console.log('[Layout Store] Final Initialized Sidebar Panes:', JSON.stringify(sidebarPanes.value, null, 2)); } // --- Helper for debounced persistence ---