From 826907380b7676f622e4e6c87073ca19cffcece3 Mon Sep 17 00:00:00 2001 From: lijiahangmax Date: Sat, 13 Jan 2024 15:45:29 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E7=BB=88=E7=AB=AF?= =?UTF-8?q?=E5=8F=B3=E9=94=AE=E8=8F=9C=E5=8D=95=E9=80=BB=E8=BE=91.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../model/TerminalPreferenceModel.java | 5 + .../strategy/TerminalPreferenceStrategy.java | 2 + .../src/store/modules/terminal/index.ts | 11 +- .../src/store/modules/terminal/types.ts | 3 +- .../host/terminal/assets/styles/layout.less | 17 +- .../components/layout/empty-recommend.vue | 1 + .../components/layout/icon-actions.vue | 4 +- .../view-setting/terminal-display-setting.vue | 3 + .../terminal-right-menu-block.vue | 227 ++++++++++++++++++ .../xterm/terminal-context-menu.vue | 37 ++- .../components/xterm/terminal-view.vue | 31 ++- .../terminal/handler/terminal-tab-manager.ts | 3 + .../src/views/host/terminal/index.vue | 2 +- .../host/terminal/types/terminal.const.ts | 20 +- .../host/terminal/types/terminal.type.ts | 7 + 15 files changed, 335 insertions(+), 38 deletions(-) create mode 100644 orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-right-menu-block.vue diff --git a/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/handler/preference/model/TerminalPreferenceModel.java b/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/handler/preference/model/TerminalPreferenceModel.java index 36044c17..ab98f0b7 100644 --- a/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/handler/preference/model/TerminalPreferenceModel.java +++ b/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/handler/preference/model/TerminalPreferenceModel.java @@ -8,6 +8,8 @@ import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor; +import java.util.List; + /** * 终端偏好模型 * @@ -33,6 +35,9 @@ public class TerminalPreferenceModel implements PreferenceModel { @Schema(description = "操作栏设置") private JSONObject actionBarSetting; + @Schema(description = "右键菜单设置") + private List rightMenuSetting; + @Schema(description = "交互设置") private JSONObject interactSetting; diff --git a/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/handler/preference/strategy/TerminalPreferenceStrategy.java b/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/handler/preference/strategy/TerminalPreferenceStrategy.java index 552c3077..ca11bcca 100644 --- a/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/handler/preference/strategy/TerminalPreferenceStrategy.java +++ b/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/handler/preference/strategy/TerminalPreferenceStrategy.java @@ -1,6 +1,7 @@ package com.orion.ops.module.infra.handler.preference.strategy; import com.alibaba.fastjson.JSONObject; +import com.orion.lang.utils.collect.Lists; import com.orion.net.host.ssh.TerminalType; import com.orion.ops.module.infra.handler.preference.model.TerminalPreferenceModel; import org.springframework.stereotype.Component; @@ -63,6 +64,7 @@ public class TerminalPreferenceStrategy implements IPreferenceStrategy ({ preference: { newConnectionType: 'group', - theme: {} as TerminalTheme, + theme: { + schema: {} as TerminalThemeSchema + } as TerminalTheme, displaySetting: {} as TerminalDisplaySetting, actionBarSetting: {} as TerminalActionBarSetting, + rightMenuSetting: [], interactSetting: {} as TerminalInteractSetting, pluginsSetting: {} as TerminalPluginsSetting, sessionSetting: {} as TerminalSessionSetting, diff --git a/orion-ops-ui/src/store/modules/terminal/types.ts b/orion-ops-ui/src/store/modules/terminal/types.ts index fe64c183..737e6760 100644 --- a/orion-ops-ui/src/store/modules/terminal/types.ts +++ b/orion-ops-ui/src/store/modules/terminal/types.ts @@ -1,6 +1,6 @@ import type { ITerminalSessionManager, ITerminalTabManager } from '@/views/host/terminal/types/terminal.type'; -import type { TerminalTheme } from '@/api/asset/host-terminal'; import type { AuthorizedHostQueryResponse } from '@/api/asset/asset-authorized-data'; +import type { TerminalTheme } from '@/api/asset/host-terminal'; export interface TerminalState { preference: TerminalPreference; @@ -15,6 +15,7 @@ export interface TerminalPreference { theme: TerminalTheme; displaySetting: TerminalDisplaySetting; actionBarSetting: TerminalActionBarSetting; + rightMenuSetting: Array, interactSetting: TerminalInteractSetting; pluginsSetting: TerminalPluginsSetting; sessionSetting: TerminalSessionSetting; diff --git a/orion-ops-ui/src/views/host/terminal/assets/styles/layout.less b/orion-ops-ui/src/views/host/terminal/assets/styles/layout.less index a8fcde0e..d510efe2 100644 --- a/orion-ops-ui/src/views/host/terminal/assets/styles/layout.less +++ b/orion-ops-ui/src/views/host/terminal/assets/styles/layout.less @@ -131,11 +131,13 @@ body .host-layout, .arco-modal-container { } // arco 暗色配色 +body[terminal-theme='dark'], body[terminal-theme='dark'] .host-layout, body[terminal-theme='dark'] .arco-modal-container { --color-white: rgba(255, 255, 255, 0.9); --color-black: #000000; --color-border: #333335; + --color-bg-popup: var(--color-bg-5); --color-bg-1: #17171a; --color-bg-2: #232324; --color-bg-3: #2a2a2b; @@ -260,7 +262,6 @@ body[terminal-theme='dark'] .arco-modal-container { display: flex; &.block-body { - display: flex; width: 100%; padding: 16px; border: 1px solid var(--color-fill-4); @@ -280,3 +281,17 @@ body[terminal-theme='dark'] .arco-modal-container { .terminal-tooltip-arrow { display: none; } + +// 终端右键菜单 +.terminal-context-menu { + .arco-dropdown-option { + padding: 0 6px; + line-height: 32px; + + &-content { + width: 120px; + display: flex; + align-items: center; + } + } +} diff --git a/orion-ops-ui/src/views/host/terminal/components/layout/empty-recommend.vue b/orion-ops-ui/src/views/host/terminal/components/layout/empty-recommend.vue index 1cd55885..30bbfb34 100644 --- a/orion-ops-ui/src/views/host/terminal/components/layout/empty-recommend.vue +++ b/orion-ops-ui/src/views/host/terminal/components/layout/empty-recommend.vue @@ -126,6 +126,7 @@ color: var(--color-content-text-1); cursor: pointer; transition: transform 0.3s ease; + will-change: transform; &:hover { transform: scale(1.04); diff --git a/orion-ops-ui/src/views/host/terminal/components/layout/icon-actions.vue b/orion-ops-ui/src/views/host/terminal/components/layout/icon-actions.vue index 2491ba4b..e41f1cda 100644 --- a/orion-ops-ui/src/views/host/terminal/components/layout/icon-actions.vue +++ b/orion-ops-ui/src/views/host/terminal/components/layout/icon-actions.vue @@ -11,10 +11,10 @@
+ @click="action.disabled === true ? false : action.click()">
diff --git a/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-display-setting.vue b/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-display-setting.vue index 9b578b73..e5160cc3 100644 --- a/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-display-setting.vue +++ b/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-display-setting.vue @@ -7,6 +7,8 @@ + + @@ -20,6 +22,7 @@ diff --git a/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-right-menu-block.vue b/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-right-menu-block.vue new file mode 100644 index 00000000..5056d21e --- /dev/null +++ b/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-right-menu-block.vue @@ -0,0 +1,227 @@ + + + + + + + diff --git a/orion-ops-ui/src/views/host/terminal/components/xterm/terminal-context-menu.vue b/orion-ops-ui/src/views/host/terminal/components/xterm/terminal-context-menu.vue index 031b0702..5683d530 100644 --- a/orion-ops-ui/src/views/host/terminal/components/xterm/terminal-context-menu.vue +++ b/orion-ops-ui/src/views/host/terminal/components/xterm/terminal-context-menu.vue @@ -1,15 +1,25 @@ @@ -21,14 +31,31 @@ diff --git a/orion-ops-ui/src/views/host/terminal/components/xterm/terminal-view.vue b/orion-ops-ui/src/views/host/terminal/components/xterm/terminal-view.vue index 3dc7cfbe..18155ef2 100644 --- a/orion-ops-ui/src/views/host/terminal/components/xterm/terminal-view.vue +++ b/orion-ops-ui/src/views/host/terminal/components/xterm/terminal-view.vue @@ -37,7 +37,8 @@ - +
@@ -92,9 +93,7 @@ const session = ref(); // TODO - // 右键菜单补充 enableRightClickMenu 粘贴逻辑 - // 设置快捷键 粘贴逻辑 - // 读取快捷键并且禁用快捷键 + // 设置快捷键 粘贴逻辑 禁用 // 截屏 // sftp @@ -124,14 +123,14 @@ session.value?.find(word, next, options); }; - // 操作禁用状态 - const actionsDisableStatus = computed>(() => { + // 操作启用状态 + const actionsEnabledStatus = computed>(() => { return { - paste: session.value?.canWrite, - interrupt: session.value?.canWrite, - enter: session.value?.canWrite, - commandEditor: session.value?.canWrite, - disconnect: session.value?.connected, + paste: !!session.value?.canWrite, + interrupt: !!session.value?.canWrite, + enter: !!session.value?.canWrite, + commandEditor: !!session.value?.canWrite, + disconnect: !!session.value?.connected, }; }); @@ -143,18 +142,16 @@ toBottom: () => session.value?.toBottom(), // 全选 checkAll: () => session.value?.selectAll(), - // 复制选中部分 - copy: () => session.value?.copySelection(), // 搜索 search: () => searchModal.value.toggle(), + // 复制选中部分 + copy: () => session.value?.copySelection(), // 粘贴 paste: async () => session.value?.pasteTrimEnd(await readText()), // ctrl + c interrupt: () => session.value?.paste(String.fromCharCode(3)), // 回车 enter: () => session.value?.paste(String.fromCharCode(13)), - // 命令编辑器 - commandEditor: () => editorModal.value.open('', ''), // 增大字号 fontSizePlus: () => { if (session.value) { @@ -175,6 +172,8 @@ } } }, + // 命令编辑器 + commandEditor: () => editorModal.value.open('', ''), // 清空 clear: () => session.value?.clear(), // 断开连接 @@ -190,7 +189,7 @@ icon: s.icon, content: s.content, visible: preference.actionBarSetting[s.item] !== false, - disabled: actionsDisableStatus.value[s.item] !== false, + disabled: actionsEnabledStatus.value[s.item] === false, click: () => { actionsClickHandler[s.item] && actionsClickHandler[s.item](); } diff --git a/orion-ops-ui/src/views/host/terminal/handler/terminal-tab-manager.ts b/orion-ops-ui/src/views/host/terminal/handler/terminal-tab-manager.ts index a75a3c9c..0815357b 100644 --- a/orion-ops-ui/src/views/host/terminal/handler/terminal-tab-manager.ts +++ b/orion-ops-ui/src/views/host/terminal/handler/terminal-tab-manager.ts @@ -9,6 +9,9 @@ export default class TerminalTabManager implements ITerminalTabManager { public items: Array; constructor() { + // fixme + // this.active = InnerTabs.SHORTCUT_SETTING.key; + // this.items = [InnerTabs.SHORTCUT_SETTING]; this.active = InnerTabs.NEW_CONNECTION.key; this.items = [InnerTabs.NEW_CONNECTION]; } diff --git a/orion-ops-ui/src/views/host/terminal/index.vue b/orion-ops-ui/src/views/host/terminal/index.vue index c48d68e1..b1749152 100644 --- a/orion-ops-ui/src/views/host/terminal/index.vue +++ b/orion-ops-ui/src/views/host/terminal/index.vue @@ -35,6 +35,7 @@ import { ref, onBeforeMount, onUnmounted, onMounted } from 'vue'; import { dictKeys, InnerTabs } from './types/terminal.const'; import { useCacheStore, useDictStore, useTerminalStore } from '@/store'; + import useLoading from '@/hooks/loading'; import TerminalHeader from './components/layout/terminal-header.vue'; import TerminalLeftSidebar from './components/layout/terminal-left-sidebar.vue'; import TerminalRightSidebar from './components/layout/terminal-right-sidebar.vue'; @@ -42,7 +43,6 @@ import LoadingSkeleton from './components/layout/loading-skeleton.vue'; import './assets/styles/layout.less'; import 'xterm/css/xterm.css'; - import useLoading from '@/hooks/loading'; const terminalStore = useTerminalStore(); const dictStore = useDictStore(); diff --git a/orion-ops-ui/src/views/host/terminal/types/terminal.const.ts b/orion-ops-ui/src/views/host/terminal/types/terminal.const.ts index 8643c7e2..e3176e0d 100644 --- a/orion-ops-ui/src/views/host/terminal/types/terminal.const.ts +++ b/orion-ops-ui/src/views/host/terminal/types/terminal.const.ts @@ -80,18 +80,18 @@ export const ActionBarItems = [ item: 'checkAll', icon: 'icon-expand', content: '全选', + }, { + item: 'search', + icon: 'icon-find-replace', + content: '搜索', }, { item: 'copy', icon: 'icon-copy', - content: '复制选中部分', + content: '复制', }, { item: 'paste', icon: 'icon-paste', content: '粘贴', - }, { - item: 'search', - icon: 'icon-find-replace', - content: '搜索', }, { item: 'interrupt', icon: 'icon-formula', @@ -100,10 +100,6 @@ export const ActionBarItems = [ item: 'enter', icon: 'icon-play-arrow-fill', content: '回车', - }, { - item: 'commandEditor', - icon: 'icon-code-square', - content: '命令编辑器', }, { item: 'fontSizePlus', icon: 'icon-zoom-in', @@ -112,6 +108,10 @@ export const ActionBarItems = [ item: 'fontSizeSubtract', icon: 'icon-zoom-out', content: '减小字号', + }, { + item: 'commandEditor', + icon: 'icon-code-square', + content: '命令编辑器', }, { item: 'clear', icon: 'icon-delete', @@ -123,7 +123,7 @@ export const ActionBarItems = [ }, { item: 'close', icon: 'icon-close', - content: '关闭', + content: '关闭终端', } ]; diff --git a/orion-ops-ui/src/views/host/terminal/types/terminal.type.ts b/orion-ops-ui/src/views/host/terminal/types/terminal.type.ts index 5dc016bd..9e07da68 100644 --- a/orion-ops-ui/src/views/host/terminal/types/terminal.type.ts +++ b/orion-ops-ui/src/views/host/terminal/types/terminal.type.ts @@ -38,6 +38,13 @@ export interface CombinedHandlerItem { host?: HostQueryResponse; } +// 右键菜单元素 +export interface ContextMenuItem { + item: string; + icon: string; + content: string; +} + // ssh 额外配置 export interface SshExtraModel { authType?: string;