@gct-paas/core-web 0.1.4-dev.1 → 0.1.4-dev.11

package/es/modules/code-editor/monaco-editor.vue2.mjs

@@ -0,0 +1,440 @@
+import { defineComponent, ref, watch, computed, onMounted, onUnmounted, resolveComponent, openBlock, createElementBlock, renderSlot, createElementVNode, createVNode, normalizeStyle, withCtx, createTextVNode, toDisplayString, unref, createBlock, normalizeClass, createCommentVNode } from 'vue';
+import { SearchOutlined, UpCircleOutlined, DownCircleOutlined, FormatPainterOutlined, CloudDownloadOutlined, ClearOutlined, RobotOutlined } from '@ant-design/icons-vue';
+import { Theme } from './useMonacoEditor.mjs';
+import { format } from 'sql-formatter';
+import 'ant-design-vue';
+import { monacoLoader } from '../../utils/monaco-loader/monaco-loader.mjs';
+import 'lodash-es';
+import '@gct-paas/core';
+import 'vue3-dnd';
+import 'react-dnd-html5-backend';
+import '../../components/app-modal/app-modal-component.css';/* empty css                                                   */
+
+const _hoisted_1 = { class: "hex-monaco-editor m-e w-full h-full overflow-hidden" };
+const _hoisted_2 = { class: "m-e-main" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "monaco-editor",
+  props: {
+    value: { default: "" },
+    title: { default: "" },
+    language: { default: "typescript" },
+    theme: { default: Theme.DARK },
+    readonly: { type: Boolean, default: false },
+    direction: { default: "bottom" },
+    gapVal: { default: 20 }
+  },
+  emits: [
+    "update:value",
+    "change",
+    "editor-mounted",
+    "blur",
+    "focus",
+    "chat-bot-click"
+  ],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const isMonacoReady = ref(false);
+    let monaco = null;
+    watch(
+      () => props.language,
+      async (newVal) => {
+        if (monacoEditor && monacoEditor.getModel() && monaco) {
+          monaco.editor.setModelLanguage(monacoEditor.getModel(), newVal);
+        }
+      }
+    );
+    const emit = __emit;
+    const Editor = ref();
+    let monacoEditor;
+    const wordWrap = ref(true);
+    const fullScreen = ref(false);
+    const isThemeLightOrBlack = ref(false);
+    const isChatBotActive = ref(false);
+    const isRagEnabled = ref(false);
+    const getStyle = computed(() => {
+      return {
+        color: isThemeLightOrBlack.value ? "#000" : "#fff",
+        marginRight: props.gapVal + "px"
+      };
+    });
+    if (props.theme === Theme.VS) {
+      isThemeLightOrBlack.value = true;
+    }
+    let option = {
+      value: props.value ?? "",
+      // 编辑器内容
+      language: props.language,
+      automaticLayout: true,
+      // 是否自动布局
+      theme: props.theme,
+      readOnly: props.readonly,
+      wordWrap: wordWrap.value ? "on" : "off",
+      // 当单行文本太长时截断换行，true 为换行，false 为不换行
+      scrollBeyondLastLine: false,
+      // 滚动完最后一行后再滚动一屏幕
+      // 是否开启小地图
+      minimap: {
+        enabled: true
+      },
+      tabSize: 2,
+      // tab缩进长度
+      autoClosingBrackets: "always",
+      // 是否自动添加结束括号(包括中括号) "always" | "languageDefined" | "beforeWhitespace" | "never"
+      autoClosingDelete: "always",
+      // 是否自动删除结束括号(包括中括号) "always" | "never" | "auto"
+      autoClosingOvertype: "always",
+      // 是否关闭改写 即使用insert模式时是覆盖后面的文字还是不覆盖后面的文字 "always" | "never" | "auto"
+      autoClosingQuotes: "always",
+      // 是否自动添加结束的单引号 双引号 "always" | "languageDefined" | "beforeWhitespace" | "never"
+      comments: {
+        ignoreEmptyLines: true,
+        // 插入行注释时忽略空行。默认为真。
+        insertSpace: true
+        // 在行注释标记之后和块注释标记内插入一个空格。默认为真。
+      },
+      // 注释配置
+      columnSelection: false,
+      // 启用列编辑 按下shift键位然后按↑↓键位可以实现列选择 然后实现列编辑
+      folding: true,
+      // 是否启用代码折叠
+      fixedOverflowWidgets: true,
+      // 超出编辑器大小的使用fixed属性显示
+      // 编辑器悬停配置
+      hover: {
+        sticky: true,
+        // 悬停是否粘滞，可以点击并选择其内容
+        above: false
+        // 悬停是否应该显示在直线上方
+      }
+    };
+    async function init() {
+      monaco = await monacoLoader.loadMonaco();
+      dispose();
+      initEditor();
+      if (props.value) {
+        handleFormatCodeClick();
+      }
+    }
+    async function onInit() {
+      const bol = await _api.apaas.basicConfig.getAiRagEnabled();
+      if (bol == true) {
+        isRagEnabled.value = true;
+      } else {
+        isRagEnabled.value = false;
+      }
+    }
+    function initEditor() {
+      if (!monaco) {
+        console.warn(
+          "[MonacoEditor] Monaco editor is not available for initEditor"
+        );
+        return;
+      }
+      monacoEditor = monaco.editor.create(Editor.value, option);
+      if (props.direction === "bottom") {
+        scrollToBottom();
+      } else if (props.direction === "top") {
+        scrollToTop();
+      }
+      monacoEditor.onDidChangeModelContent(() => {
+        emit("change", getEditorContent());
+        emit("update:value", getEditorContent());
+      });
+      monacoEditor.onDidBlurEditorText(() => {
+        emit("blur", getEditorContent());
+        emit("update:value", getEditorContent());
+      });
+      monacoEditor.onDidFocusEditorText(() => {
+        emit("focus");
+      });
+      isMonacoReady.value = true;
+      emit("editor-mounted", monacoEditor);
+    }
+    function setEditorContent(val) {
+      monacoEditor.setValue(val);
+      emit("change", getEditorContent());
+      emit("update:value", getEditorContent());
+    }
+    function getEditorContent() {
+      return monacoEditor.getValue();
+    }
+    function getEditorMarkers() {
+      if (!monaco) {
+        console.warn(
+          "[MonacoEditor] Monaco editor is not available for getEditorMarkers"
+        );
+        return [];
+      }
+      const model = monacoEditor.getModel();
+      if (!model) {
+        return [];
+      }
+      return monaco.editor.getModelMarkers({ resource: model.uri });
+    }
+    function findByKeyword() {
+      if (!monaco) {
+        console.warn(
+          "[MonacoEditor] Monaco editor is not available for findByKeyword"
+        );
+        return;
+      }
+      try {
+        monacoEditor.focus();
+        monacoEditor.setSelection(new monaco.Range(1, 9999, 1, 1e4));
+        monacoEditor.trigger("", "actions.find", null);
+      } catch (error) {
+        console.error(error);
+      }
+    }
+    function scrollToTop() {
+      monacoEditor.setScrollPosition({ scrollTop: 0 });
+    }
+    function scrollToBottom() {
+      monacoEditor.revealLine(monacoEditor.getModel().getLineCount());
+    }
+    function setEditorWordWrap() {
+      wordWrap.value = !wordWrap.value;
+      if (wordWrap.value) {
+        monacoEditor.updateOptions({ wordWrap: "on" });
+      } else {
+        monacoEditor.updateOptions({ wordWrap: "off" });
+      }
+    }
+    function setEditorTheme() {
+      isThemeLightOrBlack.value = !isThemeLightOrBlack.value;
+      if (isThemeLightOrBlack.value) {
+        monacoEditor.updateOptions({ theme: "vs" });
+      } else {
+        monacoEditor.updateOptions({ theme: "vs-dark" });
+      }
+    }
+    function handleFullScreenClick() {
+      if (!Editor.value.fullscreenElement) {
+        Editor.value.requestFullscreen();
+        fullScreen.value = true;
+      } else {
+        Editor.value.exitFullscreen();
+        fullScreen.value = false;
+      }
+    }
+    function handleDownloadLogClick() {
+      exportFile(props.title, monacoEditor.getValue());
+    }
+    function exportFile(name, data) {
+      const url = window.URL || window.webkitURL || window;
+      const blob = new Blob([data]);
+      const event = document.createEvent("MouseEvents");
+      event.initMouseEvent(
+        "click",
+        true,
+        false,
+        window,
+        0,
+        0,
+        0,
+        0,
+        0,
+        false,
+        false,
+        false,
+        false,
+        0,
+        null
+      );
+      const link = document.createElementNS(
+        "http://www.w3.org/1999/xhtml",
+        "a"
+      );
+      link.href = url.createObjectURL(blob);
+      link.download = name;
+      link.dispatchEvent(event);
+    }
+    function handleFormatCodeClick() {
+      if (props.language == "sql") {
+        const sqlContent = getEditorContent();
+        const formattedSql = format(sqlContent);
+        monacoEditor.setValue(formattedSql);
+      } else {
+        monacoEditor.getAction("editor.action.formatDocument").run();
+      }
+      const newVal = getEditorContent();
+      emit("change", newVal);
+      emit("update:value", newVal);
+    }
+    function handleClearClick() {
+      setEditorContent("");
+    }
+    function handleChatBotClick() {
+      isChatBotActive.value = !isChatBotActive.value;
+      emit("chat-bot-click");
+    }
+    function dispose() {
+      if (monacoEditor) {
+        monacoEditor.dispose();
+      }
+    }
+    function getMonacoEditor() {
+      return monacoEditor;
+    }
+    onMounted(() => {
+      init();
+    });
+    onUnmounted(() => {
+      dispose();
+    });
+    function setValue(code) {
+      const model = monacoEditor.getModel();
+      if (!model) return;
+      const fullRange = model.getFullModelRange();
+      monacoEditor.executeEdits("setValue", [
+        {
+          range: fullRange,
+          text: code,
+          forceMoveMarkers: false
+        }
+      ]);
+      emit("change", getEditorContent());
+      emit("update:value", getEditorContent());
+    }
+    function getValue() {
+      return monacoEditor.getValue();
+    }
+    function getSelectCode() {
+      const selection = monacoEditor.getSelection();
+      if (selection) {
+        const text = monacoEditor.getModel()?.getValueInRange(selection);
+        const startLineNumber = selection.startLineNumber;
+        const startColumn = selection.startColumn;
+        const endLineNumber = selection.endLineNumber;
+        const endColumn = selection.endColumn;
+        const textBeforeRange = {
+          startLineNumber: 1,
+          startColumn: 1,
+          endLineNumber: startLineNumber,
+          endColumn: startColumn
+        };
+        const textBefore = monacoEditor.getModel().getValueInRange(textBeforeRange);
+        const textAfterRange = {
+          startLineNumber: endLineNumber,
+          startColumn: endColumn,
+          endLineNumber: monacoEditor.getModel().getLineCount(),
+          endColumn: monacoEditor.getModel().getLineMaxColumn(monacoEditor.getModel().getLineCount())
+        };
+        const textAfter = monacoEditor.getModel().getValueInRange(textAfterRange);
+        return {
+          text,
+          textBefore,
+          textAfter
+        };
+      }
+      return {};
+    }
+    onInit();
+    __expose({
+      isMonacoReady,
+      reload(newVal) {
+        if (monacoEditor == null) {
+          console.warn("[MonacoEditor] Monaco editor is not available for reload");
+          return;
+        }
+        monacoEditor.setValue(newVal || "");
+      },
+      getMonacoEditor,
+      setEditorContent,
+      getEditorContent,
+      scrollToTop,
+      scrollToBottom,
+      setEditorWordWrap,
+      setEditorTheme,
+      handleFullScreenClick,
+      handleDownloadLogClick,
+      getEditorMarkers,
+      handleFormatCodeClick,
+      getValue,
+      setValue,
+      getSelectCode,
+      isChatBotActive,
+      handleChatBotClick
+    });
+    return (_ctx, _cache) => {
+      const _component_a_col = resolveComponent("a-col");
+      const _component_a_row = resolveComponent("a-row");
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        renderSlot(_ctx.$slots, "header", {}, void 0, true),
+        createElementVNode("div", _hoisted_2, [
+          createVNode(_component_a_row, {
+            class: "m-e-main_toolbar w-full flex",
+            type: "flex",
+            justify: "space-between",
+            style: normalizeStyle(
+              isThemeLightOrBlack.value ? "background-color: #fff; box-shadow: 0px 2px 5px #ddd;" : "background-color: #1e1e1e; box-shadow: 0px 2px 5px #111;"
+            )
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_a_col, {
+                class: "m-e-main_toolbar_left flex-1",
+                style: normalizeStyle(isThemeLightOrBlack.value ? "color: #000" : "color: #fff")
+              }, {
+                default: withCtx(() => [
+                  createElementVNode("span", null, [
+                    renderSlot(_ctx.$slots, "title", {}, () => [
+                      createTextVNode(toDisplayString(__props.title), 1)
+                    ], true)
+                  ])
+                ]),
+                _: 3
+              }, 8, ["style"]),
+              createVNode(_component_a_col, {
+                class: "m-e-main_toolbar_right",
+                style: normalizeStyle(getStyle.value)
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(SearchOutlined), {
+                    class: "icon",
+                    onClick: findByKeyword
+                  }),
+                  createVNode(unref(UpCircleOutlined), {
+                    class: "icon",
+                    onClick: scrollToTop
+                  }),
+                  createVNode(unref(DownCircleOutlined), {
+                    class: "icon",
+                    onClick: scrollToBottom
+                  }),
+                  createVNode(unref(FormatPainterOutlined), {
+                    class: "icon",
+                    onClick: handleFormatCodeClick
+                  }),
+                  createVNode(unref(CloudDownloadOutlined), {
+                    class: "icon",
+                    onClick: handleDownloadLogClick
+                  }),
+                  createVNode(unref(ClearOutlined), {
+                    class: "icon",
+                    onClick: handleClearClick
+                  }),
+                  isRagEnabled.value ? (openBlock(), createBlock(unref(RobotOutlined), {
+                    key: 0,
+                    title: "聊天机器人",
+                    class: normalizeClass(["icon", { "icon-active": isChatBotActive.value }]),
+                    onClick: handleChatBotClick
+                  }, null, 8, ["class"])) : createCommentVNode("", true)
+                ]),
+                _: 1
+              }, 8, ["style"])
+            ]),
+            _: 3
+          }, 8, ["style"]),
+          createElementVNode("div", {
+            ref_key: "Editor",
+            ref: Editor,
+            class: "m-e-main_container"
+          }, null, 512)
+        ]),
+        renderSlot(_ctx.$slots, "footer", {}, void 0, true)
+      ]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/modules/code-editor/useEditorConsole.d.ts

