admin/nexus-terminal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Baobhan Sith
2025-04-20 01:22:41 +08:00
parent 06e52a84dc
commit bc50e572cb
7 changed files with 233 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/backend/src/services/settings.service.ts
+58 -29
View File
@@ -2,19 +2,18 @@ import { settingsRepository, Setting } from '../repositories/settings.repository
// +++ 定义默认的焦点切换顺序 +++
const DEFAULT_FOCUS_SEQUENCE = ["quickCommandsSearch", "commandHistorySearch", "fileManagerSearch", "commandInput", "terminalSearch"];
const FOCUS_SEQUENCE_KEY = 'focusSwitcherSequence'; // +++ 定义设置键常量 +++
const FOCUS_SEQUENCE_KEY = 'focusSwitcherSequence'; // 焦点切换顺序设置键
const NAV_BAR_VISIBLE_KEY = 'navBarVisible'; // 导航栏可见性设置键
export const settingsService = {
// ... (getAllSettings, getSetting, setSetting, setMultipleSettings, deleteSetting, getIpWhitelistSettings, updateIpWhitelistSettings, getFocusSwitcherSequence 保持不变) ...
/**
* 获取所有设置项
* @returns 返回包含所有设置项的数组
* @returns 返回包含所有设置项的键值对记录
*/
async getAllSettings(): Promise<Record<string, string>> {
console.log('[Service] Calling repository.getAllSettings...'); // 添加日志
console.log('[Service] Calling repository.getAllSettings...');
const settingsArray = await settingsRepository.getAllSettings();
console.log('[Service] Got settings array from repository:', JSON.stringify(settingsArray)); // 添加日志
console.log('[Service] Got settings array from repository:', JSON.stringify(settingsArray));
const settingsRecord: Record<string, string> = {};
settingsArray.forEach(setting => {
settingsRecord[setting.key] = setting.value;
@@ -45,9 +44,9 @@ export const settingsService = {
* @param settings 包含多个设置项键值对的对象
*/
async setMultipleSettings(settings: Record<string, string>): Promise<void> {
console.log('[Service] Calling repository.setMultipleSettings with:', JSON.stringify(settings)); // 添加日志
console.log('[Service] Calling repository.setMultipleSettings with:', JSON.stringify(settings));
await settingsRepository.setMultipleSettings(settings);
console.log('[Service] Finished repository.setMultipleSettings.'); // 添加日志
console.log('[Service] Finished repository.setMultipleSettings.');
},
/**
@@ -66,8 +65,8 @@ export const settingsService = {
const enabledStr = await settingsRepository.getSetting('ipWhitelistEnabled');
const whitelist = await settingsRepository.getSetting('ipWhitelist');
return {
enabled: enabledStr === 'true', // 将字符串 'true' 转换为布尔值
whitelist: whitelist ?? '', // 如果为 null 则返回空字符串
enabled: enabledStr === 'true',
whitelist: whitelist ?? '',
};
},
@@ -78,26 +77,24 @@ export const settingsService = {
*/
async updateIpWhitelistSettings(enabled: boolean, whitelist: string): Promise<void> {
await Promise.all([
settingsRepository.setSetting('ipWhitelistEnabled', String(enabled)), // 将布尔值转换为字符串
settingsRepository.setSetting('ipWhitelistEnabled', String(enabled)),
settingsRepository.setSetting('ipWhitelist', whitelist),
]);
},
// +++ 新增：获取焦点切换顺序 +++
/**
* 获取焦点切换顺序
* @returns 返回存储的焦点切换顺序数组，如果未设置或无效则返回默认顺序
*/
async getFocusSwitcherSequence(): Promise<string[]> {
console.log(`[Service] Attempting to get setting for key: ${FOCUS_SEQUENCE_KEY}`); // +++ 添加日志 +++
console.log(`[Service] Attempting to get setting for key: ${FOCUS_SEQUENCE_KEY}`);
try {
const sequenceJson = await settingsRepository.getSetting(FOCUS_SEQUENCE_KEY);
console.log(`[Service] Raw value from repository for ${FOCUS_SEQUENCE_KEY}:`, sequenceJson); // +++ 添加日志 +++
console.log(`[Service] Raw value from repository for ${FOCUS_SEQUENCE_KEY}:`, sequenceJson);
if (sequenceJson) {
const sequence = JSON.parse(sequenceJson);
// 基本验证：确保它是一个数组并且包含字符串
if (Array.isArray(sequence) && sequence.every(item => typeof item === 'string')) {
console.log('[Service] Fetched and validated focus switcher sequence:', JSON.stringify(sequence)); // +++ 更新日志 +++
console.log('[Service] Fetched and validated focus switcher sequence:', JSON.stringify(sequence));
return sequence;
} else {
console.warn('[Service] Invalid focus switcher sequence format found in settings. Returning default.');
@@ -106,33 +103,65 @@ export const settingsService = {
console.log('[Service] No focus switcher sequence found in settings. Returning default.');
}
} catch (error) {
console.error(`[Service] Error parsing focus switcher sequence from settings (key: ${FOCUS_SEQUENCE_KEY}):`, error); // +++ 更新日志 +++
console.error(`[Service] Error parsing focus switcher sequence from settings (key: ${FOCUS_SEQUENCE_KEY}):`, error);
}
// 如果发生错误或未找到/无效，返回默认值
console.log('[Service] Returning default focus sequence:', JSON.stringify(DEFAULT_FOCUS_SEQUENCE)); // +++ 添加日志 +++
return [...DEFAULT_FOCUS_SEQUENCE]; // 返回默认值的副本
console.log('[Service] Returning default focus sequence:', JSON.stringify(DEFAULT_FOCUS_SEQUENCE));
return [...DEFAULT_FOCUS_SEQUENCE];
},
// +++ 新增：设置焦点切换顺序 +++
/**
* 设置焦点切换顺序
* @param sequence 要保存的焦点切换顺序数组
*/
async setFocusSwitcherSequence(sequence: string[]): Promise<void> {
console.log('[Service] setFocusSwitcherSequence called with:', JSON.stringify(sequence)); // +++ 添加日志 +++
// 基本验证
console.log('[Service] setFocusSwitcherSequence called with:', JSON.stringify(sequence));
if (!Array.isArray(sequence) || !sequence.every(item => typeof item === 'string')) {
console.error('[Service] Attempted to save invalid focus switcher sequence format:', sequence);
throw new Error('Invalid sequence format provided.'); // 抛出错误阻止保存无效数据
throw new Error('Invalid sequence format provided.');
}
try {
const sequenceJson = JSON.stringify(sequence);
console.log(`[Service] Attempting to save setting. Key: ${FOCUS_SEQUENCE_KEY}, Value: ${sequenceJson}`); // +++ 添加日志 +++
console.log(`[Service] Attempting to save setting. Key: ${FOCUS_SEQUENCE_KEY}, Value: ${sequenceJson}`);
await settingsRepository.setSetting(FOCUS_SEQUENCE_KEY, sequenceJson);
console.log(`[Service] Successfully saved setting for key: ${FOCUS_SEQUENCE_KEY}`); // +++ 添加日志 +++
console.log(`[Service] Successfully saved setting for key: ${FOCUS_SEQUENCE_KEY}`);
} catch (error) {
console.error(`[Service] Error calling settingsRepository.setSetting for key ${FOCUS_SEQUENCE_KEY}:`, error); // +++ 更新日志 +++
throw new Error('Failed to save focus switcher sequence.'); // 重新抛出错误
console.error(`[Service] Error calling settingsRepository.setSetting for key ${FOCUS_SEQUENCE_KEY}:`, error);
throw new Error('Failed to save focus switcher sequence.');
}
},
}, // *** 确保这里有逗号 ***
/**
* 获取导航栏可见性设置
* @returns 返回导航栏是否可见 (boolean)，如果未设置则默认为 true
*/
async getNavBarVisibility(): Promise<boolean> {
console.log(`[Service] Attempting to get setting for key: ${NAV_BAR_VISIBLE_KEY}`);
try {
const visibleStr = await settingsRepository.getSetting(NAV_BAR_VISIBLE_KEY);
console.log(`[Service] Raw value from repository for ${NAV_BAR_VISIBLE_KEY}:`, visibleStr);
// 如果设置存在且值为 'false'，则返回 false，否则都返回 true (包括未设置的情况)
return visibleStr !== 'false';
} catch (error) {
console.error(`[Service] Error getting nav bar visibility setting (key: ${NAV_BAR_VISIBLE_KEY}):`, error);
// 出错时返回默认值 true
return true;
}
}, // *** 确保这里有逗号 ***
/**
* 设置导航栏可见性
* @param visible 是否可见 (boolean)
*/
async setNavBarVisibility(visible: boolean): Promise<void> {
console.log(`[Service] setNavBarVisibility called with: ${visible}`);
try {
const visibleStr = String(visible); // 将布尔值转换为 'true' 或 'false'
console.log(`[Service] Attempting to save setting. Key: ${NAV_BAR_VISIBLE_KEY}, Value: ${visibleStr}`);
await settingsRepository.setSetting(NAV_BAR_VISIBLE_KEY, visibleStr);
console.log(`[Service] Successfully saved setting for key: ${NAV_BAR_VISIBLE_KEY}`);
} catch (error) {
console.error(`[Service] Error calling settingsRepository.setSetting for key ${NAV_BAR_VISIBLE_KEY}:`, error);
throw new Error('Failed to save nav bar visibility setting.');
}
} // *** 最后的方法后面不需要逗号 ***
};
packages/backend/src/settings/settings.controller.ts
+50 -2
View File
@@ -122,9 +122,57 @@ export const settingsController = {
}
},
// +++ 新增：获取导航栏可见性 +++
/**
* 获取导航栏可见性设置
*/
async getNavBarVisibility(req: Request, res: Response): Promise<void> {
try {
console.log('[Controller] Received request to get nav bar visibility.');
const isVisible = await settingsService.getNavBarVisibility();
console.log(`[Controller] Sending nav bar visibility to client: ${isVisible}`);
res.json({ visible: isVisible }); // 返回包含 visible 键的对象
} catch (error: any) {
console.error('[Controller] 获取导航栏可见性时出错:', error);
res.status(500).json({ message: '获取导航栏可见性失败', error: error.message });
}
},
/**
* 获取 IP 黑名单列表 (分页)
// +++ 新增：设置导航栏可见性 +++
/**
* 设置导航栏可见性
*/
async setNavBarVisibility(req: Request, res: Response): Promise<void> {
console.log('[Controller] Received request to set nav bar visibility.');
try {
const { visible } = req.body;
console.log('[Controller] Request body visible:', visible);
// 输入验证
if (typeof visible !== 'boolean') {
console.warn('[Controller] Invalid visible format received:', visible);
res.status(400).json({ message: '无效的请求体，"visible" 必须是一个布尔值' });
return;
}
console.log('[Controller] Calling settingsService.setNavBarVisibility...');
await settingsService.setNavBarVisibility(visible);
console.log('[Controller] settingsService.setNavBarVisibility completed successfully.');
// 记录审计日志 (可选)
// console.log('[Controller] Logging audit action: NAV_BAR_VISIBILITY_UPDATED');
// auditLogService.logAction('NAV_BAR_VISIBILITY_UPDATED', { visible });
console.log('[Controller] Sending success response.');
res.status(200).json({ message: '导航栏可见性已成功更新' });
} catch (error: any) {
console.error('[Controller] 设置导航栏可见性时出错:', error);
res.status(500).json({ message: '设置导航栏可见性失败', error: error.message });
}
},
/**
* 获取 IP 黑名单列表 (分页)
*/
async getIpBlacklist(req: Request, res: Response): Promise<void> {
try {
packages/backend/src/settings/settings.routes.ts
+5
View File
@@ -17,6 +17,11 @@ router.get('/focus-switcher-sequence', settingsController.getFocusSwitcherSequen
// PUT /api/v1/settings/focus-switcher-sequence - 更新焦点切换顺序
router.put('/focus-switcher-sequence', settingsController.setFocusSwitcherSequence);
// +++ 新增：导航栏可见性路由 +++
// GET /api/v1/settings/nav-bar-visibility - 获取导航栏可见性
router.get('/nav-bar-visibility', settingsController.getNavBarVisibility);
// PUT /api/v1/settings/nav-bar-visibility - 更新导航栏可见性
router.put('/nav-bar-visibility', settingsController.setNavBarVisibility);
// --- IP 黑名单管理路由 ---
// GET /api/v1/settings/ip-blacklist - 获取 IP 黑名单列表 (需要认证)
packages/frontend/src/App.vue
+6 -2
View File
@@ -26,7 +26,7 @@ const focusSwitcherStore = useFocusSwitcherStore(); // +++ 实例化焦点切换
const { isAuthenticated } = storeToRefs(authStore);
const { showPopupFileEditorBoolean } = storeToRefs(settingsStore);
const { isStyleCustomizerVisible } = storeToRefs(appearanceStore);
const { isLayoutVisible } = storeToRefs(layoutStore);
const { isLayoutVisible, isHeaderVisible } = storeToRefs(layoutStore); // 添加 isHeaderVisible
const { isConfiguratorVisible: isFocusSwitcherVisible } = storeToRefs(focusSwitcherStore);
const route = useRoute();
@@ -54,6 +54,9 @@ onMounted(() => {
// +++ 添加全局 Alt 键监听器 +++
window.addEventListener('keydown', handleGlobalKeyDown);
// +++ 加载 Header 可见性状态 +++
layoutStore.loadHeaderVisibility();
});
// +++ 添加卸载钩子以移除监听器 +++
@@ -221,7 +224,8 @@ const isElementVisibleAndFocusable = (element: HTMLElement): boolean => {
<template>
<div id="app-container">
<header v-if="!isWorkspaceRoute || isLayoutVisible"> <!-- *** 添加 v-if *** -->
<!-- *** 修改 v-if 条件以使用 isHeaderVisible *** -->
<header v-if="!isWorkspaceRoute || isHeaderVisible">
<nav ref="navRef">
<div class="nav-left"> <!-- Group left-aligned links -->
<RouterLink to="/">{{ t('nav.dashboard') }}</RouterLink>
packages/frontend/src/components/TerminalTabBar.vue
+61 -8
View File
@@ -1,18 +1,21 @@
<script setup lang="ts">
import { ref, computed, PropType } from 'vue'; // 导入 ref 和 computed
import { ref, computed, PropType, onMounted, watch } from 'vue'; // 导入 ref, computed, onMounted, watch
import { useI18n } from 'vue-i18n'; // 导入 i18n
import { storeToRefs } from 'pinia'; // *** 重新导入 storeToRefs ***
import { useRoute } from 'vue-router'; // 导入 useRoute
import { storeToRefs } from 'pinia'; // 导入 storeToRefs
import WorkspaceConnectionListComponent from './WorkspaceConnectionList.vue'; // 导入连接列表组件
import { useSessionStore } from '../stores/session.store'; // 导入 session store
import { useLayoutStore, type PaneName } from '../stores/layout.store'; // 导入布局 store 和类型
// 导入会话状态类型
import type { SessionTabInfoWithStatus } from '../stores/session.store'; // 导入更新后的类型
// *** 假设 layoutStore 会有这些状态和方法 ***
// import { useLayoutStore } from '../stores/layout.store';
// --- Setup ---
const { t } = useI18n(); // 初始化 i18n
const layoutStore = useLayoutStore(); // 初始化布局 store
// const { isLayoutVisible } = storeToRefs(layoutStore); // *** 移除 isLayoutVisible ***
// const route = useRoute(); // *** 移除 route ***
const { isHeaderVisible } = storeToRefs(layoutStore); // 从 layout store 获取主导航栏可见状态
const route = useRoute(); // 获取路由实例
// 定义 Props
const props = defineProps({
@@ -75,9 +78,51 @@ const openLayoutConfigurator = () => {
emit('open-layout-configurator'); // 发出事件
};
// --- Layout Visibility Logic ---
// 移除布局可见性切换逻辑
// --- End Layout Visibility Logic ---
// --- Header Visibility Logic ---
const isWorkspaceRoute = ref(route.path === '/workspace'); // 检查是否在 /workspace 路由
// 监视路由变化
watch(() => route.path, (newPath) => {
isWorkspaceRoute.value = newPath === '/workspace';
if (isWorkspaceRoute.value) {
// 进入 /workspace 时，不需要在这里加载 Header 状态，App.vue 会处理
console.log('[TabBar] Entered /workspace route. Header toggle button is now active.');
}
});
// 组件挂载时检查一次
onMounted(() => {
isWorkspaceRoute.value = route.path === '/workspace';
if (isWorkspaceRoute.value) {
// 初始加载时，不需要在这里加载 Header 状态，App.vue 会处理
console.log('[TabBar] Mounted on /workspace route. Header toggle button is now active.');
}
});
// 切换主导航栏可见性 (只在 workspace 路由下生效)
const toggleHeader = () => {
if (isWorkspaceRoute.value) {
console.log('[TabBar] Toggling header visibility');
// 调用 store action
layoutStore.toggleHeaderVisibility();
} else {
console.log('[TabBar] Not on /workspace route, toggle ignored.');
}
};
// 计算属性，用于确定眼睛图标的类
const eyeIconClass = computed(() => {
// 默认显示眼睛图标，如果主导航栏不可见，则显示斜杠眼睛
// 注意：这里假设 isHeaderVisible 为 true 时是可见的
return isHeaderVisible.value ? 'fas fa-eye' : 'fas fa-eye-slash';
});
// 计算属性，用于按钮的 title
const toggleButtonTitle = computed(() => {
// 调整 i18n key 和默认文本
return isHeaderVisible.value ? t('header.hide', '隐藏顶部导航') : t('header.show', '显示顶部导航');
});
// --- End Header Visibility Logic ---
</script>
@@ -106,7 +151,15 @@ const openLayoutConfigurator = () => {
</button>
</div>
<div class="action-buttons-container">
<!-- 移除布局可见性切换按钮 -->
<!-- Header Toggle Button (Only functional on /workspace) -->
<button
v-if="isWorkspaceRoute"
class="action-button header-toggle-button"
@click="toggleHeader"
:title="toggleButtonTitle"
>
<i :class="eyeIconClass"></i>
</button>
<!-- Layout Configurator Button -->
<button class="action-button layout-config-button" @click="openLayoutConfigurator" :title="t('layout.configure', '配置布局')"> <!-- 使用 t 函数 -->
<i class="fas fa-th-large"></i> <!-- 恢复为田字格图标 -->
packages/frontend/src/stores/layout.store.ts
+48 -1
View File
@@ -1,5 +1,7 @@
import { defineStore } from 'pinia';
import { ref, computed, watch, type Ref, type ComputedRef } from 'vue';
// 导入 axios 用于 API 调用
import axios from 'axios';
// 定义所有可用面板的名称
export type PaneName = 'connections' | 'terminal' | 'commandBar' | 'fileManager' | 'editor' | 'statusMonitor' | 'commandHistory' | 'quickCommands';
@@ -93,7 +95,9 @@ export const useLayoutStore = defineStore('layout', () => {
'editor', 'statusMonitor', 'commandHistory', 'quickCommands'
]);
// 新增：控制布局（Header/Footer）可见性的状态
const isLayoutVisible: Ref<boolean> = ref(true);
const isLayoutVisible: Ref<boolean> = ref(true); // 控制整体布局（Header/Footer）可见性
// 新增：控制主导航栏（Header）可见性的状态
const isHeaderVisible: Ref<boolean> = ref(true); // 默认可见
// --- 计算属性 ---
// 计算当前布局中正在使用的面板
@@ -176,6 +180,45 @@ export const useLayoutStore = defineStore('layout', () => {
function toggleLayoutVisibility() {
isLayoutVisible.value = !isLayoutVisible.value;
console.log(`[Layout Store] 布局可见性切换为: ${isLayoutVisible.value}`);
// 注意：这个状态目前不与后端同步
}
// 新增 Action: 从后端加载主导航栏可见性设置
async function loadHeaderVisibility() {
console.log('[Layout Store] Attempting to load header visibility from backend...');
try {
// --- 调用后端 API (复用 nav-bar-visibility 接口) ---
const response = await axios.get<{ visible: boolean }>('/api/v1/settings/nav-bar-visibility');
if (response && typeof response.data.visible === 'boolean') {
isHeaderVisible.value = response.data.visible;
console.log(`[Layout Store] Header visibility loaded from backend: ${isHeaderVisible.value}`);
} else {
console.warn('[Layout Store] Invalid response from backend for header visibility, using default.');
isHeaderVisible.value = true; // 默认值
}
} catch (error) {
console.error('[Layout Store] Failed to load header visibility from backend:', error);
// 出错时使用默认值
isHeaderVisible.value = true;
}
}
// 新增 Action: 切换主导航栏可见性并同步到后端
async function toggleHeaderVisibility() {
const newValue = !isHeaderVisible.value;
console.log(`[Layout Store] Toggling header visibility to: ${newValue}`);
isHeaderVisible.value = newValue; // 立即更新 UI
try {
// --- 调用后端 API (复用 nav-bar-visibility 接口) ---
await axios.put('/api/v1/settings/nav-bar-visibility', { visible: newValue });
console.log('[Layout Store] Header visibility saved to backend.');
} catch (error) {
console.error('[Layout Store] Failed to save header visibility to backend:', error);
// 可选：如果保存失败，回滚状态？
// isHeaderVisible.value = !newValue;
// alert('Failed to save preference.'); // 或者通知用户
}
}
// --- 持久化 ---
// 监听 layoutTree 的变化，并自动保存到 localStorage
@@ -217,5 +260,9 @@ export const useLayoutStore = defineStore('layout', () => {
// 新增：暴露布局可见性状态和切换方法
isLayoutVisible,
toggleLayoutVisibility,
// 新增：暴露主导航栏可见性状态和操作
isHeaderVisible,
loadHeaderVisibility,
toggleHeaderVisibility,
};
});
packages/frontend/src/views/WorkspaceView.vue
+5 -2
View File
@@ -28,7 +28,7 @@ const commandHistoryStore = useCommandHistoryStore();
const { sessionTabsWithStatus, activeSessionId, activeSession } = storeToRefs(sessionStore);
const { shareFileEditorTabsBoolean } = storeToRefs(settingsStore);
const { orderedTabs: globalEditorTabs, activeTabId: globalActiveEditorTabId } = storeToRefs(fileEditorStore);
const { layoutTree } = storeToRefs(layoutStore); // 获取布局树
const { layoutTree } = storeToRefs(layoutStore); // 只获取布局树
// --- 计算属性 (用于动态绑定编辑器 Props) ---
// 这些计算属性现在需要传递给 LayoutRenderer
@@ -61,6 +61,7 @@ const currentSearchTerm = ref(''); // 当前搜索的关键词
onMounted(() => {
console.log('[工作区视图] 组件已挂载。');
// 确保布局已初始化 (layoutStore 内部会处理)
// 确保布局已初始化 (layoutStore 内部会处理)
});
onBeforeUnmount(() => {
@@ -310,6 +311,7 @@ const handleCloseEditorTab = (tabId: string) => {
<template>
<div class="workspace-view">
<!-- TerminalTabBar 始终渲染 -->
<TerminalTabBar
:sessions="sessionTabsWithStatus"
:active-session-id="activeSessionId"
@@ -319,6 +321,7 @@ const handleCloseEditorTab = (tabId: string) => {
@request-add-connection-from-popup="handleRequestAddConnection"
/>
<!-- 移除 :class 绑定 -->
<div class="main-content-area">
<LayoutRenderer
v-if="layoutTree"
@@ -370,7 +373,7 @@ const handleCloseEditorTab = (tabId: string) => {
display: flex;
background-color: transparent;
flex-direction: column;
height: calc(100vh - 3.5rem); /* 保持原始高度计算 */
height: calc(100vh); /* 恢复原始高度计算 (假设 header 固定高度为 3.5rem) */
overflow: hidden;
}