From 3011ecee9eb20acff0453704a0d276247c9be54b Mon Sep 17 00:00:00 2001
From: lijiahangmax <ljh1553488six@139.com>
Date: Thu, 25 Jan 2024 00:04:24 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9F=A5=E8=AF=A2=E5=91=BD=E4=BB=A4?=
 =?UTF-8?q?=E5=88=86=E7=BB=84.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 orion-ops-ui/src/api/asset/command-snippet.ts |  2 +-
 .../asset/host-group/host-group-tree.vue      | 10 +-
 .../src/store/modules/terminal/index.ts       | 15 ++-
 .../layout/terminal-right-sidebar.vue         | 13 +--
 .../setting/terminal-shortcut-keys-block.vue  |  3 +-
 .../components/snippet/snippet-drawer.vue     | 40 ++++++--
 .../components/snippet/snippet-item.vue       | 98 +++++++++++++++++--
 7 files changed, 149 insertions(+), 32 deletions(-)

diff --git a/orion-ops-ui/src/api/asset/command-snippet.ts b/orion-ops-ui/src/api/asset/command-snippet.ts
index 4325a90f..80ffd328 100644
--- a/orion-ops-ui/src/api/asset/command-snippet.ts
+++ b/orion-ops-ui/src/api/asset/command-snippet.ts
@@ -29,7 +29,7 @@ export interface CommandSnippetQueryResponse extends CommandSnippetQueryResponse
 
 export interface CommandSnippetQueryResponseExtra {
   visible: boolean;
-  expand: boolean;
+  expand?: boolean;
 }
 
 /**
diff --git a/orion-ops-ui/src/components/asset/host-group/host-group-tree.vue b/orion-ops-ui/src/components/asset/host-group/host-group-tree.vue
index ee47ed37..01a21501 100644
--- a/orion-ops-ui/src/components/asset/host-group/host-group-tree.vue
+++ b/orion-ops-ui/src/components/asset/host-group/host-group-tree.vue
@@ -74,10 +74,10 @@
       </template>
     </a-tree>
     <!-- 无数据 -->
-    <div v-else-if="!loading" class="empty-container">
-      <span>暂无数据</span>
+    <a-empty v-else-if="!loading" class="empty-container">
+      <span>暂无数据</span><br>
       <span v-if="editable">点击上方 '<icon-plus />' 添加一个分组吧~</span>
-    </div>
+    </a-empty>
   </a-scrollbar>
 </template>
 
@@ -214,8 +214,8 @@
 
   // 保存节点
   const saveNode = async (node: TreeNodeData) => {
-    const key = node.key
-    const newTitle = node.title
+    const key = node.key;
+    const newTitle = node.title;
     node.modCount = (node.modCount || 0) + 1;
     if (node.modCount != 1) {
       return;
diff --git a/orion-ops-ui/src/store/modules/terminal/index.ts b/orion-ops-ui/src/store/modules/terminal/index.ts
index 31451696..bdd65705 100644
--- a/orion-ops-ui/src/store/modules/terminal/index.ts
+++ b/orion-ops-ui/src/store/modules/terminal/index.ts
@@ -159,7 +159,20 @@ export default defineStore('terminal', {
       if (host) {
         this.openTerminal(host);
       }
-    }
+    },
+
+    // 获取当前终端会话
+    getCurrentTerminalSession(tips: boolean = true) {
+      const tab = this.tabManager.getCurrentTab();
+      if (!tab || tab.type !== TerminalTabType.TERMINAL) {
+        if (tips) {
+          Message.warning('请切换到终端标签页');
+        }
+        return;
+      }
+      // 获取处理器并截图
+      return this.sessionManager.getSession(tab.key);
+    },
 
   },
 
diff --git a/orion-ops-ui/src/views/host/terminal/components/layout/terminal-right-sidebar.vue b/orion-ops-ui/src/views/host/terminal/components/layout/terminal-right-sidebar.vue
index 88066dd4..54c5975c 100644
--- a/orion-ops-ui/src/views/host/terminal/components/layout/terminal-right-sidebar.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/layout/terminal-right-sidebar.vue
@@ -30,7 +30,7 @@
 
   const emits = defineEmits(['openSftp', 'openTransfer']);
 
-  const { tabManager, sessionManager } = useTerminalStore();
+  const { getCurrentTerminalSession } = useTerminalStore();
 
   const snippetRef = ref();
 
@@ -67,15 +67,10 @@
 
   // 终端截屏
   const screenshot = () => {
-    const tab = tabManager.getCurrentTab();
-    if (!tab || tab.type !== TerminalTabType.TERMINAL) {
-      Message.warning('请切换到终端标签页');
-      return;
+    const handler = getCurrentTerminalSession()?.handler;
+    if (handler && handler.enabledStatus('screenshot')) {
+      handler.screenshot();
     }
-    // 获取处理器并截图
-    sessionManager.getSession(tab.key)
-      ?.handler
-      ?.screenshot();
   };
 
 </script>
diff --git a/orion-ops-ui/src/views/host/terminal/components/setting/terminal-shortcut-keys-block.vue b/orion-ops-ui/src/views/host/terminal/components/setting/terminal-shortcut-keys-block.vue
index 5f528085..652d0f48 100644
--- a/orion-ops-ui/src/views/host/terminal/components/setting/terminal-shortcut-keys-block.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/setting/terminal-shortcut-keys-block.vue
@@ -17,7 +17,7 @@
             <!-- 启用-修改中 -->
             <a-input v-if="item.editable && item.enabled"
                      v-model="item.shortcutKey"
-                     :ref="setEditRef"
+                     :ref="setEditRef as unknown as VNodeRef"
                      class="trigger-input"
                      size="small"
                      placeholder="请按下快捷键"
@@ -66,6 +66,7 @@
 
 <script lang="ts" setup>
   import type { TerminalShortcutKeyEditable } from '@/store/modules/terminal/types';
+  import type { VNodeRef } from 'vue';
   import { nextTick } from 'vue';
 
   defineProps<{
diff --git a/orion-ops-ui/src/views/host/terminal/components/snippet/snippet-drawer.vue b/orion-ops-ui/src/views/host/terminal/components/snippet/snippet-drawer.vue
index 142c888e..1fa20adb 100644
--- a/orion-ops-ui/src/views/host/terminal/components/snippet/snippet-drawer.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/snippet/snippet-drawer.vue
@@ -1,7 +1,8 @@
 <template>
   <a-drawer v-model:visible="visible"
             :width="388"
-            :footer="false">
+            :footer="false"
+            @close="onClose">
     <!-- 表头 -->
     <template #title>
       <span class="snippet-drawer-title">
@@ -10,7 +11,7 @@
       </span>
     </template>
     <!-- 命令容器 -->
-    <a-spin class="snippet-container" :loading="loading">
+    <div class="snippet-container">
       <!-- 命令头部 -->
       <div class="snippet-header">
         <!-- 创建命令 -->
@@ -25,8 +26,22 @@
                         @search="filterSnippet"
                         @keyup.enter="filterSnippet" />
       </div>
+      <!-- 加载中 -->
+      <a-skeleton v-if="loading"
+                  style="padding: 0 12px"
+                  :animation="true">
+        <a-skeleton-line :rows="4"
+                         :line-height="66"
+                         :line-spacing="12" />
+      </a-skeleton>
+      <!-- 无数据 -->
+      <a-empty v-else-if="!snippet || (snippet.groups.length === 0 && snippet.ungroupedItems.length === 0)"
+               style="padding: 28px 0">
+        <span>暂无数据</span><br>
+        <span>点击上方 '<icon-plus />' 添加一条数据吧~</span>
+      </a-empty>
       <!-- 命令片段 -->
-      <div v-if="snippet" class="snippet-list-container">
+      <div v-else class="snippet-list-container">
         <!-- 命令片段组 -->
         <snippet-group :snippet="snippet" />
         <!-- 未分组命令片段 -->
@@ -38,7 +53,7 @@
           </template>
         </div>
       </div>
-    </a-spin>
+    </div>
   </a-drawer>
 </template>
 
@@ -56,9 +71,11 @@
   import { getCommandSnippetList } from '@/api/asset/command-snippet';
   import SnippetItem from './snippet-item.vue';
   import SnippetGroup from './snippet-group.vue';
+  import { useTerminalStore } from '@/store';
 
   const { loading, setLoading } = useLoading();
   const { visible, setVisible } = useVisible();
+  const { getCurrentTerminalSession } = useTerminalStore();
 
   const filterValue = ref<string>();
   const snippet = ref<CommandSnippetWrapperResponse>();
@@ -70,6 +87,8 @@
     await fetchData();
   };
 
+  // TODO 新增
+
   defineExpose({ open });
 
   // 加载数据
@@ -106,13 +125,18 @@
     });
   };
 
-  onMounted(() => {
-    open();
-  });
+  // 关闭
+  const onClose = () => {
+    setVisible(false);
+    // 聚焦终端
+    getCurrentTerminalSession(false)?.focus();
+  };
+
+  // fixme
+  onMounted(open);
 
 </script>
 
-
 <style lang="less" scoped>
   .snippet-drawer-title {
     font-size: 14px;
diff --git a/orion-ops-ui/src/views/host/terminal/components/snippet/snippet-item.vue b/orion-ops-ui/src/views/host/terminal/components/snippet/snippet-item.vue
index e62afc15..9f4a31a8 100644
--- a/orion-ops-ui/src/views/host/terminal/components/snippet/snippet-item.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/snippet/snippet-item.vue
@@ -1,10 +1,42 @@
 <template>
   <div class="snippet-item-wrapper"
-       :class="[!!item.expand ? 'snippet-item-wrapper-expand' : '']">
+       :class="[!!item.expand ? 'snippet-item-wrapper-expand' : '']"
+       @click="expandItem">
     <div class="snippet-item">
-      <span class="snippet-item-title">
-        {{ item.name }}
-      </span>
+      <div class="snippet-item-title">
+        <!-- 名称 -->
+        <span class="snippet-item-title-name">
+          {{ item.name }}
+        </span>
+        <!-- 操作 -->
+        <div class="snippet-item-title-actions">
+          <a-space>
+            <!-- 粘贴 -->
+            <a-tag class="pointer usn"
+                   size="small"
+                   :checkable="true"
+                   :checked="true"
+                   @click.stop="paste">
+              <template #icon>
+                <icon-paste />
+              </template>
+              粘贴
+            </a-tag>
+            <!-- 执行 -->
+            <a-tag class="pointer usn"
+                   size="small"
+                   :checkable="true"
+                   :checked="true"
+                   @click.stop="exec">
+              <template #icon>
+                <icon-thunderbolt />
+              </template>
+              执行
+            </a-tag>
+          </a-space>
+        </div>
+      </div>
+      <!-- 命令 -->
       <span class="snippet-item-command">
         {{ item.command }}
       </span>
@@ -20,11 +52,39 @@
 
 <script lang="ts" setup>
   import type { CommandSnippetQueryResponse } from '@/api/asset/command-snippet';
+  import { useTerminalStore } from '@/store';
 
-  defineProps<{
+  const props = defineProps<{
     item: CommandSnippetQueryResponse
   }>();
 
+  const { getCurrentTerminalSession } = useTerminalStore();
+
+  // TODO 右键菜单 复制 粘贴 删除 执行 修改
+
+  // 展开命令
+  const expandItem = () => {
+    props.item.expand = !props.item.expand;
+  };
+
+  // 粘贴
+  const paste = () => {
+    write(props.item.command);
+  };
+
+  // 执行
+  const exec = () => {
+    write(props.item.command + '\n');
+  };
+
+  // 写入命令
+  const write = (command: string) => {
+    const handler = getCurrentTerminalSession()?.handler;
+    if (handler && handler.enabledStatus('checkAppendMissing')) {
+      handler.checkAppendMissing(command);
+    }
+  };
+
 </script>
 
 <style lang="less" scoped>
@@ -36,6 +96,7 @@
   @item-width: @drawer-width - @item-wrapper-p-x * 2;
   @item-width-transform: @item-width + @transform-x;
   @item-inline-width: @item-width - @item-p * 2;
+  @item-actions-width: 124px;
 
   .snippet-item-wrapper {
     padding: @item-wrapper-p-y 0;
@@ -72,14 +133,37 @@
       &:hover {
         width: @item-width-transform;
         background: var(--color-fill-3);
+
+        .snippet-item-title {
+          &-name {
+            width: calc(@item-inline-width - @item-actions-width);
+          }
+
+          &-actions {
+            width: @item-actions-width;
+            display: inline-block;
+          }
+        }
       }
 
       &-title {
         color: var(--color-text-1);
         margin-bottom: 8px;
-        overflow: hidden;
-        text-overflow: ellipsis;
         width: @item-inline-width;
+        height: 24px;
+        display: flex;
+        align-items: center;
+
+        &-name {
+          width: @item-inline-width;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: pre;
+        }
+
+        &-actions {
+          display: none;
+        }
       }
 
       &-command {