@@ -0,0 +1,54 @@
+interface EditorConsoleState {
+    /** 显隐 */
+    visible?: boolean;
+    /** 输入默认值 */
+    defaultInput?: string;
+    /** tab选项卡key */
+    tabActiveKey?: string;
+    /** 索引签名，允许字符串键访问 */
+    [key: string]: string | boolean | undefined;
+}
+interface ConsoleValueState {
+    output: string;
+    error: string;
+    logs: unknown[];
+}
+export declare function useEditorConsole(props?: EditorConsoleState): {
+    editorConsoleState: import('vue').Ref<{
+        [x: string]: string | boolean | undefined;
+        visible?: boolean | undefined;
+        defaultInput?: string | undefined;
+        tabActiveKey?: string | undefined;
+    }, EditorConsoleState | {
+        [x: string]: string | boolean | undefined;
+        visible?: boolean | undefined;
+        defaultInput?: string | undefined;
+        tabActiveKey?: string | undefined;
+    }>;
+    consoleValueState: import('vue').Ref<{
+        output: string;
+        error: string;
+        logs: unknown[];
+    }, ConsoleValueState | {
+        output: string;
+        error: string;
+        logs: unknown[];
+    }>;
+    toggleVisible: () => void;
+    changeTabActiveKey: (key: string) => void;
+};
+export declare function useEditorConsoleInner(): {
+    getInstance: () => any;
+    showConsolePanel: () => void;
+    hideConsolePanel: () => void;
+    getInputValue: ({ showError, ignoreError }?: {
+        showError?: boolean | undefined;
+        ignoreError?: boolean | undefined;
+    }) => Promise<any>;
+    setConsoleResult: (result: IObject) => void;
+    formatJson2Notes: (value: unknown, options?: {
+        newline?: boolean;
+        spaceAfterColon?: boolean;
+    }) => string;
+};
+export {};

