✨ 命令模板.

2024-03-08 18:21:41 +08:00
parent b392ddf0e7
commit 54ae18987c
14 changed files with 363 additions and 90 deletions
--- a/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/request/exec/ExecTemplateCreateRequest.java
+++ b/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;

--- a/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/request/exec/ExecTemplateUpdateRequest.java
+++ b/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;

--- a/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/service/impl/ExecTemplateServiceImpl.java
+++ b/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())
-                .eq(ExecTemplateDO::getCommand, request.getCommand());
+                .like(ExecTemplateDO::getName, request.getName())
+                .like(ExecTemplateDO::getCommand, request.getCommand());
    }

 }
--- a/orion-ops-ui/src/components/view/editor/core.ts
+++ b/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'

 /**
 * 折叠方式
--- a/orion-ops-ui/src/components/view/editor/index.vue
+++ b/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>
--- a/orion-ops-ui/src/components/view/editor/languages/shell-suggestions.ts
+++ b/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
+};
--- a/orion-ops-ui/src/components/view/shell-editor/modal/index.vue
+++ b/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>
--- a/orion-ops-ui/src/views/exec/exec-template/components/exec-template-form-drawer.vue
+++ b/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"
-              :label-col-props="{ span: 5 }"
-              :wrapper-col-props="{ span: 18 }"
+              layout="vertical"
              :rules="formRules">
-        <!-- 名称 -->
-        <a-form-item field="name" label="名称">
+        <!-- 模板名称 -->
+        <a-form-item field="name" label="模板名称">
          <a-input v-model="formModel.name"
-                   placeholder="请输入名称"
-                   allow-clear/>
-        </a-form-item>
-        <!-- 命令 -->
-        <a-form-item field="command" label="命令">
-          <a-input v-model="formModel.command"
-                   placeholder="请输入命令"
+                   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不超时"
-                          hide-button />
+                          placeholder="为0则不超时"
+                          :min="0"
+                          :max="100000"
+                          hide-button>
+            <template #suffix>
+              秒
+            </template>
+          </a-input-number>
        </a-form-item>
+        <!-- 模板命令 -->
+        <a-form-item field="command" label="模板命令">
+          <editor v-model="formModel.command"
+                  containerClass="command-editor"
+                  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>
          <!-- 参数 -->
-        <a-form-item field="parameter" label="参数">
-          <a-input v-model="formModel.parameter"
-                   placeholder="请输入参数"
+          <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>
--- a/orion-ops-ui/src/views/exec/exec-template/components/exec-template-table.vue
+++ b/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,
--- a/orion-ops-ui/src/views/exec/exec-template/types/const.ts
+++ b/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'
+  },
+];
--- a/orion-ops-ui/src/views/exec/exec-template/types/form.rules.ts
+++ b/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不超时'
-}] as FieldRule[];
-
-export const parameter = [{
-  required: true,
-  message: '请输入参数'
+  message: '请输入超时时间'
 }] as FieldRule[];

 export default {
  name,
  command,
  timeout,
-  parameter,
 } as Record<string, FieldRule | FieldRule[]>;
--- a/orion-ops-ui/src/views/exec/exec-template/types/table.columns.ts
+++ b/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',
--- 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
@@ -33,8 +33,9 @@
          <editor v-model="formModel.command"
                  containerClass="command-editor"
                  language="shell"
-                  :auto-focus="true"
-                  :theme="preference.theme.dark ? 'vs-dark' : 'vs'" />
+                  theme="vs-dark"
+                  :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();