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

package/es/modules/code-editor/monaco-editor.vue_vue_type_script_setup_true_name_code-editor_lang.mjs

@@ -0,0 +1,398 @@
+import { monacoLoader } from "../../utils/monaco-loader/monaco-loader.mjs";
+import "../../utils/index.mjs";
+import { Theme } from "./useMonacoEditor.mjs";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderSlot, resolveComponent, toDisplayString, unref, watch, withCtx } from "vue";
+import { ClearOutlined, CloudDownloadOutlined, DownCircleOutlined, FormatPainterOutlined, RobotOutlined, SearchOutlined, UpCircleOutlined } from "@ant-design/icons-vue";
+import { format } from "sql-formatter";
+//#region src/modules/code-editor/monaco-editor.vue?vue&type=script&setup=true&name=code-editor&lang.ts
+var _hoisted_1 = { class: "hex-monaco-editor m-e w-full h-full overflow-hidden" };
+var _hoisted_2 = { class: "m-e-main" };
+var monaco_editor_vue_vue_type_script_setup_true_name_code_editor_lang_default = /* @__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);
+		/** 明亮或暗夜模式，true 为白天模式，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",
+			scrollBeyondLastLine: false,
+			minimap: { enabled: true },
+			tabSize: 2,
+			autoClosingBrackets: "always",
+			autoClosingDelete: "always",
+			autoClosingOvertype: "always",
+			autoClosingQuotes: "always",
+			comments: {
+				ignoreEmptyLines: true,
+				insertSpace: true
+			},
+			columnSelection: false,
+			folding: true,
+			fixedOverflowWidgets: true,
+			hover: {
+				sticky: true,
+				above: false
+			}
+		};
+		async function init() {
+			monaco = await monacoLoader.loadMonaco();
+			dispose();
+			initEditor();
+			if (props.value) handleFormatCodeClick();
+		}
+		async function onInit() {
+			if (await _api.apaas.basicConfig.getAiRagEnabled() == 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 formattedSql = format(getEditorContent());
+				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();
+		}
+		/**
+		* 获取monacoEditor的实例
+		*/
+		function getMonacoEditor() {
+			return monacoEditor;
+		}
+		onMounted(() => {
+			init();
+		});
+		onUnmounted(() => {
+			dispose();
+		});
+		/**
+		* 设置编辑器内容，替换所有现有内容
+		* 支持编辑器的撤销/重做功能
+		* @param code 要设置的代码内容
+		*/
+		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())
+				};
+				return {
+					text,
+					textBefore,
+					textAfter: monacoEditor.getModel().getValueInRange(textAfterRange)
+				};
+			}
+			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)
+			]);
+		};
+	}
+});
+//#endregion
+export { monaco_editor_vue_vue_type_script_setup_true_name_code_editor_lang_default as default };