package/es/modules/code-editor/useEditorConsole.mjs

@@ -0,0 +1,194 @@
+import { shallowRef, ref, watch, unref, nextTick } from 'vue';
+import { isEmpty, cloneDeep } from 'lodash-es';
+import 'ant-design-vue';
+import { monacoLoader } from '../../utils/monaco-loader/monaco-loader.mjs';
+import '@gct-paas/core';
+import 'vue3-dnd';
+import 'react-dnd-html5-backend';
+import '../../components/app-modal/app-modal-component.css';/* empty css                                                   */
+
+const instanceRef = shallowRef(null);
+const editorConsoleState = ref({
+  visible: false,
+  defaultInput: "",
+  tabActiveKey: ""
+});
+const consoleValueState = ref({
+  output: "",
+  error: "",
+  logs: []
+});
+function useEditorConsole(props) {
+  watch(
+    () => props,
+    () => {
+      if (props) {
+        Object.keys(props).forEach((key) => {
+          editorConsoleState.value[key] = unref(props[key]);
+        });
+      }
+    },
+    { immediate: true }
+  );
+  watch(
+    () => unref(editorConsoleState).visible,
+    async (visible) => {
+      await nextTick();
+      if (visible && !unref(instanceRef)) {
+        const monaco = await monacoLoader.loadMonaco();
+        instanceRef.value = monaco.editor.create(
+          document.querySelector(".editor-console__input"),
+          {
+            value: props?.defaultInput,
+            language: "json",
+            automaticLayout: true,
+            minimap: {
+              enabled: false
+            }
+          }
+        );
+      }
+    }
+  );
+  function toggleVisible() {
+    editorConsoleState.value.visible = !unref(editorConsoleState).visible;
+  }
+  function changeTabActiveKey(key) {
+    editorConsoleState.value.tabActiveKey = key;
+  }
+  return {
+    editorConsoleState,
+    consoleValueState,
+    toggleVisible,
+    changeTabActiveKey
+  };
+}
+function useEditorConsoleInner() {
+  const getInstance = () => {
+    const instance = unref(instanceRef);
+    if (!instance) {
+      console.warn("useEditorConsoleInner instance is undefined!");
+    }
+    return instance;
+  };
+  function showConsolePanel() {
+    editorConsoleState.value.visible = true;
+  }
+  function hideConsolePanel() {
+    editorConsoleState.value.visible = false;
+  }
+  async function getInputValue({ showError = true, ignoreError = false } = {}) {
+    const monaco = await monacoLoader.loadMonaco();
+    const errs = monaco.editor.getModelMarkers({
+      owner: "json"
+    });
+    if (errs.length > 0) {
+      if (showError) {
+        _gct.message.error("参数语法错误");
+      }
+      if (!ignoreError) {
+        return Promise.reject();
+      }
+    }
+    return getInstance()?.getValue() ?? unref(editorConsoleState).defaultInput;
+  }
+  function formatJson2Notes(value, options) {
+    if (isEmpty(value)) {
+      return value;
+    }
+    let cloneJson = cloneDeep(value);
+    if (typeof value !== "string") {
+      try {
+        cloneJson = decodeURIComponent(JSON.stringify(cloneJson));
+      } catch (error) {
+        console.error(error);
+        cloneJson = JSON.stringify(cloneJson);
+      }
+    } else {
+      try {
+        cloneJson = decodeURIComponent(cloneJson);
+      } catch (error) {
+        console.warn(error);
+      }
+      try {
+        cloneJson = JSON.parse(cloneJson);
+      } catch (err) {
+        console.warn(err);
+      }
+      cloneJson = JSON.stringify(cloneJson);
+    }
+    const {
+      /**  在 '{' or '[' follows ':'位置移除新行 */
+      newline = false,
+      /**  在冒号后面加空格 */
+      spaceAfterColon = true
+    } = options || {};
+    let codeStr = cloneJson;
+    let regex;
+    regex = /([{}])/g;
+    codeStr = codeStr.replace(regex, "\r\n$1\r\n");
+    regex = /([[\]])/g;
+    codeStr = codeStr.replace(regex, "\r\n$1\r\n");
+    regex = /(,)/g;
+    codeStr = codeStr.replace(regex, "$1\r\n");
+    regex = /(\r\n\r\n)/g;
+    codeStr = codeStr.replace(regex, "\r\n");
+    regex = /\r\n,/g;
+    codeStr = codeStr.replace(regex, ",");
+    if (!newline) {
+      regex = /:\r\n\{/g;
+      codeStr = codeStr.replace(regex, ":{");
+      regex = /:\r\n\[/g;
+      codeStr = codeStr.replace(regex, ":[");
+    }
+    if (spaceAfterColon) {
+      regex = /:/g;
+      codeStr = codeStr.replace(regex, ": ");
+    }
+    let formatted = "", pad = 0;
+    const PADDING = "  ";
+    codeStr.split("\r\n").forEach(function(node) {
+      let i = 0, indent = 0, padding = "";
+      if (node.match(/\{$/) || node.match(/\[$/)) {
+        indent = 1;
+      } else if (node.match(/\}/) || node.match(/\]/)) {
+        if (pad !== 0) {
+          pad -= 1;
+        }
+      } else {
+        indent = 0;
+      }
+      for (i = 0; i < pad; i++) {
+        padding += PADDING;
+      }
+      formatted += padding + node + "\r\n";
+      pad += indent;
+    });
+    return formatted;
+  }
+  function setConsoleResult(result) {
+    const { code, message, data } = result;
+    if (code === 200) {
+      const { logs: jsLogs, data: jsOutput } = data;
+      consoleValueState.value.output = formatJson2Notes(jsOutput);
+      consoleValueState.value.logs = jsLogs;
+      consoleValueState.value.error = "";
+      editorConsoleState.value.tabActiveKey = "2";
+    } else {
+      consoleValueState.value.output = "";
+      consoleValueState.value.logs = [];
+      consoleValueState.value.error = message;
+      editorConsoleState.value.tabActiveKey = "3";
+    }
+  }
+  return {
+    getInstance,
+    showConsolePanel,
+    hideConsolePanel,
+    getInputValue,
+    setConsoleResult,
+    formatJson2Notes
+  };
+}
+
+export { useEditorConsole, useEditorConsoleInner };