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

♻️ 推荐组合页面添加打开 sftp.

Browse Source
This commit is contained in:
lijiahang
2024-02-05 15:28:09 +08:00
parent 13786bbc7c
commit 6507119c68
9 changed files with 137 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -197,7 +197,7 @@ export default defineStore('terminal', {
const sessionTab = this.panelManager
.getCurrentPanel()
.getCurrentTab();
if (!sessionTab || sessionTab.type !== PanelSessionType.TERMINAL.type) {
if (!sessionTab || sessionTab.type !== PanelSessionType.SSH.type) {
return;
}
// 获取会话

123
orion-ops-ui/src/views/host/terminal/components/layout/empty-recommend.vue
View File

@@ -3,17 +3,60 @@
<div class="terminal-setting-wrapper">
<!-- 组合容器 -->
<div class="combined-container">
<!-- 新建连接 -->
<div class="combined-handler" v-for="(handler, index) in combinedHandlers"
:key="index"
@click="clickHandlerItem(handler)">
<!-- 图标 -->
<div class="combined-handler-icon">
<component :is="handler.icon" />
:key="index">
<!-- 左侧固定 -->
<div class="combined-handler-left">
<!-- 图标 -->
<div class="combined-handler-icon">
<component :is="handler.icon" />
</div>
<!-- 内容 -->
<div class="combined-handler-text">
{{ handler.title }}
</div>
</div>
<!-- 内容 -->
<div class="combined-handler-text">
{{ handler.title }}
<!-- 操作 -->
<div class="combined-handler-actions">
<!-- 跳转页面 -->
<a-tooltip position="top"
:mini="true"
:auto-fix-position="false"
content-class="terminal-tooltip-content"
arrow-class="terminal-tooltip-content"
content="跳转页面">
<span v-if="!handler.host"
class="click-icon-wrapper"
@click="openTab(handler)">
<icon-right />
</span>
</a-tooltip>
<!-- 打开 SSH -->
<a-tooltip position="top"
:mini="true"
:auto-fix-position="false"
content-class="terminal-tooltip-content"
arrow-class="terminal-tooltip-content"
content="打开 SSH">
<span v-if="handler.host"
class="click-icon-wrapper"
@click="openSession(handler.host as any, PanelSessionType.SSH)">
<icon-thunderbolt />
</span>
</a-tooltip>
<!-- 打开 SFTP -->
<a-tooltip position="top"
:mini="true"
:auto-fix-position="false"
content-class="terminal-tooltip-content"
arrow-class="terminal-tooltip-content"
content="打开 SFTP">
<span v-if="handler.host"
class="click-icon-wrapper"
@click="openSession(handler.host as any, PanelSessionType.SFTP)">
<icon-folder />
</span>
</a-tooltip>
</div>
</div>
</div>
@@ -43,15 +86,12 @@
icon: TerminalTabs.NEW_CONNECTION.icon
}]);
// 点击组合操作元素
const clickHandlerItem = (item: CombinedHandlerItem) => {
// 打开 tab
const openTab = (item: CombinedHandlerItem) => {
if (item.host) {
// 打开会话
openSession(item.host as HostQueryResponse, PanelSessionType.TERMINAL);
} else {
// 打开 tab
tabManager.openTab(item.tab as TerminalTabItem);
return;
}
tabManager.openTab(item.tab as TerminalTabItem);
};
// 组合主机列表
@@ -98,6 +138,8 @@
@container-width: 406px;
@container-height: 448px;
@handler-height: 44px;
@icon-size: @handler-height;
@actions-width: 80px;
.combined-container {
padding: 12px;
@@ -116,7 +158,7 @@
}
.combined-handler {
width: calc(@container-width - @transform-x);
width: @container-width - @transform-x;
height: @handler-height;
border-radius: 4px;
margin-bottom: 6px;
@@ -124,16 +166,30 @@
background-color: var(--color-fill-2);
display: flex;
align-items: center;
cursor: pointer;
justify-content: space-between;
transition: all 0.2s;
&:hover {
width: @container-width;
.combined-handler-left {
width: calc(100% - @actions-width);
}
.combined-handler-actions {
display: flex;
}
}
&-left {
width: 100%;
display: flex;
align-items: center;
}
&-icon {
width: @handler-height;
height: @handler-height;
width: @icon-size;
height: @icon-size;
display: flex;
align-items: center;
justify-content: center;
@@ -142,16 +198,31 @@
&-text {
height: 100%;
width: calc(100% - @handler-height - 12px);
width: calc(100% - @icon-size - 12px);
display: flex;
align-items: center;
font-size: 12px;
overflow: hidden;
white-space: nowrap;
}
&-wrapper {
display: block;
overflow: hidden;
white-space: pre;
text-overflow: ellipsis;
&-actions {
display: none;
width: @actions-width;
height: 100%;
padding-right: 8px;
align-items: center;
justify-content: flex-end;
.click-icon-wrapper {
font-size: 18px;
padding: 4px;
border-radius: 4px;
margin: 0 4px;
&:hover {
background: var(--color-neutral-4);
}
}
}
}

2
orion-ops-ui/src/views/host/terminal/components/layout/layout-header.vue
View File

@@ -133,7 +133,7 @@
align-items: center;
.tab-title-icon {
font-size: 18px;
font-size: 16px;
margin-right: 6px;
}
}

6
orion-ops-ui/src/views/host/terminal/components/layout/terminal-panel.vue
View File

@@ -62,14 +62,14 @@
// 失焦自动终端
if (before) {
const beforeTab = props.panel.items.find(s => s.key === before);
if (beforeTab && beforeTab?.type === PanelSessionType.TERMINAL.type) {
if (beforeTab && beforeTab?.type === PanelSessionType.SSH.type) {
sessionManager.getSession(before)?.blur();
}
}
// 终端自动聚焦
if (active) {
const activeTab = props.panel.items.find(s => s.key === active);
if (activeTab && activeTab?.type === PanelSessionType.TERMINAL.type) {
if (activeTab && activeTab?.type === PanelSessionType.SSH.type) {
sessionManager.getSession(active)?.focus();
}
}
@@ -102,7 +102,7 @@
align-items: center;
.tab-title-icon {
font-size: 18px;
font-size: 16px;
margin-right: 6px;
}
}

6
orion-ops-ui/src/views/host/terminal/components/layout/terminal-panels-view.vue
View File

@@ -66,15 +66,15 @@
// 打开新建连接弹框
hostModal.value.open(panelManager.active);
break;
case TerminalShortcutKeys.COPY_TERMINAL:
case TerminalShortcutKeys.COPY_SESSION:
// 复制会话
const currentTab = panelManager.getCurrentPanel().getCurrentTab();
if (currentTab) {
copySession(currentTab, panelManager.active);
}
break;
case TerminalShortcutKeys.CLOSE_TERMINAL:
// 关闭终端
case TerminalShortcutKeys.CLOSE_SESSION:
// 关闭会话
const panel = panelManager.getCurrentPanel();
if (panel.active) {
panel.deleteTab(panel.active);

2
orion-ops-ui/src/views/host/terminal/components/new-connection/host-list-modal.vue
View File

@@ -98,7 +98,7 @@
// 打开终端
const clickHost = (item: HostQueryResponse) => {
openSession(item, PanelSessionType.TERMINAL, panelIndex.value);
openSession(item, PanelSessionType.SSH, panelIndex.value);
setVisible(false);
};

2
orion-ops-ui/src/views/host/terminal/components/new-connection/host-list-view.vue
View File

@@ -119,7 +119,7 @@
arrow-class="terminal-tooltip-content"
content="打开 SSH">
<div class="terminal-sidebar-icon-wrapper">
<div class="terminal-sidebar-icon" @click="openSession(item, PanelSessionType.TERMINAL)">
<div class="terminal-sidebar-icon" @click="openSession(item, PanelSessionType.SSH)">
<icon-thunderbolt />
</div>
</div>

41
orion-ops-ui/src/views/host/terminal/types/terminal.const.ts
View File

@@ -52,10 +52,16 @@ export const ExtraSshAuthType = {
CUSTOM_IDENTITY: 'CUSTOM_IDENTITY',
};
// 终端面板 tab 类型
export const TerminalPanelTabType = {
TERMINAL: 'terminal',
SFTP: 'sftp',
// 面板会话 tab 类型
export const PanelSessionType = {
SSH: {
type: 'ssh',
icon: 'icon-desktop'
},
SFTP: {
type: 'sftp',
icon: 'icon-folder'
},
};
// 终端状态
@@ -133,7 +139,8 @@ export const ActionBarItems = [
export const TerminalShortcutType = {
GLOBAL: 1,
PANEL: 2,
TERMINAL: 3
SESSION: 3,
TERMINAL: 4
};
// 终端操作快捷键 key
@@ -148,14 +155,14 @@ export const TerminalShortcutKeys = {
OPEN_NEW_CONNECT_TAB: 'openNewConnectTab',
// 打开新建连接弹框
OPEN_NEW_CONNECT_MODAL: 'openNewConnectModal',
// 复制终端
COPY_TERMINAL: 'copyTerminal',
// 关闭终端
CLOSE_TERMINAL: 'closeTerminal',
// 切换至前一个终端
CHANGE_TO_PREV_TERMINAL: 'changeToPrevTerminal',
// 切换至后一个终端
CHANGE_TO_NEXT_TERMINAL: 'changeToNextTerminal',
// 复制会话
COPY_SESSION: 'copySession',
// 关闭会话
CLOSE_SESSION: 'closeSession',
// 切换至前一个会话
CHANGE_TO_PREV_SESSION: 'changeToPrevSession',
// 切换至后一个会话
CHANGE_TO_NEXT_SESSION: 'changeToNextSession',
};
// 终端操作快捷键
@@ -181,19 +188,19 @@ export const TerminalShortcutItems: Array<ShortcutKeyItem> = [
content: '打开新建连接弹框',
type: TerminalShortcutType.PANEL
}, {
item: TerminalShortcutKeys.COPY_TERMINAL,
item: TerminalShortcutKeys.COPY_SESSION,
content: '复制终端',
type: TerminalShortcutType.PANEL
}, {
item: TerminalShortcutKeys.CLOSE_TERMINAL,
item: TerminalShortcutKeys.CLOSE_SESSION,
content: '关闭终端',
type: TerminalShortcutType.PANEL
}, {
item: TerminalShortcutKeys.CHANGE_TO_PREV_TERMINAL,
item: TerminalShortcutKeys.CHANGE_TO_PREV_SESSION,
content: '切换至前一个终端',
type: TerminalShortcutType.PANEL
}, {
item: TerminalShortcutKeys.CHANGE_TO_NEXT_TERMINAL,
item: TerminalShortcutKeys.CHANGE_TO_NEXT_SESSION,
content: '切换至后一个终端',
type: TerminalShortcutType.PANEL
}, {

6
orion-ops-ui/src/views/host/terminal/types/terminal.type.ts
View File

@@ -66,6 +66,12 @@ export interface SshExtraModel {
identityId?: number;
}
// session tab
export interface PanelSessionTab {
type: string;
icon: string;
}
// 终端协议
export interface Protocol {
type: string;