From ac2376842a37ca621af2f6ac333b2a4099c5880c Mon Sep 17 00:00:00 2001
From: lijiahang <ljh1553488six@139.com>
Date: Thu, 25 Jan 2024 19:08:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=9D=E5=AD=98=E5=91=BD=E4=BB=A4?=
 =?UTF-8?q?=E7=89=87=E6=AE=B5.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../core/generator/CodeGenerators.java        |   7 +-
 .../src/components/view/editor/index.vue      |   2 +-
 .../command-snippet-form-drawer.vue           | 152 ++++++++++++++++++
 .../components/command-snippet-group.vue}     |   6 +-
 .../components/command-snippet-item.vue}      |  18 ++-
 .../command-snippet-list-drawer.vue}          |  76 +++++++--
 .../views/host/command-snippet/types/const.ts |   5 +
 .../host/command-snippet/types/form.rules.ts  |  24 +++
 .../layout/terminal-right-sidebar.vue         |   8 +-
 .../new-connection/host-list-view.vue         |   4 +-
 .../handler/terminal-session-handler.ts       |  11 +-
 .../host/terminal/types/terminal.type.ts      |   4 +-
 12 files changed, 281 insertions(+), 36 deletions(-)
 create mode 100644 orion-ops-ui/src/views/host/command-snippet/components/command-snippet-form-drawer.vue
 rename orion-ops-ui/src/views/host/{terminal/components/snippet/snippet-group.vue => command-snippet/components/command-snippet-group.vue} (90%)
 rename orion-ops-ui/src/views/host/{terminal/components/snippet/snippet-item.vue => command-snippet/components/command-snippet-item.vue} (92%)
 rename orion-ops-ui/src/views/host/{terminal/components/snippet/snippet-drawer.vue => command-snippet/components/command-snippet-list-drawer.vue} (67%)
 create mode 100644 orion-ops-ui/src/views/host/command-snippet/types/const.ts
 create mode 100644 orion-ops-ui/src/views/host/command-snippet/types/form.rules.ts

diff --git a/orion-ops-framework/orion-ops-spring-boot-starter-mybatis/src/main/java/com/orion/ops/framework/mybatis/core/generator/CodeGenerators.java b/orion-ops-framework/orion-ops-spring-boot-starter-mybatis/src/main/java/com/orion/ops/framework/mybatis/core/generator/CodeGenerators.java
index ef578cb4..450262ed 100644
--- a/orion-ops-framework/orion-ops-spring-boot-starter-mybatis/src/main/java/com/orion/ops/framework/mybatis/core/generator/CodeGenerators.java
+++ b/orion-ops-framework/orion-ops-spring-boot-starter-mybatis/src/main/java/com/orion/ops/framework/mybatis/core/generator/CodeGenerators.java
@@ -45,11 +45,12 @@ public class CodeGenerators {
                 //         .color("blue", "gray", "red", "green", "white")
                 //         .valueUseFields()
                 //         .build(),
-                Template.create("command_snippet_group", "命令片段分组", "command")
+                Template.create("command_snippet", "命令片段", "command")
                         .disableUnitTest()
-                        .cache("command:snippet:group:{}", "命令片段分组 ${userId}")
+                        .cache("command:snippet:group:{}", "命令片段 ${userId}")
                         .expire(1, TimeUnit.DAYS)
-                        .vue("host", "command-snippet-group")
+                        .vue("asset", "command-snippet")
+                        .enableDrawerForm()
                         .build(),
         };
         // jdbc 配置 - 使用配置文件
diff --git a/orion-ops-ui/src/components/view/editor/index.vue b/orion-ops-ui/src/components/view/editor/index.vue
index bc09b9cb..8d629092 100644
--- a/orion-ops-ui/src/components/view/editor/index.vue
+++ b/orion-ops-ui/src/components/view/editor/index.vue
@@ -11,7 +11,7 @@
 
 <script lang="ts">
   export default {
-    name: 'index'
+    name: 'editor'
   };
 </script>
 
