feat: 添加“终端右键粘贴”设置

This commit is contained in:
Baobhan Sith
2025-05-12 22:23:01 +08:00
parent 2e69a00049
commit 978aa942fb
12 changed files with 232 additions and 125 deletions
@@ -114,7 +114,7 @@ watch(searchTerm, (newValue) => {
}
});
// NEW: Watch currentSessionCommandInput and sync searchTerm based on settings
// Watch currentSessionCommandInput and sync searchTerm based on settings
watch(currentSessionCommandInput, (newValue) => { // 监听计算属性
const target = commandInputSyncTarget.value;
if (target === 'quickCommands') {
@@ -213,7 +213,7 @@ const handleCommandInputKeydown = (event: KeyboardEvent) => {
}
};
// NEW: Handle blur event on command input
// Handle blur event on command input
const handleCommandInputBlur = () => {
// Reset selection in the target store when input loses focus
const target = commandInputSyncTarget.value;
+55 -25
View File
@@ -47,8 +47,9 @@ const {
const settingsStore = useSettingsStore(); // +++ 实例化设置 store +++
const {
autoCopyOnSelectBoolean,
terminalScrollbackLimitNumber // NEW: Import scrollback limit getter
} = storeToRefs(settingsStore); // +++ 获取选中即复制状态 +++
terminalScrollbackLimitNumber, // Import scrollback limit getter
terminalEnableRightClickPasteBoolean, // Import right-click paste setting getter
} = storeToRefs(settingsStore); // +++ 获取设置状态 +++
// 防抖函数
const debounce = (func: Function, delay: number) => {
@@ -121,7 +122,7 @@ const debouncedSetTerminalFontSize = debounce(async (size: number) => {
}
}, 500); // 500ms 防抖延迟,可以调整
// NEW: Helper function to convert setting value to xterm scrollback value
// Helper function to convert setting value to xterm scrollback value
const getScrollbackValue = (limit: number): number => {
if (limit === 0) {
return Infinity; // 0 means unlimited for xterm
@@ -129,6 +130,36 @@ const getScrollbackValue = (limit: number): number => {
return Math.max(0, limit); // Ensure non-negative, return the number otherwise
};
// --- 右键粘贴功能 ---
const handleContextMenuPaste = async (event: MouseEvent) => {
event.preventDefault(); // 阻止默认右键菜单
try {
const text = await navigator.clipboard.readText();
if (text && terminal) {
// 将粘贴的文本发送到后端
emitWorkspaceEvent('terminal:input', { sessionId: props.sessionId, data: text });
console.log('[Terminal] Pasted via Right Click');
}
} catch (err) {
console.error('[Terminal] Failed to paste via Right Click:', err);
}
};
const addContextMenuListener = () => {
if (terminalRef.value) {
terminalRef.value.addEventListener('contextmenu', handleContextMenuPaste);
console.log(`[Terminal ${props.sessionId}] Right-click paste listener added.`);
}
};
const removeContextMenuListener = () => {
if (terminalRef.value) {
terminalRef.value.removeEventListener('contextmenu', handleContextMenuPaste);
console.log(`[Terminal ${props.sessionId}] Right-click paste listener removed.`);
}
};
// --- 右键粘贴功能结束 ---
// 初始化终端
onMounted(() => {
if (terminalRef.value) {
@@ -142,7 +173,7 @@ onMounted(() => {
allowTransparency: true,
disableStdin: false,
convertEol: true,
scrollback: getScrollbackValue(terminalScrollbackLimitNumber.value), // NEW: Use setting from store
scrollback: getScrollbackValue(terminalScrollbackLimitNumber.value), // Use setting from store
scrollOnUserInput: true, // 输入时滚动到底部
...props.options, // 合并外部传入的选项
});
@@ -402,24 +433,20 @@ onMounted(() => {
});
}
// --- 添加右键粘贴功能 ---
if (terminalRef.value) {
terminalRef.value.addEventListener('contextmenu', async (event: MouseEvent) => {
event.preventDefault(); // 阻止默认右键菜单
try {
const text = await navigator.clipboard.readText();
if (text && terminal) {
// 将粘贴的文本发送到后端
emitWorkspaceEvent('terminal:input', { sessionId: props.sessionId, data: text });
console.log('[Terminal] Pasted via Right Click');
}
} catch (err) {
console.error('[Terminal] Failed to paste via Right Click:', err);
}
});
// 根据初始设置添加监听器
if (terminalEnableRightClickPasteBoolean.value) {
addContextMenuListener();
}
// 监听设置变化
watch(terminalEnableRightClickPasteBoolean, (newValue) => {
if (newValue) {
addContextMenuListener();
} else {
removeContextMenuListener();
}
});
// 重新添加鼠标滚轮缩放功能
if (terminalRef.value) {
@@ -506,11 +533,14 @@ onBeforeUnmount(() => {
selectionListenerDisposable.dispose();
}
if (terminalRef.value) {
}
});
// 确保在卸载时移除右键监听器
removeContextMenuListener();
if (terminalRef.value) {
}
});
// 暴露 write 方法给父组件 (可选)
const write = (data: string | Uint8Array) => {
terminal?.write(data);
@@ -79,7 +79,7 @@
</div>
</form>
</div>
<hr class="border-border/50"> <!-- NEW: Separator -->
<hr class="border-border/50">
<!-- Command Input Sync Target -->
<div class="settings-section-content">
<h3 class="text-base font-semibold text-foreground mb-3">{{ $t('settings.commandInputSync.title', '命令输入同步') }}</h3>
@@ -104,7 +104,7 @@
</div>
</form>
</div>
<hr class="border-border/50"> <!-- NEW: Separator -->
<hr class="border-border/50">
<!-- Show Connection Tags -->
<div class="settings-section-content">
<h3 class="text-base font-semibold text-foreground mb-3">{{ $t('settings.workspace.showConnectionTagsTitle', '显示连接标签') }}</h3>
@@ -124,7 +124,7 @@
</div>
</form>
</div>
<hr class="border-border/50"> <!-- NEW: Separator -->
<hr class="border-border/50">
<!-- Show Quick Command Tags -->
<div class="settings-section-content">
<h3 class="text-base font-semibold text-foreground mb-3">{{ $t('settings.workspace.showQuickCommandTagsTitle', '显示快捷指令标签') }}</h3>
@@ -144,7 +144,7 @@
</div>
</form>
</div>
<hr class="border-border/50"> <!-- NEW: Separator -->
<hr class="border-border/50">
<!-- Terminal Scrollback Limit -->
<div class="settings-section-content">
<h3 class="text-base font-semibold text-foreground mb-3">{{ t('settings.terminalScrollback.title', '终端回滚行数') }}</h3>
@@ -164,7 +164,7 @@
</div>
</form>
</div>
<hr class="border-border/50"> <!-- NEW: Separator -->
<hr class="border-border/50">
<!-- File Manager Delete Confirmation -->
<div class="settings-section-content">
<h3 class="text-base font-semibold text-foreground mb-3">{{ $t('settings.workspace.fileManagerDeleteConfirmTitle', '文件管理器删除确认') }}</h3>
@@ -183,6 +183,26 @@
</div>
</form>
</div>
<hr class="border-border/50">
<!-- Terminal Right Click Paste -->
<div class="settings-section-content">
<h3 class="text-base font-semibold text-foreground mb-3">{{ $t('settings.workspace.terminalRightClickPasteTitle', '终端右键粘贴') }}</h3>
<form @submit.prevent="handleUpdateTerminalRightClickPasteSetting" class="space-y-4">
<div class="flex items-center">
<input type="checkbox" id="terminalEnableRightClickPaste" v-model="terminalEnableRightClickPasteLocal"
class="h-4 w-4 rounded border-border text-primary focus:ring-primary mr-2 cursor-pointer">
<label for="terminalEnableRightClickPaste" class="text-sm text-foreground cursor-pointer select-none">{{ $t('settings.workspace.terminalEnableRightClickPasteLabel', '启用终端右键粘贴') }}</label>
</div>
<p class="text-xs text-text-secondary mt-1">{{ $t('settings.workspace.terminalEnableRightClickPasteDescription', '允许在终端区域内使用鼠标右键粘贴剪贴板内容。') }}</p>
<div class="flex items-center justify-between pt-2">
<button type="submit"
class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out text-sm font-medium">
{{ $t('common.save') }}
</button>
<p v-if="terminalEnableRightClickPasteMessage" :class="['text-sm', terminalEnableRightClickPasteSuccess ? 'text-success' : 'text-error']">{{ terminalEnableRightClickPasteMessage }}</p>
</div>
</form>
</div>
</div>
</div>
</template>
@@ -243,6 +263,11 @@ const {
fileManagerShowDeleteConfirmationMessage,
fileManagerShowDeleteConfirmationSuccess,
handleUpdateFileManagerDeleteConfirmation,
terminalEnableRightClickPasteLocal, // NEW
terminalEnableRightClickPasteLoading, // NEW (Not used in template, but available)
terminalEnableRightClickPasteMessage, // NEW
terminalEnableRightClickPasteSuccess, // NEW
handleUpdateTerminalRightClickPasteSetting, // NEW
} = useWorkspaceSettings();
</script>