Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 新增编辑器错误添加下划波浪线的功能 #872

Merged
merged 1 commit into from
Sep 4, 2024
Merged

feat: 新增编辑器错误添加下划波浪线的功能 #872

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions src/dashboard-front/src/components/ag-editor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,8 @@ let editor = null; // 编辑器实例
const monacoEditor = ref(null);
// 编辑器装饰器（高亮效果等）
let decorations = [];
// 编辑器下划波浪线
let markers = [];
// 可切换字号范围
const fontSizeOptions = [14, 20, 24];
// 可切换行高范围
Expand Down Expand Up @@ -231,6 +233,28 @@ const clearDecorations = () => {
decorations.clear();
};

const genMarkers = (errors) => {
errors.forEach((error) => {
markers.push({
severity: monaco.MarkerSeverity.Error,
message: error.message,
startLineNumber: error.position.lineNumber,
startColumn: error.position.column,
endLineNumber: error.position.lineNumber,
endColumn: editor.getModel()?.getLineLastNonWhitespaceColumn(error.position.lineNumber),
});
});
};

const setMarkers = () => {
monaco.editor.setModelMarkers(editor.getModel(), 'owner', markers);
};

const clearMarkers = () => {
markers = [];
setMarkers();
};

const getModel = () => editor.getModel();

const showFindPanel = () => {
Expand Down Expand Up @@ -290,6 +314,9 @@ defineExpose({
setDecorations,
clearDecorations,
genLineDecorations,
setMarkers,
clearMarkers,
genMarkers,
getModel,
getValue,
showFindPanel,
Expand Down
18 changes: 15 additions & 3 deletions src/dashboard-front/src/views/resource/setting/import.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -823,8 +823,9 @@ const handleCheckData = async ({ changeView }: { changeView: boolean }) => {
}
try {
isDataLoading.value = true;
// 清空编辑器高亮样式
resourceEditorRef?.value?.clearDecorations();
// 清空编辑器高亮样式和所有下划波浪线
resourceEditorRef.value?.clearDecorations();
resourceEditorRef.value?.clearMarkers();
errorReasons.value = [];
// 重置可视错误消息类型
activeCodeMsgType.value = 'All';
Expand Down Expand Up @@ -934,8 +935,9 @@ const handleCheckData = async ({ changeView }: { changeView: boolean }) => {
}
// console.log('errorReasons:');
// console.log(errorReasons.value);
// 更新编辑器高亮样式
// 更新编辑器高亮样式和下划波浪线
updateEditorDecorations();
updateEditorMarkers();
// 展开错误消息栏
if (isEditorMsgCollapsed) {
await nextTick(() => {
Expand Down Expand Up @@ -1049,6 +1051,16 @@ const updateEditorDecorations = () => {
resourceEditorRef.value.setDecorations();
};

// 触发编辑器添加下划波浪线
const updateEditorMarkers = () => {
resourceEditorRef.value.clearMarkers();
resourceEditorRef.value.genMarkers(errorReasons.value.map(r => ({
position: r.position,
message: r.message,
})));
resourceEditorRef.value.setMarkers();
};

// 处理代码错误消息点击事件，应跳转到编辑器对应行
const handleErrorMsgClick = (reason: ErrorReasonType, index: number) => {
if (reason.position) {
Expand Down
Loading