diff --git a/orion-ops-ui/src/views/host/command-snippet/components/command-snippet-form-drawer.vue b/orion-ops-ui/src/views/host/command-snippet/components/command-snippet-form-drawer.vue
new file mode 100644
index 00000000..827e7631
--- /dev/null
+++ b/orion-ops-ui/src/views/host/command-snippet/components/command-snippet-form-drawer.vue
@@ -0,0 +1,152 @@
+<template>
+  <a-drawer v-model:visible="visible"
+            :title="title"
+            :width="488"
+            :mask-closable="false"
+            :unmount-on-close="true"
+            :ok-button-props="{ disabled: loading }"
+            :cancel-button-props="{ disabled: loading }"
+            :on-before-ok="handlerOk"
+            @cancel="handleClose">
+    <a-spin class="full form-container" :loading="loading">
+      <a-form :model="formModel"
+              ref="formRef"
+              label-align="right"
+              layout="vertical"
+              :label-col-props="{ span: 6 }"
+              :wrapper-col-props="{ span: 18 }"
+              :rules="formRules">
+        <!-- 分组 -->
+        <a-form-item field="groupId" label="命令分组">
+          <a-input-number v-model="formModel.groupId"
+                          placeholder="请输入命令分组"
+                          hide-button />
+        </a-form-item>
+        <!-- 名称 -->
+        <a-form-item field="name" label="名称">
+          <a-input v-model="formModel.name" placeholder="请输入名称" allow-clear />
+        </a-form-item>
+        <!-- 代码片段 -->
+        <a-form-item field="command" label="代码片段">
+          <editor v-model="formModel.command"
+                  containerClass="command-editor"
+                  language="shell"
+                  :auto-focus="true"
+                  :theme="preference.theme.dark ? 'vs-dark' : 'vs'" />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-drawer>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'assetCommandSnippetFormDrawer'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { CommandSnippetUpdateRequest } from '@/api/asset/command-snippet';
+  import { ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import useVisible from '@/hooks/visible';
+  import formRules from '../types/form.rules';
+  import { createCommandSnippet, updateCommandSnippet } from '@/api/asset/command-snippet';
+  import { Message } from '@arco-design/web-vue';
+  import { useTerminalStore } from '@/store';
+
+  const { preference } = useTerminalStore();
+  const { visible, setVisible } = useVisible();
+  const { loading, setLoading } = useLoading();
+
+  const title = ref<string>();
+  const isAddHandle = ref<boolean>(true);
+
+  const defaultForm = (): CommandSnippetUpdateRequest => {
+    return {
+      id: undefined,
+      groupId: undefined,
+      name: undefined,
+      command: undefined,
+    };
+  };
+
+  const formRef = ref<any>();
+  const formModel = ref<CommandSnippetUpdateRequest>({});
+
+  const emits = defineEmits(['added', 'updated']);
+
+  // 打开新增
+  const openAdd = () => {
+    title.value = '添加命令片段';
+    isAddHandle.value = true;
+    renderForm({ ...defaultForm() });
+    setVisible(true);
+  };
+
+  // 打开修改
+  const openUpdate = (record: any) => {
+    title.value = '修改命令片段';
+    isAddHandle.value = false;
+    renderForm({ ...defaultForm(), ...record });
+    setVisible(true);
+  };
+
+  // 渲染表单
+  const renderForm = (record: any) => {
+    formModel.value = Object.assign({}, record);
+  };
+
+  defineExpose({ openAdd, openUpdate });
+
+  // 确定
+  const handlerOk = async () => {
+    setLoading(true);
+    try {
+      // 验证参数
+      const error = await formRef.value.validate();
+      if (error) {
+        return false;
+      }
+      if (isAddHandle.value) {
+        // 新增
+        await createCommandSnippet(formModel.value);
+        Message.success('创建成功');
+        emits('added');
+      } else {
+        // 修改
+        await updateCommandSnippet(formModel.value);
+        Message.success('修改成功');
+        emits('updated');
+      }
+      // 清空
+      handlerClear();
+    } catch (e) {
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 关闭
+  const handleClose = () => {
+    handlerClear();
+  };
+
+  // 清空
+  const handlerClear = () => {
+    setLoading(false);
+  };
+
+</script>
+
+<style lang="less" scoped>
+  .form-container {
+    padding: 12px;
+  }
+
+  .command-editor {
+    height: 340px;
+  }
+
+</style>
diff --git a/orion-ops-ui/src/views/host/terminal/components/snippet/snippet-group.vue b/orion-ops-ui/src/views/host/command-snippet/components/command-snippet-group.vue
similarity index 90%
rename from orion-ops-ui/src/views/host/terminal/components/snippet/snippet-group.vue
rename to orion-ops-ui/src/views/host/command-snippet/components/command-snippet-group.vue
index ad622246..3585baea 100644
--- a/orion-ops-ui/src/views/host/terminal/components/snippet/snippet-group.vue
+++ b/orion-ops-ui/src/views/host/command-snippet/components/command-snippet-group.vue
@@ -10,7 +10,7 @@
         </template>
         <!-- snippet -->
         <template v-for="item in group.items">
-          <snippet-item v-if="item.visible"
+          <command-snippet-item v-if="item.visible"
                         :key="item.id"
                         :item="item" />
         </template>
@@ -21,14 +21,14 @@
 
 <script lang="ts">
   export default {
-    name: 'snippetGroup'
+    name: 'commandSnippetGroup'
   };
 </script>
 
 <script lang="ts" setup>
   import type { CommandSnippetGroupQueryResponse } from '@/api/asset/command-snippet-group';
   import type { CommandSnippetWrapperResponse } from '@/api/asset/command-snippet';
-  import SnippetItem from './snippet-item.vue';
+  import CommandSnippetItem from './command-snippet-item.vue';
 
   defineProps<{
     snippet: CommandSnippetWrapperResponse
diff --git a/orion-ops-ui/src/views/host/terminal/components/snippet/snippet-item.vue b/orion-ops-ui/src/views/host/command-snippet/components/command-snippet-item.vue
similarity index 92%
rename from orion-ops-ui/src/views/host/terminal/components/snippet/snippet-item.vue
rename to orion-ops-ui/src/views/host/command-snippet/components/command-snippet-item.vue
index bd8a5906..9f740124 100644
--- a/orion-ops-ui/src/views/host/terminal/components/snippet/snippet-item.vue
+++ b/orion-ops-ui/src/views/host/command-snippet/components/command-snippet-item.vue
@@ -72,14 +72,14 @@
         <div>执行</div>
       </a-doption>
       <!-- 修改 -->
-      <a-doption @click="exec">
+      <a-doption @click="openUpdateSnippet(item)">
         <div class="terminal-context-menu-icon">
           <icon-edit />
         </div>
         <div>修改</div>
       </a-doption>
       <!-- 删除 -->
-      <a-doption @click="exec">
+      <a-doption @click="removeSnippet(item.id)">
         <div class="terminal-context-menu-icon">
           <icon-delete />
         </div>
@@ -107,7 +107,7 @@
 
 <script lang="ts">
   export default {
-    name: 'snippetItem'
+    name: 'commandSnippetItem'
   };
 </script>
 
@@ -116,6 +116,8 @@
   import { useTerminalStore } from '@/store';
   import { useDebounceFn } from '@vueuse/core';
   import useCopy from '@/hooks/copy';
+  import { inject } from 'vue';
+  import { openUpdateSnippetKey, removeSnippetKey } from '../types/const';
 
   const props = defineProps<{
     item: CommandSnippetQueryResponse
@@ -124,10 +126,16 @@
   const { copy } = useCopy();
   const { getCurrentTerminalSession } = useTerminalStore();
 
-  // TODO 修改 删除 拼接有bug
+  // TODO  多行拼接有bug
 
   let clickCount = 0;
 
+  // 修改
+  const openUpdateSnippet = inject<(item: CommandSnippetQueryResponse) => void>(openUpdateSnippetKey);
+
+  // 删除
+  const removeSnippet = inject<(id: number) => void>(removeSnippetKey);
+
   // 点击命令
   const clickItem = () => {
     if (++clickCount == 2) {
@@ -161,7 +169,7 @@
 
   // 执行
   const exec = () => {
-    write(props.item.command + '\n');
+    write(props.item.command + '\r\n');
   };
 
   // 写入命令
diff --git a/orion-ops-ui/src/views/host/terminal/components/snippet/snippet-drawer.vue b/orion-ops-ui/src/views/host/command-snippet/components/command-snippet-list-drawer.vue
similarity index 67%
rename from orion-ops-ui/src/views/host/terminal/components/snippet/snippet-drawer.vue
rename to orion-ops-ui/src/views/host/command-snippet/components/command-snippet-list-drawer.vue
index 045fdc72..6fcd67a2 100644
--- a/orion-ops-ui/src/views/host/terminal/components/snippet/snippet-drawer.vue
+++ b/orion-ops-ui/src/views/host/command-snippet/components/command-snippet-list-drawer.vue
@@ -15,7 +15,9 @@
       <!-- 命令头部 -->
       <div class="snippet-header">
         <!-- 创建命令 -->
-        <span class="click-icon-wrapper snippet-header-icon" title="创建命令">
+        <span class="click-icon-wrapper snippet-header-icon"
+              title="创建命令"
+              @click="openAdd">
           <icon-plus />
         </span>
         <!-- 搜索框 -->
@@ -43,40 +45,45 @@
       <!-- 命令片段 -->
       <div v-else class="snippet-list-container">
         <!-- 命令片段组 -->
-        <snippet-group :snippet="snippet" />
+        <command-snippet-group :snippet="snippet" />
         <!-- 未分组命令片段 -->
         <div class="ungrouped-snippet-container">
           <template v-for="item in snippet.ungroupedItems">
-            <snippet-item v-if="item.visible"
-                          :key="item.id"
-                          :item="item" />
+            <command-snippet-item v-if="item.visible"
+                                  :key="item.id"
+                                  :item="item" />
           </template>
         </div>
       </div>
     </div>
+    <!-- 命令编辑抽屉 -->
+    <command-snippet-form-drawer ref="formDrawer" />
   </a-drawer>
 </template>
 
 <script lang="ts">
   export default {
-    name: 'snippetDrawer'
+    name: 'commandSnippetListDrawer'
   };
 </script>
 
 <script lang="ts" setup>
-  import type { CommandSnippetWrapperResponse } from '@/api/asset/command-snippet';
-  import { onMounted, ref } from 'vue';
+  import type { CommandSnippetWrapperResponse, CommandSnippetQueryResponse } from '@/api/asset/command-snippet';
+  import { onMounted, ref, provide } from 'vue';
   import useVisible from '@/hooks/visible';
   import useLoading from '@/hooks/loading';
-  import { getCommandSnippetList } from '@/api/asset/command-snippet';
-  import SnippetItem from './snippet-item.vue';
-  import SnippetGroup from './snippet-group.vue';
+  import { deleteCommandSnippet, getCommandSnippetList } from '@/api/asset/command-snippet';
   import { useTerminalStore } from '@/store';
+  import { openUpdateSnippetKey, removeSnippetKey } from '../types/const';
+  import CommandSnippetItem from './command-snippet-item.vue';
+  import CommandSnippetGroup from './command-snippet-group.vue';
+  import CommandSnippetFormDrawer from './command-snippet-form-drawer.vue';
 
   const { loading, setLoading } = useLoading();
   const { visible, setVisible } = useVisible();
   const { getCurrentTerminalSession } = useTerminalStore();
 
+  const formDrawer = ref();
   const filterValue = ref<string>();
   const snippet = ref<CommandSnippetWrapperResponse>();
 
@@ -87,8 +94,6 @@
     await fetchData();
   };
 
-  // TODO 新增
-
   defineExpose({ open });
 
   // 加载数据
@@ -125,9 +130,51 @@
     });
   };
 
+  // 新建
+  const openAdd = () => {
+    formDrawer.value.openAdd();
+  };
+
+  // 打开修改
+  provide(openUpdateSnippetKey, (e: CommandSnippetQueryResponse) => {
+    formDrawer.value.openUpdate(e);
+  });
+
+  // 删除
+  provide(removeSnippetKey, async (id: number) => {
+    if (!snippet.value) {
+      return;
+    }
+
+    // 查找并且删除
+    function findAndSplice(items: Array<CommandSnippetQueryResponse>) {
+      if (items) {
+        const index = items.findIndex(s => s.id === id);
+        if (index !== -1) {
+          items.splice(index, 1);
+          return true;
+        }
+        return false;
+      }
+    }
+
+    // 删除
+    await deleteCommandSnippet(id);
+
+    // 查找并且删除未分组的数据
+    if (findAndSplice(snippet.value.ungroupedItems)) {
+      return;
+    }
+    // 查找并且删除分组内数据
+    for (let group of snippet.value.groups) {
+      if (findAndSplice(group.items)) {
+        return;
+      }
+    }
+  });
+
   // 关闭
   const onClose = () => {
-    setVisible(false);
     // 聚焦终端
     getCurrentTerminalSession(false)?.focus();
   };
@@ -164,6 +211,7 @@
 
       &-input {
         width: 220px;
+        user-select: none;
       }
     }
   }
diff --git a/orion-ops-ui/src/views/host/command-snippet/types/const.ts b/orion-ops-ui/src/views/host/command-snippet/types/const.ts
new file mode 100644
index 00000000..ca86dddf
--- /dev/null
+++ b/orion-ops-ui/src/views/host/command-snippet/types/const.ts
@@ -0,0 +1,5 @@
+// 打开 updateSnippet key
+export const openUpdateSnippetKey = Symbol();
+
+// 删除 snippet key
+export const removeSnippetKey = Symbol();
diff --git a/orion-ops-ui/src/views/host/command-snippet/types/form.rules.ts b/orion-ops-ui/src/views/host/command-snippet/types/form.rules.ts
new file mode 100644
index 00000000..56061529
--- /dev/null
+++ b/orion-ops-ui/src/views/host/command-snippet/types/form.rules.ts
@@ -0,0 +1,24 @@
+import type { FieldRule } from '@arco-design/web-vue';
+
+export const groupId = [{
+  message: '请选择分组'
+}] as FieldRule[];
+
+export const name = [{
+  required: true,
+  message: '请输入名称'
+}, {
+  maxLength: 64,
+  message: '名称长度不能大于64位'
+}] as FieldRule[];
+
+export const command = [{
+  required: true,
+  message: '请输入代码片段'
+}] as FieldRule[];
+
+export default {
+  groupId,
+  name,
+  command,
+} as Record<string, FieldRule | FieldRule[]>;
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 54c5975c..487f9b4f 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
@@ -8,8 +8,8 @@
     <icon-actions class="bottom-actions"
                   :actions="bottomActions"
                   position="left" />
-    <!-- 命令片段 -->
-    <snippet-drawer ref="snippetRef" />
+    <!-- 命令片段列表抽屉 -->
+    <command-snippet-list-drawer ref="snippetRef" />
   </div>
 </template>
 
@@ -22,11 +22,9 @@
 <script lang="ts" setup>
   import type { SidebarAction } from '../../types/terminal.type';
   import { useTerminalStore } from '@/store';
-  import { TerminalTabType } from '../../types/terminal.const';
-  import { Message } from '@arco-design/web-vue';
   import { ref } from 'vue';
   import IconActions from './icon-actions.vue';
-  import SnippetDrawer from '../snippet/snippet-drawer.vue';
+  import CommandSnippetListDrawer from '../../../command-snippet/components/command-snippet-list-drawer.vue';
 
   const emits = defineEmits(['openSftp', 'openTransfer']);
 
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 2d30e345..ca1a55ae 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
@@ -218,8 +218,8 @@
     }
   };
 
