-
-
-
+ :key="index">
+
+
+
+
+
+
+
+
+ {{ handler.title }}
+
-
-
- {{ handler.title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -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);
+ }
}
}
}
diff --git a/orion-ops-ui/src/views/host/terminal/components/layout/layout-header.vue b/orion-ops-ui/src/views/host/terminal/components/layout/layout-header.vue
index 411d139b..2b0fae8d 100644
--- a/orion-ops-ui/src/views/host/terminal/components/layout/layout-header.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/layout/layout-header.vue
@@ -133,7 +133,7 @@
align-items: center;
.tab-title-icon {
- font-size: 18px;
+ font-size: 16px;
margin-right: 6px;
}
}
diff --git a/orion-ops-ui/src/views/host/terminal/components/layout/terminal-panel.vue b/orion-ops-ui/src/views/host/terminal/components/layout/terminal-panel.vue
index 582ab3c9..1719d64c 100644
--- a/orion-ops-ui/src/views/host/terminal/components/layout/terminal-panel.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/layout/terminal-panel.vue
@@ -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;
}
}
diff --git a/orion-ops-ui/src/views/host/terminal/components/layout/terminal-panels-view.vue b/orion-ops-ui/src/views/host/terminal/components/layout/terminal-panels-view.vue
index b13d61e4..836ddc05 100644
--- a/orion-ops-ui/src/views/host/terminal/components/layout/terminal-panels-view.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/layout/terminal-panels-view.vue
@@ -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);
diff --git a/orion-ops-ui/src/views/host/terminal/components/new-connection/host-list-modal.vue b/orion-ops-ui/src/views/host/terminal/components/new-connection/host-list-modal.vue
index a05530f3..e12389a7 100644
--- a/orion-ops-ui/src/views/host/terminal/components/new-connection/host-list-modal.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/new-connection/host-list-modal.vue
@@ -98,7 +98,7 @@
// 打开终端
const clickHost = (item: HostQueryResponse) => {
- openSession(item, PanelSessionType.TERMINAL, panelIndex.value);
+ openSession(item, PanelSessionType.SSH, panelIndex.value);
setVisible(false);
};
diff --git a/orion-ops-ui/src/views/host/terminal/components/new-connection/host-list-view.vue b/orion-ops-ui/src/views/host/terminal/components/new-connection/host-list-view.vue
index d62cc7f1..47e3df6b 100644
--- a/orion-ops-ui/src/views/host/terminal/components/new-connection/host-list-view.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/new-connection/host-list-view.vue
@@ -119,7 +119,7 @@
arrow-class="terminal-tooltip-content"
content="打开 SSH">