feat: 快速发送 shell 命令.

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

@@ -22,7 +22,6 @@
   import { createDefaultOptions } from './core';
   import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
   import { useAppStore } from '@/store';
-  import { language as shellLanguage } from 'monaco-editor/esm/vs/basic-languages/shell/shell.js';
 
   const appStore = useAppStore();
 
@@ -83,48 +82,6 @@
       emits('update:modelValue', value);
       emits('change', value);
     });
-
-    // FIXME test containerClass
-    // TODO
-    // 代码提示
-    monaco.languages.registerCompletionItemProvider('shell', {
-      provideCompletionItems() {
-        const suggestions: any = [];
-        // 这个keywords就是java.java文件中有的
-        shellLanguage.keywords?.forEach((item: any) => {
-          suggestions.push({
-            label: item,
-            kind: monaco.languages.CompletionItemKind.Keyword,
-            insertText: item,
-          });
-        });
-        shellLanguage.operators?.forEach((item: any) => {
-          suggestions.push({
-            label: item,
-            kind: monaco.languages.CompletionItemKind.Operator,
-            insertText: item,
-          });
-        });
-        shellLanguage.builtinFunctions?.forEach((item: any) => {
-          suggestions.push({
-            label: item,
-            kind: monaco.languages.CompletionItemKind.Function,
-            insertText: item,
-          });
-        });
-        shellLanguage.builtinVariables?.forEach((item: any) => {
-          suggestions.push({
-            label: item,
-            kind: monaco.languages.CompletionItemKind.Variable,
-            insertText: item,
-          });
-        });
-        return {
-          suggestions,
-        };
-      },
-    });
-
     emits('editor-mounted', editor);
   };
 
@@ -166,10 +123,10 @@
     }
   });
 
-  onMounted(() => {
-    init();
-  });
+  // 初始化
+  onMounted(init);
 
+  // 卸载
   onBeforeUnmount(() => {
     editor?.dispose();
     editor = undefined;

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

@@ -0,0 +1,106 @@
+<template>
+  <a-modal v-model:visible="visible"
+           title-align="start"
+           :width="width"
+           :body-style="{padding: '16px 8px'}"
+           :top="80"
+           :title="title"
+           :align-center="false"
+           :draggable="true"
+           :esc-to-close="false"
+           :mask-closable="false"
+           :unmount-on-close="true"
+           @close="handleClose">
+    <div :style="{ width: '100%', 'height': height }">
+      <editor v-model="value"
+              language="shell"
+              :theme="dark ? 'vs-dark' : 'vs'" />
+    </div>
+  </a-modal>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'shellEditorModal'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { onMounted, 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: {
+      type: [String, Number],
+      default: '60%'
+    },
+    height: {
+      type: String,
+      default: 'calc(100vh - 280px)'
+    },
+    dark: {
+      type: Boolean,
+      default: true
+    },
+  });
+
+  const { visible, setVisible } = useVisible();
+
+  const title = ref<string>();
+  const value = ref<string | any>();
+
+  // 打开
+  const open = (editorValue: string | any, editorTitle: string) => {
+    title.value = editorTitle;
+    value.value = editorValue;
+    setVisible(true);
+  };
+
+  // 获取值
+  const getValue = () => {
+    return value.value;
+  };
+
+  defineExpose({ open, getValue });
+
+  // 关闭
+  const handleClose = () => {
+    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>
+  :deep(.arco-modal-title) {
+    font-size: 14px;
+  }
+</style>