mirror of
https://gitee.com/dromara/mayfly-go
synced 2025-11-27 03:20:25 +08:00
refactor: 前端文件夹名称调整
This commit is contained in:
meilin.huang
324
frontend/src/components/monaco/MonacoEditor.vue
Normal file
324
frontend/src/components/monaco/MonacoEditor.vue
Normal file
@@ -0,0 +1,324 @@
|
||||
<template>
|
||||
<div class="monaco-editor" style="border: 1px solid var(--el-border-color-light, #ebeef5); height: 100%">
|
||||
<div class="monaco-editor-content" ref="monacoTextarea" :style="{ height: height }"></div>
|
||||
<el-select v-if="canChangeMode" class="code-mode-select" v-model="languageMode" @change="changeLanguage" filterable>
|
||||
<el-option v-for="mode in languageArr" :key="mode.value" :label="mode.label" :value="mode.value"> </el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, toRefs, reactive, onMounted, onBeforeUnmount } from 'vue';
|
||||
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
|
||||
// 相关语言
|
||||
import 'monaco-editor/esm/vs/basic-languages/shell/shell.contribution.js';
|
||||
import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution.js';
|
||||
import 'monaco-editor/esm/vs/basic-languages/dockerfile/dockerfile.contribution.js';
|
||||
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution.js';
|
||||
import 'monaco-editor/esm/vs/basic-languages/html/html.contribution.js';
|
||||
import 'monaco-editor/esm/vs/basic-languages/css/css.contribution.js';
|
||||
import 'monaco-editor/esm/vs/basic-languages/python/python.contribution.js';
|
||||
import 'monaco-editor/esm/vs/basic-languages/markdown/markdown.contribution.js';
|
||||
import 'monaco-editor/esm/vs/basic-languages/java/java.contribution.js';
|
||||
import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution.js';
|
||||
import 'monaco-editor/esm/vs/language/json/monaco.contribution';
|
||||
// 右键菜单
|
||||
import 'monaco-editor/esm/vs/editor/contrib/contextmenu/browser/contextmenu.js';
|
||||
import 'monaco-editor/esm/vs/editor/contrib/caretOperations/browser/caretOperations.js';
|
||||
import 'monaco-editor/esm/vs/editor/contrib/clipboard//browser/clipboard.js';
|
||||
import 'monaco-editor/esm/vs/editor/contrib/find/browser/findController.js';
|
||||
import 'monaco-editor/esm/vs/editor/contrib/format//browser/formatActions.js';
|
||||
// 提示
|
||||
import 'monaco-editor/esm/vs/editor/contrib/suggest/browser/suggestController.js';
|
||||
import 'monaco-editor/esm/vs/editor/contrib/suggest/browser/suggestInlineCompletions.js';
|
||||
|
||||
import { editor, languages } from 'monaco-editor';
|
||||
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker.js?worker';
|
||||
import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
|
||||
// 主题仓库 https://github.com/brijeshb42/monaco-themes
|
||||
// 主题例子 https://editor.bitwiser.in/
|
||||
// import Monokai from 'monaco-themes/themes/Monokai.json'
|
||||
// import Active4D from 'monaco-themes/themes/Active4D.json'
|
||||
// import ahe from 'monaco-themes/themes/All Hallows Eve.json'
|
||||
// import bop from 'monaco-themes/themes/Birds of Paradise.json'
|
||||
// import krTheme from 'monaco-themes/themes/krTheme.json'
|
||||
// import Dracula from 'monaco-themes/themes/Dracula.json'
|
||||
import SolarizedLight from 'monaco-themes/themes/Solarized-light.json';
|
||||
import { language as shellLan } from 'monaco-editor/esm/vs/basic-languages/shell/shell.js';
|
||||
import { ElOption, ElSelect } from 'element-plus';
|
||||
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '@/store/themeConfig';
|
||||
|
||||
const { themeConfig } = storeToRefs(useThemeConfig());
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: String,
|
||||
},
|
||||
language: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '500px',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: 'auto',
|
||||
},
|
||||
canChangeMode: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
//定义事件
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
||||
const languageArr = [
|
||||
{
|
||||
value: 'shell',
|
||||
label: 'Shell',
|
||||
},
|
||||
{
|
||||
value: 'json',
|
||||
label: 'JSON',
|
||||
},
|
||||
{
|
||||
value: 'yaml',
|
||||
label: 'Yaml',
|
||||
},
|
||||
{
|
||||
value: 'dockerfile',
|
||||
label: 'Dockerfile',
|
||||
},
|
||||
{
|
||||
value: 'html',
|
||||
label: 'XML/HTML',
|
||||
},
|
||||
{
|
||||
value: 'python',
|
||||
label: 'Python',
|
||||
},
|
||||
{
|
||||
value: 'sql',
|
||||
label: 'SQL',
|
||||
},
|
||||
{
|
||||
value: 'css',
|
||||
label: 'CSS',
|
||||
},
|
||||
{
|
||||
value: 'javascript',
|
||||
label: 'Javascript',
|
||||
},
|
||||
{
|
||||
value: 'java',
|
||||
label: 'Java',
|
||||
},
|
||||
{
|
||||
value: 'markdown',
|
||||
label: 'Markdown',
|
||||
},
|
||||
{
|
||||
value: 'text',
|
||||
label: 'text',
|
||||
},
|
||||
];
|
||||
|
||||
const defaultOptions = {
|
||||
language: 'shell',
|
||||
theme: 'SolarizedLight',
|
||||
automaticLayout: true, //自适应宽高布局
|
||||
foldingStrategy: 'indentation', //代码可分小段折叠
|
||||
roundedSelection: false, // 禁用选择文本背景的圆角
|
||||
matchBrackets: 'near',
|
||||
linkedEditing: true,
|
||||
cursorBlinking: 'smooth', // 光标闪烁样式
|
||||
mouseWheelZoom: true, // 在按住Ctrl键的同时使用鼠标滚轮时，在编辑器中缩放字体
|
||||
overviewRulerBorder: false, // 不要滚动条的边框
|
||||
tabSize: 4, // tab 缩进长度
|
||||
// fontFamily: 'JetBrainsMono', // 字体 暂时不要设置，否则光标容易错位
|
||||
fontWeight: 'bold',
|
||||
// fontSize: 12,
|
||||
// letterSpacing: 1, 字符间距
|
||||
// quickSuggestions:false, // 禁用代码提示
|
||||
minimap: {
|
||||
enabled: false, // 不要小地图
|
||||
},
|
||||
};
|
||||
|
||||
const monacoTextarea: any = ref();
|
||||
|
||||
let monacoEditorIns: editor.IStandaloneCodeEditor = null as any;
|
||||
let completionItemProvider: any = null;
|
||||
|
||||
self.MonacoEnvironment = {
|
||||
getWorker(_: any, label: string) {
|
||||
if (label === 'json') {
|
||||
return new JsonWorker();
|
||||
}
|
||||
return new EditorWorker();
|
||||
},
|
||||
};
|
||||
|
||||
const state = reactive({
|
||||
languageMode: 'shell',
|
||||
});
|
||||
|
||||
const { languageMode } = toRefs(state);
|
||||
|
||||
onMounted(() => {
|
||||
state.languageMode = props.language;
|
||||
initMonacoEditorIns();
|
||||
setEditorValue(props.modelValue);
|
||||
registerCompletionItemProvider();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (monacoEditorIns) {
|
||||
monacoEditorIns.dispose();
|
||||
}
|
||||
if (completionItemProvider) {
|
||||
console.log('unmount=> dispose completion item provider');
|
||||
completionItemProvider.dispose();
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newValue: any) => {
|
||||
if (!monacoEditorIns.hasTextFocus()) {
|
||||
state.languageMode = props.language;
|
||||
monacoEditorIns?.setValue(newValue);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.language,
|
||||
(newValue: any) => {
|
||||
changeLanguage(newValue);
|
||||
}
|
||||
);
|
||||
|
||||
// 监听 themeConfig editorTheme配置文件的变化
|
||||
watch(
|
||||
() => themeConfig.value.editorTheme,
|
||||
(val) => {
|
||||
console.log('monaco editor theme change: ', val);
|
||||
monaco?.editor?.setTheme(val);
|
||||
}
|
||||
);
|
||||
|
||||
const initMonacoEditorIns = () => {
|
||||
console.log('初始化monaco编辑器');
|
||||
// options参数参考 https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneEditorConstructionOptions.html#language
|
||||
// 初始化一些主题
|
||||
monaco.editor.defineTheme('SolarizedLight', SolarizedLight);
|
||||
defaultOptions.language = state.languageMode;
|
||||
defaultOptions.theme = themeConfig.value.editorTheme;
|
||||
monacoEditorIns = monaco.editor.create(monacoTextarea.value, Object.assign(defaultOptions, props.options as any));
|
||||
|
||||
// 监听内容改变,双向绑定
|
||||
monacoEditorIns.onDidChangeModelContent(() => {
|
||||
emit('update:modelValue', monacoEditorIns.getModel()?.getValue());
|
||||
});
|
||||
};
|
||||
|
||||
const changeLanguage = (value: any) => {
|
||||
console.log('change lan');
|
||||
// 获取当前的文档模型
|
||||
let oldModel = monacoEditorIns.getModel();
|
||||
if (!oldModel) {
|
||||
return;
|
||||
}
|
||||
// 创建一个新的文档模型
|
||||
let newModel = monaco.editor.createModel(oldModel.getValue(), value);
|
||||
// 设置成新的
|
||||
monacoEditorIns.setModel(newModel);
|
||||
// 销毁旧的模型
|
||||
if (oldModel) {
|
||||
oldModel.dispose();
|
||||
}
|
||||
|
||||
registerCompletionItemProvider();
|
||||
};
|
||||
|
||||
const setEditorValue = (value: any) => {
|
||||
if (value) {
|
||||
monacoEditorIns.getModel()?.setValue(value);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 注册联想补全提示
|
||||
*/
|
||||
const registerCompletionItemProvider = () => {
|
||||
if (completionItemProvider) {
|
||||
console.log('exist competion item provider, dispose now');
|
||||
completionItemProvider.dispose();
|
||||
}
|
||||
if (state.languageMode == 'shell') {
|
||||
registeShell();
|
||||
}
|
||||
};
|
||||
|
||||
const registeShell = () => {
|
||||
completionItemProvider = monaco.languages.registerCompletionItemProvider('shell', {
|
||||
provideCompletionItems: async () => {
|
||||
let suggestions: languages.CompletionItem[] = [];
|
||||
shellLan.keywords.forEach((item: any) => {
|
||||
suggestions.push({
|
||||
label: item,
|
||||
kind: monaco.languages.CompletionItemKind.Keyword,
|
||||
insertText: item,
|
||||
} as any);
|
||||
});
|
||||
shellLan.builtins.forEach((item: any) => {
|
||||
suggestions.push({
|
||||
label: item,
|
||||
kind: monaco.languages.CompletionItemKind.Property,
|
||||
insertText: item,
|
||||
} as any);
|
||||
});
|
||||
return {
|
||||
suggestions: suggestions,
|
||||
};
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const format = () => {
|
||||
// 触发自动格式化;
|
||||
monacoEditorIns.trigger('', 'editor.action.formatDocument', '');
|
||||
};
|
||||
|
||||
const focus = () => {
|
||||
monacoEditorIns.focus();
|
||||
};
|
||||
|
||||
const getEditor = () => {
|
||||
return monacoEditorIns;
|
||||
};
|
||||
|
||||
defineExpose({ getEditor, format, focus });
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.monaco-editor {
|
||||
.code-mode-select {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
max-width: 130px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
37
frontend/src/components/monaco/MonacoEditorDialog.ts
Normal file
37
frontend/src/components/monaco/MonacoEditorDialog.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import { VNode, h, render } from 'vue';
|
||||
import MonacoEditorDialogComp from './MonacoEditorDialogComp.vue';
|
||||
|
||||
export type MonacoEditorDialogProps = {
|
||||
content: string;
|
||||
title: string;
|
||||
language: string;
|
||||
height?: string;
|
||||
width?: string;
|
||||
confirmFn?: Function; // 点击确认的回调函数，入参editor value
|
||||
cancelFn?: Function; // 点击取消 或 关闭弹窗的回调函数
|
||||
};
|
||||
|
||||
const boxId = 'monaco-editor-dialog-id';
|
||||
|
||||
let boxInstance: VNode;
|
||||
|
||||
const MonacoEditorDialog = (props: MonacoEditorDialogProps): void => {
|
||||
if (!boxInstance) {
|
||||
const container = document.createElement('div');
|
||||
container.id = boxId;
|
||||
// 创建 虚拟dom
|
||||
boxInstance = h(MonacoEditorDialogComp);
|
||||
// 将虚拟dom渲染到 container dom 上
|
||||
render(boxInstance, container);
|
||||
// 最后将 container 追加到 body 上
|
||||
document.body.appendChild(container);
|
||||
}
|
||||
|
||||
const boxVue = boxInstance.component;
|
||||
if (boxVue) {
|
||||
// 调用open方法显示弹框，注意不能使用boxVue.ctx来调用组件函数（build打包后ctx会获取不到）
|
||||
boxVue.exposed?.open(props);
|
||||
}
|
||||
};
|
||||
|
||||
export default MonacoEditorDialog;
|
||||
136
frontend/src/components/monaco/MonacoEditorDialogComp.vue
Normal file
136
frontend/src/components/monaco/MonacoEditorDialogComp.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog :title="state.title" v-model="state.dialogVisible" :width="state.width" @close="cancel">
|
||||
<monaco-editor ref="editorRef" :height="state.height" class="editor" :language="state.language" v-model="contentValue" can-change-mode />
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button @click="confirm" type="primary">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { toRefs, ref, reactive } from 'vue';
|
||||
import { ElDialog, ElButton, ElMessage } from 'element-plus';
|
||||
// import base style
|
||||
import MonacoEditor from '@/components/monaco/MonacoEditor.vue';
|
||||
import { MonacoEditorDialogProps } from './MonacoEditorDialog';
|
||||
|
||||
const editorRef: any = ref(null);
|
||||
|
||||
const state = reactive({
|
||||
dialogVisible: false,
|
||||
height: '450px',
|
||||
width: '800px',
|
||||
contentValue: '',
|
||||
title: '',
|
||||
language: '',
|
||||
});
|
||||
|
||||
let confirmFn: any;
|
||||
let cancelFn: any;
|
||||
|
||||
const { contentValue } = toRefs(state);
|
||||
|
||||
function compressHTML(html: string) {
|
||||
return (
|
||||
html
|
||||
.replace(/[\r\n\t]+/g, ' ') // 移除换行符和制表符
|
||||
// .replace(/<!--[\s\S]*?-->/g, '') // 移除注释
|
||||
.replace(/\s{2,}/g, ' ') // 合并多个空格为一个空格
|
||||
.replace(/>\s+</g, '><')
|
||||
); // 移除标签之间的空格
|
||||
}
|
||||
|
||||
/**
|
||||
* 确认按钮
|
||||
*/
|
||||
const confirm = async () => {
|
||||
if (confirmFn) {
|
||||
if (state.language === 'json') {
|
||||
let val;
|
||||
try {
|
||||
val = JSON.parse(contentValue.value);
|
||||
if (typeof val !== 'object') {
|
||||
ElMessage.error('请输入正确的json');
|
||||
return;
|
||||
}
|
||||
} catch (e) {
|
||||
ElMessage.error('请输入正确的json');
|
||||
return;
|
||||
}
|
||||
|
||||
// 压缩json字符串
|
||||
confirmFn(JSON.stringify(val));
|
||||
} else if (state.language === 'html') {
|
||||
// 压缩html字符串
|
||||
confirmFn(compressHTML(contentValue.value));
|
||||
} else {
|
||||
confirmFn(contentValue.value);
|
||||
}
|
||||
}
|
||||
state.dialogVisible = false;
|
||||
setTimeout(() => {
|
||||
state.contentValue = '';
|
||||
state.title = '';
|
||||
}, 200);
|
||||
};
|
||||
|
||||
const cancel = () => {
|
||||
state.dialogVisible = false;
|
||||
// 没有执行成功，并且取消回调函数存在，则执行
|
||||
cancelFn && cancelFn();
|
||||
setTimeout(() => {
|
||||
state.contentValue = '';
|
||||
state.title = '';
|
||||
}, 200);
|
||||
};
|
||||
|
||||
const formatXML = function (xml: string, tab?: string) {
|
||||
let formatted = '',
|
||||
indent = '';
|
||||
tab = tab || ' ';
|
||||
xml.split(/>\s*</).forEach(function (node) {
|
||||
if (node.match(/^\/\w/)) indent = indent.substring(tab!.length);
|
||||
formatted += indent + '<' + node + '>\r\n';
|
||||
if (node.match(/^<?\w[^>]*[^\/]$/)) indent += tab;
|
||||
});
|
||||
return formatted.substring(1, formatted.length - 3);
|
||||
};
|
||||
|
||||
const open = (optionProps: MonacoEditorDialogProps) => {
|
||||
confirmFn = optionProps.confirmFn;
|
||||
cancelFn = optionProps.cancelFn;
|
||||
|
||||
const language = optionProps.language;
|
||||
state.language = language;
|
||||
state.title = optionProps.title;
|
||||
if (optionProps.height) {
|
||||
state.height = optionProps.height;
|
||||
}
|
||||
|
||||
state.contentValue = optionProps.content;
|
||||
// 格式化输出html;
|
||||
if (language === 'html' || language == 'xml') {
|
||||
state.contentValue = formatXML(optionProps.content);
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
editorRef.value?.focus();
|
||||
editorRef.value?.format();
|
||||
}, 300);
|
||||
|
||||
state.dialogVisible = true;
|
||||
};
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.editor {
|
||||
font-size: 9pt;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
25
frontend/src/components/monaco/completionItemProvider.ts
Normal file
25
frontend/src/components/monaco/completionItemProvider.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
|
||||
|
||||
/**
|
||||
* key: language, value: CompletionItemProvider
|
||||
*/
|
||||
const completionItemProviders: Map<string, any> = new Map();
|
||||
|
||||
export function registerCompletionItemProvider(language: string, completionItemProvider: any, replace: boolean = true) {
|
||||
const exist = completionItemProviders.get(language);
|
||||
if (exist) {
|
||||
if (!replace) {
|
||||
return;
|
||||
}
|
||||
exist.dispose();
|
||||
}
|
||||
completionItemProviders.set(language, monaco.languages.registerCompletionItemProvider(language, completionItemProvider));
|
||||
}
|
||||
|
||||
export function dispposeCompletionItemProvider(language: string) {
|
||||
const exist = completionItemProviders.get(language);
|
||||
if (exist) {
|
||||
exist.dispose();
|
||||
completionItemProviders.delete(language);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user