-  // 打开配置
-  const openSetting = inject<(record: HostQueryResponse) => void>(openSshModalKey) as any;
+  // 打开配置 FIXME
+  const openSetting = inject<(record: HostQueryResponse) => void>(openSshModalKey);
 
   // 设置收藏
   const setFavorite = async (item: HostQueryResponse) => {
diff --git a/orion-ops-ui/src/views/host/terminal/handler/terminal-session-handler.ts b/orion-ops-ui/src/views/host/terminal/handler/terminal-session-handler.ts
index 6b7e228c..3e06b77d 100644
--- a/orion-ops-ui/src/views/host/terminal/handler/terminal-session-handler.ts
+++ b/orion-ops-ui/src/views/host/terminal/handler/terminal-session-handler.ts
@@ -70,6 +70,7 @@ export default class TerminalSessionHandler implements ITerminalSessionHandler {
     switch (option) {
       case 'paste':
       case 'pasteTrimEnd':
+      case 'pasteOrigin':
       case 'interrupt':
       case 'enter':
       case 'commandEditor':
@@ -126,7 +127,7 @@ export default class TerminalSessionHandler implements ITerminalSessionHandler {
     this.inst.focus();
   }
 
-  // 粘贴
+  // 从剪切板粘贴并且去除尾部空格 (如果配置)
   paste() {
     readText().then(s => this.pasteTrimEnd(s));
   }
@@ -142,6 +143,12 @@ export default class TerminalSessionHandler implements ITerminalSessionHandler {
     this.inst.focus();
   }
 
+  // 粘贴原文
+  pasteOrigin(value: string) {
+    this.inst.paste(value);
+    this.inst.focus();
+  }
+
   // 选中全部
   selectAll() {
     this.inst.selectAll();
@@ -246,7 +253,7 @@ export default class TerminalSessionHandler implements ITerminalSessionHandler {
       append = value;
     }
     // 追加
-    this.pasteTrimEnd(append);
+    this.pasteOrigin(append);
   }
 
   // 截图
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 285158f3..7f25eab2 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
@@ -214,10 +214,12 @@ export interface ITerminalSessionHandler {
 
   // 复制选中
   copy: () => void;
-  // 粘贴
+  // 从剪切板粘贴并且去除尾部空格 (如果配置)
   paste: () => void;
   // 粘贴并且去除尾部空格 (如果配置)
   pasteTrimEnd: (value: string) => void;
+  // 粘贴原文
+  pasteOrigin: (value: string) => void;
   // 选中全部
   selectAll: () => void;
   // 去顶部