From 11b28e6a633c90e19cc7367b2bcf270075fc1008 Mon Sep 17 00:00:00 2001
From: lijiahang <ljh1553488six@139.com>
Date: Mon, 5 Feb 2024 17:07:38 +0800
Subject: [PATCH] =?UTF-8?q?:construction:=20=E4=B8=9A=E5=8A=A1=E9=87=8D?=
 =?UTF-8?q?=E5=91=BD=E5=90=8D.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/style/host-terminal-layout.less    |   2 +-
 .../components/layout/empty-recommend.vue     |  15 ++-
 .../components/layout/icon-actions.vue        |   5 +-
 .../components/layout/terminal-panel.vue      |   9 +-
 .../new-connection/host-list-modal.vue        | 111 +++++++++++++++---
 .../terminal/components/sftp/sftp-view.vue    |  24 ++++
 .../ssh-context-menu.vue}                     |   2 +-
 .../ssh-search-modal.vue}                     |   2 +-
 .../terminal-view.vue => ssh/ssh-view.vue}    |  62 +++++-----
 .../host/terminal/types/terminal.const.ts     |  18 +--
 10 files changed, 180 insertions(+), 70 deletions(-)
 create mode 100644 orion-ops-ui/src/views/host/terminal/components/sftp/sftp-view.vue
 rename orion-ops-ui/src/views/host/terminal/components/{xterm/terminal-context-menu.vue => ssh/ssh-context-menu.vue} (97%)
 rename orion-ops-ui/src/views/host/terminal/components/{xterm/terminal-search-modal.vue => ssh/ssh-search-modal.vue} (99%)
 rename orion-ops-ui/src/views/host/terminal/components/{xterm/terminal-view.vue => ssh/ssh-view.vue} (83%)

