✨ 命令模板.

orion-ops-framework/orion-ops-spring-boot-starter-mybatis/src/main/resources/templates/orion-vue-views-components-form-drawer.vue.vm

@@ -36,7 +36,7 @@
           #else
           <a-input v-model="formModel.${field.propertyName}"
                    placeholder="请输入${field.comment}"
-                   allow-clear/>
+                   allow-clear />
           #end
           #end
         </a-form-item>

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/request/exec/ExecTemplateCreateRequest.java

@@ -40,7 +40,6 @@ public class ExecTemplateCreateRequest implements Serializable {
     @Schema(description = "超时时间秒 0不超时")
     private Integer timeout;
 
-    @NotBlank
     @Schema(description = "参数")
     private String parameter;
 

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/request/exec/ExecTemplateUpdateRequest.java

@@ -44,7 +44,6 @@ public class ExecTemplateUpdateRequest implements Serializable {
     @Schema(description = "超时时间秒 0不超时")
     private Integer timeout;
 
-    @NotBlank
     @Schema(description = "参数")
     private String parameter;
 

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/service/impl/ExecTemplateServiceImpl.java

@@ -152,8 +152,8 @@ public class ExecTemplateServiceImpl implements ExecTemplateService {
     private LambdaQueryWrapper<ExecTemplateDO> buildQueryWrapper(ExecTemplateQueryRequest request) {
         return execTemplateDAO.wrapper()
                 .eq(ExecTemplateDO::getId, request.getId())
-                .eq(ExecTemplateDO::getName, request.getName())
+                .like(ExecTemplateDO::getName, request.getName())
-                .eq(ExecTemplateDO::getCommand, request.getCommand());
+                .like(ExecTemplateDO::getCommand, request.getCommand());
     }
 
 }

orion-ops-ui/src/components/view/editor/core.ts

@@ -4,7 +4,7 @@ import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 /**
  * 主题
  */
-export type Theme = 'vs' | 'vs-dark'
+export type Theme = 'vs' | 'vs-dark' | 'hc-light' | 'hc-black'
 
 /**
  * 折叠方式

orion-ops-ui/src/components/view/editor/index.vue

@@ -22,6 +22,7 @@
   import { createDefaultOptions } from './core';
   import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
   import { useAppStore } from '@/store';
+  import shellSuggestions from './languages/shell-suggestions';
 
   const appStore = useAppStore();
 
@@ -51,6 +52,10 @@
       type: String,
       default: 'json',
     },
+    suggestions: {
+      type: Boolean,
+      default: false,
+    },
     containerClass: String,
     containerStyle: Object as PropType<CSSProperties>,
     theme: {
@@ -67,6 +72,7 @@
 
   const editorContainer = ref();
   let editor: any;
+  let completionItemProvider: any;
 
   // 初始化
   const init = () => {
@@ -80,6 +86,8 @@
     };
     // 创建编辑器
     editor = monaco.editor.create(editorContainer.value, options);
+    // 注册代码提示
+    registerSuggestions();
     // 自动聚焦
     if (props.autoFocus) {
       editor.focus();
@@ -141,8 +149,21 @@
     if (editor) {
       monaco.editor.setModelLanguage(editor?.getModel(), v as string);
     }
+    // 注册代码提示
+    registerSuggestions();
   });
 
+  // 注册代码提示
+  const registerSuggestions = () => {
+    if (!props.suggestions) {
+      return;
+    }
+    if (props.language === 'shell') {
+      completionItemProvider?.dispose();
+      completionItemProvider = monaco.languages.registerCompletionItemProvider(props.language, shellSuggestions);
+    }
+  };
+
   // 初始化
   onMounted(init);
 
@@ -150,6 +171,8 @@
   onBeforeUnmount(() => {
     editor?.dispose();
     editor = undefined;
+    completionItemProvider?.dispose();
+    completionItemProvider = undefined;
   });
 
 </script>

orion-ops-ui/src/components/view/editor/languages/shell-suggestions.ts

@@ -0,0 +1,27 @@
+import * as monaco from 'monaco-editor';
+import { language as shellLanguage } from 'monaco-editor/esm/vs/basic-languages/shell/shell.js';
+
+const provideCompletionItems = () => {
+  const suggestions: any = [];
+  shellLanguage.keywords?.forEach((item: any) => {
+    suggestions.push({
+      label: item,
+      kind: monaco.languages.CompletionItemKind.Keyword,
+      insertText: item,
+    });
+  });
+  shellLanguage.builtins?.forEach((item: any) => {
+    suggestions.push({
+      label: item,
+      kind: monaco.languages.CompletionItemKind.Function,
+      insertText: item,
+    });
+  });
+  return {
+    suggestions: [...new Set(suggestions)],
+  };
+};
+
+export default {
+  provideCompletionItems
+};

orion-ops-ui/src/components/view/shell-editor/modal/index.vue

@@ -14,6 +14,7 @@
     <div :style="{ width: '100%', 'height': height }">
       <editor v-model="value"
               language="shell"
+              :suggestions="true"
               :auto-focus="true"
               :theme="dark ? 'vs-dark' : 'vs'" />
     </div>
@@ -27,10 +28,8 @@
 </script>
 
 <script lang="ts" setup>
-  import { onMounted, ref } from 'vue';
+  import { ref } from 'vue';
   import useVisible from '@/hooks/visible';
-  import * as monaco from 'monaco-editor';
-  import { language } from 'monaco-editor/esm/vs/basic-languages/shell/shell.js';
 
   const props = defineProps({
     width: {
@@ -71,33 +70,6 @@
     setVisible(false);
   };
 
-  // 初始化
-  onMounted(() => {
-    // 代码提示
-    monaco.languages.registerCompletionItemProvider('shell', {
-      provideCompletionItems() {
-        const suggestions: any = [];
-        language.keywords?.forEach((item: any) => {
-          suggestions.push({
-            label: item,
-            kind: monaco.languages.CompletionItemKind.Keyword,
-            insertText: item,
-          });
-        });
-        language.builtins?.forEach((item: any) => {
-          suggestions.push({
-            label: item,
-            kind: monaco.languages.CompletionItemKind.Function,
-            insertText: item,
-          });
-        });
-        return {
-          suggestions: [...new Set(suggestions)],
-        };
-      },
-    });
-  });
-
 </script>
 
 <style lang="less" scoped>

orion-ops-ui/src/views/exec/exec-template/components/exec-template-form-drawer.vue

@@ -11,33 +11,77 @@
     <a-spin class="full modal-form" :loading="loading">
       <a-form :model="formModel"
               ref="formRef"
-              label-align="right"
+              layout="vertical"
-              :label-col-props="{ span: 5 }"
-              :wrapper-col-props="{ span: 18 }"
               :rules="formRules">
-        <!-- 名称 -->
+        <!-- 模板名称 -->
-        <a-form-item field="name" label="名称">
+        <a-form-item field="name" label="模板名称">
           <a-input v-model="formModel.name"
-                   placeholder="请输入名称"
+                   placeholder="请输入模板名称"
-                   allow-clear/>
+                   allow-clear />
-        </a-form-item>
-        <!-- 命令 -->
-        <a-form-item field="command" label="命令">
-          <a-input v-model="formModel.command"
-                   placeholder="请输入命令"
-                   allow-clear/>
         </a-form-item>
         <!-- 超时时间 -->
-        <a-form-item field="timeout" label="超时时间">
+        <a-form-item field="timeout"
+                     label="超时时间">
           <a-input-number v-model="formModel.timeout"
-                          placeholder="请输入超时时间 秒 0不超时"
+                          placeholder="为0则不超时"
-                          hide-button />
+                          :min="0"
+                          :max="100000"
+                          hide-button>
+            <template #suffix>
+              秒
+            </template>
+          </a-input-number>
         </a-form-item>
-        <!-- 参数 -->
+        <!-- 模板命令 -->
-        <a-form-item field="parameter" label="参数">
+        <a-form-item field="command" label="模板命令">
-          <a-input v-model="formModel.parameter"
+          <editor v-model="formModel.command"
-                   placeholder="请输入参数"
+                  containerClass="command-editor"
-                   allow-clear/>
+                  language="shell"
+                  theme="vs-dark"
+                  :suggestions="false" />
+        </a-form-item>
+        <!-- 命令参数 -->
+        <a-form-item field="parameter"
+                     class="parameter-form-item"
+                     label="命令参数">
+          <!-- label -->
+          <template #label>
+            <div class="parameter-label-wrapper">
+              <span>命令参数</span>
+              <span class="span-blue pointer" @click="addParameter">添加参数</span>
+            </div>
+          </template>
+          <!-- 参数 -->
+          <template v-if="parameter.length">
+            <a-input-group v-for="(item, i) in parameter"
+                           :key="i"
+                           class="parameter-item"
+                           :class="[ i === parameter.length - 1 ? 'parameter-item-last' : '' ]">
+              <a-input class="parameter-item-name"
+                       v-model="item.name"
+                       placeholder="参数名称 (必填)"
+                       allow-clear />
+              <a-input class="parameter-item-default"
+                       v-model="item.default"
+                       placeholder="默认值 (非必填)"
+                       allow-clear />
+              <a-input class="parameter-item-description"
+                       v-model="item.desc"
+                       placeholder="描述 (非必填)"
+                       allow-clear />
+              <span class="parameter-item-close click-icon-wrapper"
+                    title="移除"
+                    @click="removeParameter(i)">
+             <icon-close />
+            </span>
+            </a-input-group>
+          </template>
+          <!-- 无参数 -->
+          <template v-else>
+            <span class="no-parameter">
+              <icon-empty class="mr4" />无参数
+            </span>
+          </template>
         </a-form-item>
       </a-form>
     </a-spin>
@@ -51,14 +95,17 @@
 </script>
 
 <script lang="ts" setup>
+  import type { TemplateParam } from '../types/const';
   import type { ExecTemplateUpdateRequest } from '@/api/exec/exec-template';
-  import { ref } from 'vue';
+  import { onUnmounted, ref } from 'vue';
   import useLoading from '@/hooks/loading';
   import useVisible from '@/hooks/visible';
   import formRules from '../types/form.rules';
-  import {} from '../types/const';
   import { createExecTemplate, updateExecTemplate } from '@/api/exec/exec-template';
+  import { builtinsParams } from '../types/const';
   import { Message } from '@arco-design/web-vue';
+  import * as monaco from 'monaco-editor';
+  import { language as shellLanguage } from 'monaco-editor/esm/vs/basic-languages/shell/shell.js';
 
   const { visible, setVisible } = useVisible();
   const { loading, setLoading } = useLoading();
@@ -71,13 +118,15 @@
       id: undefined,
       name: undefined,
       command: undefined,
-      timeout: undefined,
+      timeout: 0,
       parameter: undefined,
     };
   };
 
   const formRef = ref<any>();
   const formModel = ref<ExecTemplateUpdateRequest>({});
+  const parameter = ref<Array<TemplateParam>>([]);
+  const suggestionsDispose = ref();
 
   const emits = defineEmits(['added', 'updated']);
 
@@ -100,10 +149,78 @@
   // 渲染表单
   const renderForm = (record: any) => {
     formModel.value = Object.assign({}, record);
+    if (record.parameter) {
+      parameter.value = JSON.parse(record.parameter);
+    } else {
+      parameter.value = [];
+    }
+    // 注册代码提示
+    registerSuggestions();
   };
 
   defineExpose({ openAdd, openUpdate });
 
+  // 添加参数
+  const addParameter = () => {
+    parameter.value.push({});
+  };
+
+  // 移除参数
+  const removeParameter = (index: number) => {
+    parameter.value.splice(index, 1);
+  };
+
+  // 注册代码提示
+  const registerSuggestions = () => {
+    if (suggestionsDispose.value) {
+      return;
+    }
+    // 代码提示
+    suggestionsDispose.value = monaco.languages.registerCompletionItemProvider('shell', {
+      provideCompletionItems() {
+        const suggestions: any = [];
+        shellLanguage.keywords?.forEach((item: any) => {
+          suggestions.push({
+            label: item,
+            kind: monaco.languages.CompletionItemKind.Keyword,
+            insertText: item
+          });
+        });
+        shellLanguage.builtins?.forEach((item: any) => {
+          suggestions.push({
+            label: item,
+            kind: monaco.languages.CompletionItemKind.Function,
+            insertText: item,
+          });
+        });
+        // 内置参数提示
+        builtinsParams.forEach(s => {
+          suggestions.push({
+            label: s.name,
+            kind: monaco.languages.CompletionItemKind.Function,
+            insertText: `@{{ ${s.name} }}`,
+            detail: s.desc || '',
+          });
+        });
+        // 命令参数提示
+        parameter.value.forEach(s => {
+          if (!s.name) {
+            return;
+          }
+          suggestions.push({
+            label: s.name,
+            kind: monaco.languages.CompletionItemKind.Function,
+            insertText: `@{{ ${s.name} }}`,
+            detail: s.desc || '',
+          });
+        });
+        return {
+          suggestions: [...new Set(suggestions)],
+        };
+      },
+    });
+  };
+
   // 确定
   const handlerOk = async () => {
     setLoading(true);
@@ -113,6 +230,16 @@
       if (error) {
         return false;
       }
+      // 验证并设置命令参数
+      for (const p of parameter.value) {
+        if (!p.name) {
+          Message.warning('请补全命令参数');
+          return false;
+        }
+      }
+      if (parameter.value.length) {
+        formModel.value.parameter = JSON.stringify(parameter.value);
+      }
       if (isAddHandle.value) {
         // 新增
         await createExecTemplate(formModel.value);
@@ -141,10 +268,91 @@
   // 清空
   const handlerClear = () => {
     setLoading(false);
+    // 卸载代码提示
+    suggestionsDispose.value?.dispose();
+    suggestionsDispose.value = undefined;
   };
 
+  // 卸载关闭
+  onUnmounted(handlerClear);
+
 </script>
 
 <style lang="less" scoped>
+  .parameter-form-item {
+    user-select: none;
+
+    :deep(.arco-form-item-label) {
+      width: 100%;
+    }
+
+    .parameter-label-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    :deep(.arco-form-item-content) {
+      flex-direction: column;
+    }
+
+    .parameter-item-last {
+      margin-bottom: 0 !important;
+    }
+
+    .parameter-item {
+      margin-bottom: 12px;
+      display: flex;
+      justify-content: space-between;
+
+      & > span {
+        border-radius: 2px;
+        border-right-color: transparent;
+      }
+
+      &-name {
+        width: 29%;
+      }
+
+      &-default {
+        width: 29%;
+      }
+
+      &-description {
+        width: calc(39% - 44px);
+      }
+
+      &-close {
+        cursor: pointer;
+        width: 32px;
+        height: 32px;
+        font-size: 16px;
+        background: var(--color-fill-2);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &:hover {
+          background: var(--color-fill-3);
+        }
+      }
+    }
+
+    .no-parameter {
+      background: var(--color-fill-2);
+      width: 100%;
+      height: 32px;
+      border-radius: 2px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--color-text-2);
+    }
+  }
+
+  .command-editor {
+    width: 100%;
+    height: 44vh;
+  }
 
 </style>

orion-ops-ui/src/views/exec/exec-template/components/exec-template-table.vue

@@ -13,16 +13,16 @@
                         allow-clear
                         hide-button />
       </a-form-item>
-      <!-- 名称 -->
+      <!-- 模板名称 -->
-      <a-form-item field="name" label="名称" label-col-flex="50px">
+      <a-form-item field="name" label="模板名称" label-col-flex="50px">
         <a-input v-model="formModel.name"
-                 placeholder="请输入名称"
+                 placeholder="请输入模板名称"
                  allow-clear />
       </a-form-item>
-      <!-- 命令 -->
+      <!-- 模板命令 -->
-      <a-form-item field="command" label="命令" label-col-flex="50px">
+      <a-form-item field="command" label="模板命令" label-col-flex="50px">
         <a-input v-model="formModel.command"
-                 placeholder="请输入命令"
+                 placeholder="请输入模板命令"
                  allow-clear />
       </a-form-item>
     </query-header>
@@ -62,6 +62,17 @@
              @page-change="(page) => fetchTableData(page, pagination.pageSize)"
              @page-size-change="(size) => fetchTableData(1, size)"
              :bordered="false">
+      <!-- 模板名称 -->
+      <template #name="{ record }">
+        <span class="span-blue">{{ record.name }}</span>
+      </template>
+      <!-- 模板命令 -->
+      <template #command="{ record }">
+        <span class="copy-left" @click="copy(record.command, '已复制')">
+          <icon-copy />
+        </span>
+        <span :title="record.command">{{ record.command }}</span>
+      </template>
       <!-- 操作 -->
       <template #handle="{ record }">
         <div class="table-handle-wrapper">
@@ -105,6 +116,7 @@
   import columns from '../types/table.columns';
   import {} from '../types/const';
   import { usePagination } from '@/types/table';
+  import useCopy from '@/hooks/copy';
 
   const emits = defineEmits(['openAdd', 'openUpdate']);
 
@@ -112,6 +124,7 @@
 
   const pagination = usePagination();
   const { loading, setLoading } = useLoading();
+  const { copy } = useCopy();
 
   const formModel = reactive<ExecTemplateQueryRequest>({
     id: undefined,

orion-ops-ui/src/views/exec/exec-template/types/const.ts

@@ -0,0 +1,47 @@
+// 模板参数
+export interface TemplateParam {
+  name?: string;
+  default?: string;
+  desc?: string;
+}
+
+// 内置参数
+export const builtinsParams: Array<TemplateParam> = [
+  {
+    name: 'hostId',
+    desc: '主机id'
+  }, {
+    name: 'hostName',
+    desc: '主机名称'
+  }, {
+    name: 'hostCode',
+    desc: '主机编码'
+  }, {
+    name: 'userId',
+    desc: '执行用户id'
+  }, {
+    name: 'username',
+    desc: '执行用户名称'
+  }, {
+    name: 'execId',
+    desc: '执行id'
+  }, {
+    name: 'uuid',
+    desc: 'uuid'
+  }, {
+    name: 'uuidShort',
+    desc: 'uuid 无 \'-\''
+  }, {
+    name: 'timeMillis',
+    desc: '时间戳毫秒'
+  }, {
+    name: 'timestamp',
+    desc: '时间戳'
+  }, {
+    name: 'date',
+    desc: '时间 yyyy-MM-dd'
+  }, {
+    name: 'datetime',
+    desc: '时间 yyyy-MM-dd HH:mm:ss'
+  },
+];

orion-ops-ui/src/views/exec/exec-template/types/form.rules.ts

@@ -2,30 +2,24 @@ import type { FieldRule } from '@arco-design/web-vue';
 
 export const name = [{
   required: true,
-  message: '请输入名称'
+  message: '请输入模板名称'
 }, {
   maxLength: 64,
-  message: '名称长度不能大于64位'
+  message: '模板名称长度不能大于64位'
 }] as FieldRule[];
 
 export const command = [{
   required: true,
-  message: '请输入命令'
+  message: '请输入模板命令'
 }] as FieldRule[];
 
 export const timeout = [{
   required: true,
-  message: '请输入超时时间 秒 0不超时'
+  message: '请输入超时时间'
-}] as FieldRule[];
-
-export const parameter = [{
-  required: true,
-  message: '请输入参数'
 }] as FieldRule[];
 
 export default {
   name,
   command,
   timeout,
-  parameter,
 } as Record<string, FieldRule | FieldRule[]>;

orion-ops-ui/src/views/exec/exec-template/types/table.columns.ts

@@ -10,20 +10,18 @@ const columns = [
     align: 'left',
     fixed: 'left',
   }, {
-    title: '名称',
+    title: '模板名称',
     dataIndex: 'name',
     slotName: 'name',
     align: 'left',
     width: 200,
     ellipsis: true,
-    tooltip: true,
   }, {
-    title: '命令',
+    title: '模板命令',
     dataIndex: 'command',
     slotName: 'command',
     align: 'left',
     ellipsis: true,
-    tooltip: true,
   }, {
     title: '修改时间',
     dataIndex: 'updateTime',
@@ -33,12 +31,6 @@ const columns = [
     render: ({ record }) => {
       return dateFormat(new Date(record.updateTime));
     },
-  }, {
-    title: '修改人',
-    dataIndex: 'updater',
-    slotName: 'updater',
-    width: 90,
-    ellipsis: true,
   }, {
     title: '操作',
     slotName: 'handle',

orion-ops-ui/src/views/host/command-snippet/components/command-snippet-form-drawer.vue

@@ -33,8 +33,9 @@
           <editor v-model="formModel.command"
                   containerClass="command-editor"
                   language="shell"
-                  :auto-focus="true"
+                  theme="vs-dark"
-                  :theme="preference.theme.dark ? 'vs-dark' : 'vs'" />
+                  :suggestions="true"
+                  :auto-focus="true" />
         </a-form-item>
       </a-form>
     </a-spin>
@@ -55,10 +56,8 @@
   import { createCommandSnippet, updateCommandSnippet } from '@/api/asset/command-snippet';
   import formRules from '../types/form.rules';
   import { Message } from '@arco-design/web-vue';
-  import { useTerminalStore } from '@/store';
   import CommandSnippetGroupSelect from './command-snippet-group-select.vue';
 
-  const { preference } = useTerminalStore();
   const { visible, setVisible } = useVisible();
   const { loading, setLoading } = useLoading();