✨ 命令模板.

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>