diff --git a/orion-ops-ui/src/assets/style/host-terminal-layout.less b/orion-ops-ui/src/assets/style/host-terminal-layout.less
index 9ab7d583..461c6512 100644
--- a/orion-ops-ui/src/assets/style/host-terminal-layout.less
+++ b/orion-ops-ui/src/assets/style/host-terminal-layout.less
@@ -1,7 +1,7 @@
 // 亮色主题配色常量
 body {
   --color-bg-header: #232323;
-  --color-bg-sidebar: #EBECED;
+  --color-bg-sidebar: #E3E3E3;
   --color-bg-panel: var(--color-bg-sidebar);
   --color-bg-content: #FEFEFE;
   --color-sidebar-icon: #737070;
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 020bb613..63691119 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
@@ -1,5 +1,5 @@
 <template>
-  <div class="terminal-setting-container">
+  <div class="terminal-setting-container recommend-container">
     <div class="terminal-setting-wrapper">
       <!-- 组合容器 -->
       <div class="combined-container">
@@ -12,7 +12,7 @@
               <component :is="handler.icon" />
             </div>
             <!-- 内容 -->
-            <div class="combined-handler-text">
+            <div class="combined-handler-text" :title="handler.title">
               {{ handler.title }}
             </div>
           </div>
@@ -141,9 +141,13 @@
   @icon-size: @handler-height;
   @actions-width: 80px;
 
+  .recommend-container {
+    overflow: hidden;
+  }
+
   .combined-container {
     padding: 12px;
-    margin: 64px auto;
+    margin: 64px auto 0 auto;
     width: @container-width;
     height: @container-height;
     display: flex;
@@ -193,17 +197,16 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 16px;
+      font-size: 18px;
     }
 
     &-text {
       height: 100%;
       width: calc(100% - @icon-size - 12px);
-      display: flex;
-      align-items: center;
       font-size: 12px;
       overflow: hidden;
       white-space: nowrap;
+      text-overflow: ellipsis;
     }
 
     &-actions {
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 595f5af4..94252523 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
@@ -8,7 +8,9 @@
                content-class="terminal-tooltip-content"
                :auto-fix-position="false"
                :content="action.content">
-      <div class="terminal-sidebar-icon-wrapper" v-if="action.visible !== false">
+      <div v-if="action.visible !== false"
+           class="terminal-sidebar-icon-wrapper"
+           :class="[wrapperClass]">
         <div class="terminal-sidebar-icon"
              :class="[
                iconClass,
@@ -36,6 +38,7 @@
   defineProps({
     actions: Array as PropType<Array<SidebarAction>>,
     position: String,
+    wrapperClass: String,
     iconClass: String,
   });
 
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 1719d64c..56534ca4 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
@@ -28,8 +28,10 @@
             {{ tab.title }}
           </span>
         </template>
-        <!-- 终端 -->
-        <terminal-view :tab="tab" />
+        <!-- ssh -->
+        <ssh-view v-if="tab.type === PanelSessionType.SSH.type" :tab="tab" />
+        <!-- sftp -->
+        <sftp-view v-if="tab.type === PanelSessionType.SFTP.type" :tab="tab" />
       </a-tab-pane>
     </a-tabs>
   </div>
@@ -46,7 +48,8 @@
   import { watch } from 'vue';
   import { useTerminalStore } from '@/store';
   import { PanelSessionType } from '../../types/terminal.const';
-  import TerminalView from '../xterm/terminal-view.vue';
+  import SshView from '../ssh/ssh-view.vue';
+  import SftpView from '../sftp/sftp-view.vue';
 
   const props = defineProps<{
     index: number,
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 e12389a7..5ae534b1 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
@@ -1,7 +1,8 @@
 <template>
   <a-modal v-model:visible="visible"
            title-align="start"
-           :top="128"
+           :top="136"
+           :width="520"
            :align-center="false"
            :draggable="true"
            :unmount-on-close="true"
@@ -20,20 +21,50 @@
       <a-list class="host-list"
               max-height="50vh"
               :hoverable="true"
-              :split="false"
               :bordered="false"
               :data="hostList">
         <template #item="{ item }">
-          <a-list-item class="host-item-wrapper" @click="clickHost(item)">
+          <a-list-item class="host-item-wrapper">
             <div class="host-item">
-              <!-- 图标 -->
-              <span class="host-item-icon">
-                <icon-desktop />
-              </span>
-              <!-- 名称 -->
-              <span class="host-item-name">
-                {{ `${item.alias || item.name} (${item.address})` }}
-              </span>
+              <!-- 左侧 -->
+              <div class="host-item-left">
+                <!-- 图标 -->
+                <span class="host-item-icon">
+                  <icon-desktop />
+                </span>
+                <!-- 名称 -->
+                <span class="host-item-name"
+                      :title="`${item.alias || item.name} (${item.address})`">
+                  {{ `${item.alias || item.name} (${item.address})` }}
+                </span>
+              </div>
+              <!-- 操作 -->
+              <div class="host-item-actions">
+                <!-- 打开 SSH -->
+                <a-tooltip position="top"
+                           :mini="true"
+                           :auto-fix-position="false"
+                           content-class="terminal-tooltip-content"
+                           arrow-class="terminal-tooltip-content"
+                           content="打开 SSH">
+                  <span class="click-icon-wrapper"
+                        @click="clickHost(item, 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 class="click-icon-wrapper"
+                        @click="clickHost(item, PanelSessionType.SFTP)">
+                    <icon-folder />
+                  </span>
+                </a-tooltip>
+              </div>
             </div>
           </a-list-item>
         </template>
@@ -49,6 +80,7 @@
 </script>
 
 <script lang="ts" setup>
+  import type { PanelSessionTab } from '../../types/terminal.type';
   import type { HostQueryResponse } from '@/api/asset/host';
   import { computed, ref } from 'vue';
   import { useTerminalStore } from '@/store';
@@ -97,14 +129,19 @@
   defineExpose({ open });
 
   // 打开终端
-  const clickHost = (item: HostQueryResponse) => {
-    openSession(item, PanelSessionType.SSH, panelIndex.value);
+  const clickHost = (item: HostQueryResponse, tab: PanelSessionTab) => {
+    openSession(item, tab, panelIndex.value);
     setVisible(false);
   };
 
 </script>
 
 <style lang="less" scoped>
+  @modal-width: 520px;
+  @item-height: 54px;
+  @item-padding-y: 4px;
+  @item-padding-x: 12px;
+
   .host-list-wrapper {
     padding: 12px;
   }
@@ -130,26 +167,66 @@
   }
 
   .host-item-wrapper {
-    padding: 12px 16px !important;
-    border-radius: 4px;
+    padding: @item-padding-y @item-padding-x !important;
+    height: @item-height;
+    display: flex;
+    align-items: center;
 
     &:hover {
       background: var(--color-fill-2);
+      border-radius: 4px;
+
+      .host-item-left {
+        width: @modal-width - 126px;
+      }
+
+      .host-item-actions {
+        display: flex;
+      }
     }
   }
 
   .host-item {
     display: flex;
     align-items: center;
-    cursor: pointer;
+    justify-content: space-between;
+    height: @item-height - @item-padding-y * 2;
+
+    &-left {
+      width: @modal-width - 48px;
+      display: flex;
+      align-items: center;
+    }
 
     &-icon {
       font-size: 20px;
       margin-right: 12px;
     }
 
-    &-text {
+    &-name {
       font-size: 14px;
+      overflow: hidden;
+      white-space: pre;
+      text-overflow: ellipsis;
+    }
+
+    &-actions {
+      display: none;
+      height: 100%;
+      align-items: center;
+      justify-content: flex-end;
+
+      .click-icon-wrapper {
+        font-size: 22px;
+        padding: 4px;
+        border-radius: 4px;
+        margin: 0 4px;
+
+        &:hover {
+          background: var(--color-neutral-4);
+        }
+      }
     }
   }
+
 </style>
diff --git a/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-view.vue b/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-view.vue
new file mode 100644
index 00000000..df52b805
--- /dev/null
+++ b/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-view.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    {{ tab }}
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'sftpView'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { TerminalTabItem } from '../../types/terminal.type';
+
+  const props = defineProps<{
+    tab: TerminalTabItem
+  }>();
+
+</script>
+
+<style lang="less" scoped>
+
+</style>
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/ssh/ssh-context-menu.vue
similarity index 97%
rename from orion-ops-ui/src/views/host/terminal/components/xterm/terminal-context-menu.vue
rename to orion-ops-ui/src/views/host/terminal/components/ssh/ssh-context-menu.vue
index c896de06..d4197d20 100644
--- a/orion-ops-ui/src/views/host/terminal/components/xterm/terminal-context-menu.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/ssh/ssh-context-menu.vue
@@ -26,7 +26,7 @@
 
 <script lang="ts">
   export default {
-    name: 'terminalContextMenu'
+    name: 'sshContextMenu'
   };
 </script>
 
diff --git a/orion-ops-ui/src/views/host/terminal/components/xterm/terminal-search-modal.vue b/orion-ops-ui/src/views/host/terminal/components/ssh/ssh-search-modal.vue
similarity index 99%
rename from orion-ops-ui/src/views/host/terminal/components/xterm/terminal-search-modal.vue
rename to orion-ops-ui/src/views/host/terminal/components/ssh/ssh-search-modal.vue
index f0879cc4..f3e408e5 100644
--- a/orion-ops-ui/src/views/host/terminal/components/xterm/terminal-search-modal.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/ssh/ssh-search-modal.vue
@@ -53,7 +53,7 @@
 
 <script lang="ts">
   export default {
-    name: 'terminalSearchModal'
+    name: 'sshSearchModal'
   };
 </script>
 
diff --git a/orion-ops-ui/src/views/host/terminal/components/xterm/terminal-view.vue b/orion-ops-ui/src/views/host/terminal/components/ssh/ssh-view.vue
similarity index 83%
rename from orion-ops-ui/src/views/host/terminal/components/xterm/terminal-view.vue
rename to orion-ops-ui/src/views/host/terminal/components/ssh/ssh-view.vue
index faa1c9d0..08b5c553 100644
--- a/orion-ops-ui/src/views/host/terminal/components/xterm/terminal-view.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/ssh/ssh-view.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="terminal-container">
+  <div class="ssh-container">
     <!-- 头部 -->
-    <div class="terminal-header">
+    <div class="ssh-header">
       <!-- 左侧操作 -->
-      <div class="terminal-header-left">
+      <div class="ssh-header-left">
         <!-- 主机地址 -->
         <span class="address-wrapper">
           {{ tab.address }}
@@ -13,7 +13,7 @@
         </span>
       </div>
       <!-- 右侧操作 -->
-      <div class="terminal-header-right">
+      <div class="ssh-header-right">
         <!-- 命令输入框 -->
         <a-textarea class="command-input mr8"
                     v-if="preference.actionBarSetting.commandInput !== false"
@@ -23,7 +23,9 @@
                     allow-clear
                     @keyup="writeCommandInput" />
         <!-- 操作按钮 -->
-        <icon-actions class="terminal-header-right-action-bar"
+        <icon-actions class="ssh-header-right-action-bar"
+                      wrapper-class="ssh-header-icon-wrapper"
+                      icon-class="ssh-header-icon"
                       :actions="rightActions"
                       position="bottom" />
         <!-- 连接状态 -->
@@ -34,19 +36,19 @@
       </div>
     </div>
     <!-- 终端右键菜单 -->
-    <terminal-context-menu :session="session"
-                           @click="doTerminalHandle">
+    <ssh-context-menu :session="session"
+                      @click="doTerminalHandle">
       <!-- 终端容器 -->
-      <div class="terminal-wrapper"
+      <div class="ssh-wrapper"
            :style="{ background: preference.theme.schema.background }">
         <!-- 终端实例 -->
-        <div class="terminal-inst" ref="terminalRef" />
+        <div class="ssh-inst" ref="terminalRef" />
         <!-- 搜索模态框 -->
-        <terminal-search-modal ref="searchModal"
-                               @find="findWords"
-                               @close="focus" />
+        <ssh-search-modal ref="searchModal"
+                          @find="findWords"
+                          @close="focus" />
       </div>
-    </terminal-context-menu>
+    </ssh-context-menu>
     <!-- 命令编辑器 -->
     <shell-editor-modal ref="editorModal"
                         :closable="false"
@@ -60,7 +62,7 @@
 
 <script lang="ts">
   export default {
-    name: 'terminalView'
+    name: 'sshView'
   };
 </script>
 
@@ -72,8 +74,8 @@
   import { ActionBarItems, connectStatusKey } from '../../types/terminal.const';
   import IconActions from '../layout/icon-actions.vue';
   import ShellEditorModal from '@/components/view/shell-editor/shell-editor-modal.vue';
-  import TerminalSearchModal from './terminal-search-modal.vue';
-  import TerminalContextMenu from './terminal-context-menu.vue';
+  import SshSearchModal from './ssh-search-modal.vue';
+  import SshContextMenu from './ssh-context-menu.vue';
 
   const props = defineProps<{
     tab: TerminalTabItem
@@ -89,9 +91,6 @@
   const terminalRef = ref();
   const session = ref<ITerminalSession>();
 
-  // TODO
-  // sftp
-
   // 发送命令
   const writeCommandInput = async (e: KeyboardEvent) => {
     const value = commandInput.value;
@@ -154,18 +153,18 @@
 </script>
 
 <style lang="less" scoped>
-  @terminal-header-height: 36px;
+  @ssh-header-height: 36px;
 
-  .terminal-container {
+  .ssh-container {
     width: 100%;
     height: calc(100vh - var(--header-height) - var(--panel-nav-height));
     position: relative;
   }
 
-  .terminal-header {
+  .ssh-header {
     width: 100%;
-    height: @terminal-header-height;
-    padding: 0 6px;
+    height: @ssh-header-height;
+    padding: 0 8px;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -214,12 +213,13 @@
     &-right-action-bar {
       display: flex;
 
-      :deep(.terminal-sidebar-icon-wrapper) {
-        width: 30px;
-        height: 30px;
+      :deep(.ssh-header-icon-wrapper) {
+        width: 28px;
+        height: 28px;
+        margin: 0 2px;
       }
 
-      :deep(.terminal-sidebar-icon) {
+      :deep(.ssh-header-icon) {
         width: 28px;
         height: 28px;
         font-size: 20px;
@@ -236,13 +236,13 @@
     }
   }
 
-  .terminal-wrapper {
+  .ssh-wrapper {
     width: 100%;
-    height: calc(100% - @terminal-header-height);
+    height: calc(100% - @ssh-header-height);
     position: relative;
     padding: 6px 0 0 6px;
 
-    .terminal-inst {
+    .ssh-inst {
       width: 100%;
       height: 100%;
 
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 c015de17..e745e76e 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
@@ -186,23 +186,23 @@ export const TerminalShortcutItems: Array<ShortcutKeyItem> = [
   }, {
     item: TerminalShortcutKeys.OPEN_NEW_CONNECT_MODAL,
     content: '打开新建连接弹框',
-    type: TerminalShortcutType.PANEL
+    type: TerminalShortcutType.SESSION
   }, {
     item: TerminalShortcutKeys.COPY_SESSION,
-    content: '复制终端',
-    type: TerminalShortcutType.PANEL
+    content: '复制会话',
+    type: TerminalShortcutType.SESSION
   }, {
     item: TerminalShortcutKeys.CLOSE_SESSION,
-    content: '关闭终端',
-    type: TerminalShortcutType.PANEL
+    content: '关闭会话',
+    type: TerminalShortcutType.SESSION
   }, {
     item: TerminalShortcutKeys.CHANGE_TO_PREV_SESSION,
-    content: '切换至前一个终端',
-    type: TerminalShortcutType.PANEL
+    content: '切换至前一个会话',
+    type: TerminalShortcutType.SESSION
   }, {
     item: TerminalShortcutKeys.CHANGE_TO_NEXT_SESSION,
-    content: '切换至后一个终端',
-    type: TerminalShortcutType.PANEL
+    content: '切换至后一个会话',
+    type: TerminalShortcutType.SESSION
   }, {
     item: 'copy',
     content: '复制',