manager/orion-visor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 同步终端交互配置项.

Browse Source
This commit is contained in:
lijiahangmax
2024-01-12 00:30:18 +08:00
parent cacc7de364
commit 6c0ad50b4e
7 changed files with 103 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/handler/preference/strategy/TerminalPreferenceStrategy.java
View File

@@ -30,7 +30,6 @@ public class TerminalPreferenceStrategy implements IPreferenceStrategy<TerminalP
.cursorBlink(true)
.build()
.toJsonString();
// 默认交互设置
String defaultInteractSetting = TerminalPreferenceModel.InteractSettingModel.builder()
.fastScrollModifier(true)

19
orion-ops-ui/src/store/modules/terminal/index.ts
View File

@@ -1,4 +1,12 @@
import type { TerminalActionBarSetting, TerminalDisplaySetting, TerminalPreference, TerminalState } from './types';
import type {
TerminalActionBarSetting,
TerminalDisplaySetting,
TerminalInteractSetting,
TerminalPluginsSetting,
TerminalPreference,
TerminalSessionSetting,
TerminalState
} from './types';
import type { TerminalTheme } from '@/api/asset/host-terminal';
import { getTerminalThemes } from '@/api/asset/host-terminal';
import { defineStore } from 'pinia';
@@ -17,6 +25,12 @@ export const PreferenceItem = {
DISPLAY_SETTING: 'displaySetting',
// 操作栏设置
ACTION_BAR_SETTING: 'actionBarSetting',
// 交互设置
INTERACT_SETTING: 'interactSetting',
// 插件设置
PLUGINS_SETTING: 'pluginsSetting',
// 会话设置
SESSION_SETTING: 'sessionSetting',
};
export default defineStore('terminal', {
@@ -26,6 +40,9 @@ export default defineStore('terminal', {
theme: {} as TerminalTheme,
displaySetting: {} as TerminalDisplaySetting,
actionBarSetting: {} as TerminalActionBarSetting,
interactSetting: {} as TerminalInteractSetting,
pluginsSetting: {} as TerminalPluginsSetting,
sessionSetting: {} as TerminalSessionSetting,
},
tabManager: new TerminalTabManager(),
sessionManager: new TerminalSessionManager()

29
orion-ops-ui/src/store/modules/terminal/types.ts
View File

@@ -13,6 +13,9 @@ export interface TerminalPreference {
theme: TerminalTheme;
displaySetting: TerminalDisplaySetting;
actionBarSetting: TerminalActionBarSetting;
interactSetting: TerminalInteractSetting;
pluginsSetting: TerminalPluginsSetting;
sessionSetting: TerminalSessionSetting;
}
// 显示设置
@@ -34,3 +37,29 @@ export interface TerminalActionBarSetting {
[key: string]: unknown;
}
// 交互设置
export interface TerminalInteractSetting {
fastScrollModifier: boolean;
altClickMovesCursor: boolean;
rightClickSelectsWord: boolean;
selectionChangeCopy: boolean;
copyAutoTrim: boolean;
pasteAutoTrim: boolean;
rightClickPaste: boolean;
enableRightClickMenu: boolean;
enableBell: boolean;
wordSeparator: string;
}
// 插件设置
export interface TerminalPluginsSetting {
enableWeblinkPlugin: boolean;
enableWebglPlugin: boolean;
enableImagePlugin: boolean;
}
// 会话设置
export interface TerminalSessionSetting {
terminalEmulationType: string;
scrollBackLine: number;
}

3
orion-ops-ui/src/views/host/terminal/components/view-setting/block-setting-item.vue
View File

@@ -64,5 +64,8 @@
:deep(.arco-input-wrapper) {
background-color: var(--color-fill-3)
}
:deep(.arco-select) {
background-color: var(--color-fill-3)
}
}
</style>

42
orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-interact-block.vue
View File

@@ -14,9 +14,7 @@
<!-- 快速滚动 -->
<block-setting-item label="快速滚动" desc="alt + 鼠标滚轮快速滚动">
<a-switch type="round"
v-model="formModel.fastScrollModifier"
checked-value="alt"
unchecked-value="none" />
v-model="formModel.fastScrollModifier" />
</block-setting-item>
<!-- 点击移动光标 -->
<block-setting-item label="点击移动光标" desc="alt + 鼠标左键可以切换光标位置">
@@ -57,7 +55,7 @@
<!-- 启用右键菜单 -->
<block-setting-item label="启用右键菜单" desc="右键终端将打开自定义菜单, 启用后需要关闭右键粘贴">
<a-switch type="round"
v-model="formModel.pasteAutoTrim" />
v-model="formModel.enableRightClickMenu" />
</block-setting-item>
</a-row>
<a-row class="mb16" align="stretch" :gutter="16">
@@ -67,7 +65,7 @@
v-model="formModel.enableBell" />
</block-setting-item>
<!-- 单词分隔符 -->
<block-setting-item label="单词分隔符" desc="在终端中双击文本将使用该分隔符进行分割">
<block-setting-item label="单词分隔符" desc="在终端中双击文本将使用该分隔符进行分割 (一般不用修改)">
<a-input size="small"
v-model="formModel.wordSeparator"
placeholder="单词分隔符"
@@ -85,26 +83,24 @@
</script>
<script lang="ts" setup>
// 快速滚动 fastScrollModifier
// 点击移动光标 altClickMovesCursor
// 右键选中词条 rightClickSelectsWord
// 自动将选中内容复制到剪切板 selectionChangeCopy onSelectionChange
// 复制时删除空格 pasteAutoTrim
// 粘贴时删除空格 copyAutoTrim
// 右键粘贴 rightClickPaste
// 启用右键菜单 enableRightClickMenu
// 启用响铃 enableBell
// 单词分隔符 /\()"'` -.,:;<>~!@#$%^&*|+=[]{}~?│ wordSeparator
import { ref } from 'vue';
import type { TerminalInteractSetting } from '@/store/modules/terminal/types';
import { ref, watch } from 'vue';
import { useTerminalStore } from '@/store';
import { PreferenceItem } from '@/store/modules/terminal';
import BlockSettingItem from './block-setting-item.vue';
const formModel = ref<Record<string, any>>({});
const { preference, updateTerminalPreference } = useTerminalStore();
const formModel = ref<TerminalInteractSetting>({ ...preference.interactSetting });
// 监听内容变化
watch(formModel, (v) => {
if (!v) {
return;
}
// 同步
updateTerminalPreference(PreferenceItem.INTERACT_SETTING, formModel.value, true);
}, { deep: true });
</script>

30
orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-plugins-block.vue
View File

@@ -10,11 +10,9 @@
<div class="terminal-setting-body setting-body">
<a-row class="mb16" align="stretch" :gutter="16">
<!-- 超链接插件 -->
<block-setting-item label="超链接插件" desc="自动检测 http url 并可以点击">
<block-setting-item label="超链接插件" desc="自动检测 http(https) url 并可以点击">
<a-switch type="round"
v-model="formModel.enableWeblinkPlugin"
checked-value="alt"
unchecked-value="none" />
v-model="formModel.enableWeblinkPlugin" />
</block-setting-item>
<!-- WebGL 渲染插件 -->
<block-setting-item label="WebGL 渲染插件" desc="使用 WebGL 加速渲染终端 (建议开启, 若无法开启终端请关闭)">
@@ -40,16 +38,24 @@
</script>
<script lang="ts" setup>
// fixme
// 自动检测 url 并可以点击 enableWeblinkPlugin
// 启用 webgl 支持 enableWebglPlugin
// 支持显示图片 使用 sixel 打开图片 enableImagePlugin
import { ref } from 'vue';
import type { TerminalPluginsSetting } from '@/store/modules/terminal/types';
import { ref, watch } from 'vue';
import { useTerminalStore } from '@/store';
import { PreferenceItem } from '@/store/modules/terminal';
import BlockSettingItem from './block-setting-item.vue';
const formModel = ref<Record<string, any>>({});
const { preference, updateTerminalPreference } = useTerminalStore();
const formModel = ref<TerminalPluginsSetting>({ ...preference.pluginsSetting });
// 监听内容变化
watch(formModel, (v) => {
if (!v) {
return;
}
// 同步
updateTerminalPreference(PreferenceItem.PLUGINS_SETTING, formModel.value, true);
}, { deep: true });
</script>

25
orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-session-block.vue
View File

@@ -22,7 +22,7 @@
size="small"
:min="1"
:max="10000"
placeholder="缓冲区行数"
placeholder="缓冲区行数 默认 1000 行"
allow-clear
hide-button />
</block-setting-item>
@@ -38,19 +38,26 @@
</script>
<script lang="ts" setup>
import type { TerminalSessionSetting } from '@/store/modules/terminal/types';
import { ref, watch } from 'vue';
import { useDictStore, useTerminalStore } from '@/store';
import { PreferenceItem } from '@/store/modules/terminal';
import { terminalEmulationTypeKey } from '../../types/terminal.const';
import BlockSettingItem from './block-setting-item.vue';
const { toOptions } = useDictStore();
const { preference, updateTerminalPreference } = useTerminalStore();
// TODO
// terminalEmulationType: xterm 256color
// scrollBackLine 保存在缓冲区的行数 1000
const formModel = ref<TerminalSessionSetting>({ ...preference.sessionSetting });
import { ref } from 'vue';
import BlockSettingItem from './block-setting-item.vue';
import { useDictStore } from '@/store';
const formModel = ref<Record<string, any>>({});
// 监听内容变化
watch(formModel, (v) => {
if (!v) {
return;
}
// 同步
updateTerminalPreference(PreferenceItem.SESSION_SETTING, formModel.value, true);
}, { deep: true });
</script>