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-17 08:59:01 +08:00
parent 4c4f945177
commit f309684817
3 changed files with 98 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/src/components/MonacoEditor.vue
+53
View File
@@ -7,6 +7,8 @@ import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import * as monaco from 'monaco-editor';
// Props for the component (will be expanded later)
const fontSize = ref(14); // 添加字体大小状态，默认 14
const props = defineProps({
modelValue: { // Use modelValue for v-model support
type: String,
@@ -38,6 +40,7 @@ onMounted(() => {
value: props.modelValue,
language: props.language,
theme: props.theme,
fontSize: fontSize.value, // 使用 ref 作为初始字体大小
automaticLayout: true, // Auto resize editor on container resize
readOnly: props.readOnly,
// Add more options as needed
@@ -73,6 +76,56 @@ onMounted(() => {
},
});
// Listen for content changes and emit update event for v-model
editorInstance.onDidChangeModelContent(() => {
if (editorInstance) {
const currentValue = editorInstance.getValue();
if (currentValue !== props.modelValue) {
emit('update:modelValue', currentValue);
}
}
});
// Add Ctrl+S / Cmd+S keybinding for saving
editorInstance.addAction({
id: 'save-file',
label: 'Save File',
keybindings: [
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS,
],
precondition: undefined, // Fix: Use undefined instead of null
keybindingContext: undefined, // Fix: Use undefined instead of null
contextMenuGroupId: 'navigation', // Optional: where to show in context menu
contextMenuOrder: 1.5, // Optional: order in context menu
run: () => {
console.log('[MonacoEditor] Save action triggered (Ctrl+S / Cmd+S)');
emit('request-save');
},
});
// 添加鼠标滚轮缩放功能
editorContainer.value.addEventListener('wheel', (event: WheelEvent) => {
// 只在按下Ctrl键时才触发缩放
if (event.ctrlKey) {
event.preventDefault(); // 阻止默认的滚动行为
// 根据滚轮方向调整字体大小
if (event.deltaY < 0) {
// 向上滚动，增大字体
fontSize.value = Math.min(fontSize.value + 1, 40); // 设置最大字体大小为40
} else {
// 向下滚动，减小字体
fontSize.value = Math.max(fontSize.value - 1, 8); // 设置最小字体大小为8
}
// 更新编辑器字体大小
if (editorInstance) {
editorInstance.updateOptions({ fontSize: fontSize.value });
console.log(`[MonacoEditor] Font size changed to: ${fontSize.value}`); // 添加日志
}
}
}, { passive: false }); // 设置 passive: false 允许 preventDefault
}
});
packages/frontend/src/components/Terminal.vue
+34 -20
View File
@@ -114,8 +114,8 @@ onMounted(() => {
// console.log(`[Terminal ${props.sessionId}] ResizeObserver triggered. Height: ${height}, isActive: ${props.isActive}`);
if (height > 0 && terminal) { // 仅在可见时调整
try {
fitAddon?.fit(); // 视觉上适应
// 触发防抖的 resize 发送，主要应对窗口 resize
// fitAddon?.fit(); // 视觉上适应 <-- 移除此行，不再强制 fit 内部行数
// 触发防抖的 resize 发送，通知后端潜在的尺寸变化
debouncedEmitResize(terminal);
} catch (e) {
console.warn("Fit addon resize failed (observer):", e);
@@ -166,6 +166,15 @@ onMounted(() => {
if (done) break;
if (terminal && value) {
terminal.write(value); // 将流数据写入终端
// 尝试在写入数据后调用 fit，看是否能触发滚动条
nextTick(() => { // 使用 nextTick 确保 DOM 更新后再 fit
try {
fitAddon?.fit();
// 注意：这里可能不需要再 emit resize，因为 fit 主要是为了更新内部布局以适应外部滚动
} catch (fitError) {
console.warn("Fit addon failed after writing stream data:", fitError);
}
});
}
}
} catch (error) {
@@ -182,9 +191,29 @@ onMounted(() => {
// 聚焦终端
terminal.focus();
// 添加鼠标滚轮缩放功能
// 重新添加鼠标滚轮缩放功能
if (terminalRef.value) {
terminalRef.value.addEventListener('wheel', (event: WheelEvent) => {
// // 只在按下Ctrl键时才触发缩放
// if (event.ctrlKey) {
// event.preventDefault(); // 阻止默认的滚动行为
// // 根据滚轮方向调整字体大小
// if (event.deltaY < 0) {
// // 向上滚动，增大字体
// fontSize.value = Math.min(fontSize.value + 1, 40); // 设置最大字体大小为40
// } else {
// // 向下滚动，减小字体
// fontSize.value = Math.max(fontSize.value - 1, 8); // 设置最小字体大小为8
// }
// // 更新终端字体大小
// if (terminal) {
// terminal.options.fontSize = fontSize.value;
// // 调整终端大小以适应新的字体大小
// fitAddon?.fit();
// emit('resize', { cols: terminal.cols, rows: terminal.rows });
// }
// 只在按下Ctrl键时才触发缩放
if (event.ctrlKey) {
event.preventDefault(); // 阻止默认的滚动行为
@@ -235,26 +264,11 @@ defineExpose({ write });
</template>
<style scoped>
/* 恢复默认样式，让 xterm 内部处理滚动 */
.terminal-container {
width: 100%;
height: 100%; /* 高度需要由父容器控制 */
overflow: hidden; /* 防止滚动条出现 */
}
/* 终端屏幕样式 - 移除上下间距 */
.terminal-container :deep(.xterm-screen) {
padding: 0; /* 移除内边距，解决上下有间距的问题 */
box-sizing: border-box;
/* 覆盖 xterm.css 可能设置的 position: absolute */
position: relative !important;
width: 100% !important;
height: 100% !important;
}
/* 确保 viewport 填满容器，隐藏滚动条 */
.terminal-container :deep(.xterm-viewport) {
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
}
/* 移除之前添加的 :deep 样式 */
</style>
packages/frontend/src/views/WorkspaceView.vue
+11 -18
View File
@@ -189,8 +189,7 @@ onBeforeUnmount(() => {
<splitpanes class="default-theme" :horizontal="false" style="height: 100%">
<!-- 1. 左侧边栏 Pane (连接列表) -->
<pane v-if="paneVisibility.connections" size="15" min-size="10" class="sidebar-pane pane-with-title"> <!-- 使用 v-if 控制, 添加 class -->
<PaneTitleBar :title="t('layout.pane.connections')" pane-name="connections" />
<pane v-if="paneVisibility.connections" size="15" min-size="10" class="sidebar-pane"> <!-- 移除 pane-with-title class -->
<WorkspaceConnectionListComponent
class="pane-content"
@connect-request="(id) => { console.log(`[WorkspaceView] Received 'connect-request' event for ID: ${id}`); sessionStore.handleConnectRequest(id); }"
@@ -205,8 +204,7 @@ onBeforeUnmount(() => {
<!-- 上下分割 (终端 | 命令栏 | 文件管理器) -->
<splitpanes :horizontal="true" style="height: 100%" :dbl-click-splitter="false">
<!-- 上方 Pane (终端) -->
<pane v-if="paneVisibility.terminal" size="55" min-size="20" class="terminal-pane pane-with-title"> <!-- 使用 v-if 控制, 添加 class -->
<PaneTitleBar :title="t('layout.pane.terminal')" pane-name="terminal" />
<pane v-if="paneVisibility.terminal" size="55" min-size="20" class="terminal-pane"> <!-- 移除 pane-with-title class -->
<div class="pane-content terminal-content-wrapper"> <!-- 添加包裹 div -->
<div
v-for="tabInfo in sessionTabsWithStatus"
@@ -239,8 +237,7 @@ onBeforeUnmount(() => {
</pane> <!-- End Command Bar Pane -->
<!-- 下方 Pane (文件管理器区域 - 包含新的水平分割) -->
<pane v-if="paneVisibility.fileManager" size="40" min-size="15" class="file-manager-area-pane pane-with-title"> <!-- 使用 v-if 控制, 添加 class -->
<PaneTitleBar :title="t('layout.pane.fileManager')" pane-name="fileManager" />
<pane v-if="paneVisibility.fileManager" size="40" min-size="15" class="file-manager-area-pane"> <!-- 移除 pane-with-title class -->
<!-- 新增：内部水平分割，允许未来添加列 -->
<splitpanes :horizontal="false" style="height: 100%" :dbl-click-splitter="false" class="pane-content"> <!-- 添加 class -->
<!-- 初始的文件管理器 Pane -->
@@ -274,8 +271,7 @@ onBeforeUnmount(() => {
</pane> <!-- End Middle Pane -->
<!-- 3. 右侧区域 1 Pane (文件编辑器) -->
<pane v-if="paneVisibility.editor" size="20" min-size="15" class="file-editor-pane pane-with-title"> <!-- 使用 v-if 控制, 添加 class -->
<PaneTitleBar :title="t('layout.pane.editor')" pane-name="editor" />
<pane v-if="paneVisibility.editor" size="20" min-size="15" class="file-editor-pane"> <!-- 移除 pane-with-title class -->
<FileEditorContainer
class="pane-content"
:tabs="editorTabs"
@@ -289,8 +285,7 @@ onBeforeUnmount(() => {
</pane>
<!-- 4. 右侧区域 2 Pane (状态监视器) -->
<pane v-if="paneVisibility.statusMonitor" size="15" min-size="10" class="sidebar-pane status-monitor-pane pane-with-title"> <!-- 使用 v-if 控制, 添加 class -->
<PaneTitleBar :title="t('layout.pane.statusMonitor')" pane-name="statusMonitor" />
<pane v-if="paneVisibility.statusMonitor" size="15" min-size="10" class="sidebar-pane status-monitor-pane"> <!-- 移除 pane-with-title class -->
<div class="pane-content status-monitor-content-wrapper"> <!-- 添加包裹 div -->
<div
v-for="tabInfo in sessionTabsWithStatus"
@@ -342,11 +337,7 @@ onBeforeUnmount(() => {
}
/* 为 Pane 添加一些基本样式 */
.pane-with-title { /* 给包含标题栏的 Pane 添加基础样式 */
display: flex;
flex-direction: column;
overflow: hidden;
}
/* .pane-with-title 已移除 */
.pane-content { /* 让内容区域填充剩余空间 */
flex-grow: 1;
overflow: auto; /* 或者 hidden，根据需要 */
@@ -362,7 +353,9 @@ onBeforeUnmount(() => {
.file-manager-area-pane, /* 文件管理器区域 Pane */
.file-manager-pane, /* 内部文件管理器 Pane */
.status-monitor-pane { /* 状态监视器样式 */
/* display: flex; flex-direction: column; overflow: hidden; 已被 pane-with-title 或 pane-content 处理 */
display: flex; /* 确保 flex 布局 */
flex-direction: column; /* 确保列方向 */
overflow: hidden; /* 默认隐藏溢出 */
background-color: #f8f9fa; /* 默认背景色 */
}
.middle-pane {
@@ -396,7 +389,7 @@ onBeforeUnmount(() => {
flex-grow: 1;
display: flex;
flex-direction: column;
overflow: hidden;
overflow: hidden; /* <-- 重新添加，隐藏外部滚动条 */
}
.file-editor-pane {
background-color: #f8f9fa; /* 外层 pane 背景 */
@@ -440,7 +433,7 @@ onBeforeUnmount(() => {
flex-grow: 1;
display: flex;
flex-direction: column;
overflow: hidden;
overflow: hidden; /* <-- 重新添加，隐藏外部滚动条 */
}
/* 文件管理器包装器 (内部组件应填充) */