Skip to content

perf: optimization codemirror component #2451

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

Merged
wangdan-fit2cloud merged 1 commit into from
Feb 28, 2025
Merged

perf: optimization codemirror component #2451

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
99 changes: 88 additions & 11 deletions ui/src/components/codemirror-editor/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,50 @@
<template>
<Codemirror
v-bind="$attrs"
ref="cmRef"
:extensions="extensions"
:style="codemirrorStyle"
:tab-size="4"
:autofocus="true"
/>
<div class="codemirror-editor w-full">
<Codemirror
v-model="data"
ref="cmRef"
:extensions="extensions"
:style="codemirrorStyle"
:tab-size="4"
:autofocus="true"
v-bind="$attrs"
/>

<div class="codemirror-editor__footer">
<el-button text type="info" @click="openCodemirrorDialog" class="magnify">
<AppIcon iconName="app-magnify" style="font-size: 16px"></AppIcon>
</el-button>
</div>
<!-- Codemirror 弹出层 -->
<el-dialog
v-model="dialogVisible"
:title="$t('views.functionLib.functionForm.form.param.code')"
append-to-body
fullscreen
>
<Codemirror
v-model="cloneContent"
:extensions="extensions"
:style="codemirrorStyle"
:tab-size="4"
:autofocus="true"
style="
height: calc(100vh - 160px) !important;
border: 1px solid #bbbfc4;
border-radius: 4px;
"
/>
<template #footer>
<div class="dialog-footer mt-24">
<el-button type="primary" @click="submitDialog"> {{ $t('common.confirm') }}</el-button>
</div>
</template>
</el-dialog>
</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ref, computed, watch } from 'vue'
import { Codemirror } from 'vue-codemirror'
import { python } from '@codemirror/lang-python'
import { oneDark } from '@codemirror/theme-one-dark'
Expand All @@ -19,6 +53,19 @@ import FunctionApi from '@/api/function-lib'

defineOptions({ name: 'CodemirrorEditor' })

const props = defineProps<{
modelValue: any
}>()
const emit = defineEmits(['update:modelValue', 'submitDialog'])
const data = computed({
set: (value) => {
emit('update:modelValue', value)
},
get: () => {
return props.modelValue
}
})

function getRangeFromLineAndColumn(state: any, line: number, column: number, end_column?: number) {
const l = state.doc.line(line)
const form = l.from + column
Expand Down Expand Up @@ -52,9 +99,39 @@ const regexpLinter = linter(async (view) => {
})
const extensions = [python(), regexpLinter, oneDark]
const codemirrorStyle = {
height: '210px!important'
height: '210px!important',
width: '100%'
}
const cmRef = ref<InstanceType<typeof Codemirror>>()
// 弹出框相关代码
const dialogVisible = ref<boolean>(false)

const cloneContent = ref<string>('')

watch(dialogVisible, (bool) => {
if (!bool) {
emit('submitDialog', cloneContent.value)
}
})

const openCodemirrorDialog = () => {
cloneContent.value = props.modelValue
dialogVisible.value = true
}

function submitDialog() {
emit('submitDialog', cloneContent.value)
dialogVisible.value = false
}
</script>

<style lang="scss"></style>
<style lang="scss" scoped>
.codemirror-editor {
position: relative;
&__footer {
position: absolute;
bottom: 10px;
right: 10px;
}
}
</style>
Copy link
Copy Markdown
Contributor

@shaohuzhang1 shaohuzhang1 Feb 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code you've provided appears clean and organized for use with Vue.js along with vue-codemirror. It introduces several improvements over the original:

  1. State Management Using Computed and Watch: The data property is now managed using both Computed properties (computed) and Watchers to efficiently keep the codemirror value synced between props and internal states.

  2. Fullscreen Dialog Integration: A new El-dialog component (El-dialog's "full-screen" mode) has been added to display the same Codemirror instance in an overlay when triggered through a button click.

  3. Data Cloning and Update Handling: In the fullscreen view, the current value of the CodeMirror editor is cloned into another variable (cloneContent). When editing stops, this content is then passed back via events to update the parent component.

  4. Enhanced Styling**: Added CSS to ensure that only the main container takes up the full width while maintaining readability within its boundaries.

While these changes make the implementation more flexible and interactive, remember it might be beneficial to thoroughly test all user flows involving the pop-up dialog to verify smooth working and proper error handling in case anything goes wrong during runtime.

54 changes: 5 additions & 49 deletions ui/src/views/function-lib/component/FunctionFormDrawer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,13 +133,8 @@
</el-text>
</h4>

<div class="function-CodemirrorEditor mb-8" v-if="showEditor">
<CodemirrorEditor v-model="form.code" />
<div class="function-CodemirrorEditor__footer">
<el-button text type="info" @click="openCodemirrorDialog" class="magnify">
<AppIcon iconName="app-magnify" style="font-size: 16px"></AppIcon>
</el-button>
</div>
<div class="mb-8" v-if="showEditor">
<CodemirrorEditor v-model="form.code" @submitDialog="submitCodemirrorEditor" />
</div>
<h4 class="title-decoration-1 mb-16 mt-16">
{{ $t('common.param.outputParam') }}
Expand All @@ -162,27 +157,6 @@
</div>
</template>

<!-- Codemirror 弹出层 -->
<el-dialog
v-model="dialogVisible"
:title="$t('views.functionLib.functionForm.form.param.code')"
append-to-body
fullscreen
>
<CodemirrorEditor
v-model="cloneContent"
style="
height: calc(100vh - 160px) !important;
border: 1px solid #bbbfc4;
border-radius: 4px;
"
/>
<template #footer>
<div class="dialog-footer mt-24">
<el-button type="primary" @click="submitDialog"> {{ $t('common.confirm') }}</el-button>
</div>
</template>
</el-dialog>
<FunctionDebugDrawer ref="FunctionDebugDrawerRef" />
<FieldFormDialog ref="FieldFormDialogRef" @refresh="refreshFieldList" />
</el-drawer>
Expand Down Expand Up @@ -223,9 +197,6 @@ const form = ref<functionLibData>({
permission_type: 'PRIVATE'
})

const dialogVisible = ref(false)
const cloneContent = ref<any>('')

watch(visible, (bool) => {
if (!bool) {
isEdit.value = false
Expand Down Expand Up @@ -259,14 +230,8 @@ const rules = reactive({
]
})

function openCodemirrorDialog() {
cloneContent.value = form.value.code
dialogVisible.value = true
}

function submitDialog() {
form.value.code = cloneContent.value
dialogVisible.value = false
function submitCodemirrorEditor(val: string) {
form.value.code = val
}

function close() {
Expand Down Expand Up @@ -353,13 +318,4 @@ defineExpose({
open
})
</script>
<style lang="scss" scoped>
.function-CodemirrorEditor__footer {
position: absolute;
bottom: 10px;
right: 10px;
}
.function-CodemirrorEditor {
position: relative;
}
</style>
<style lang="scss" scoped></style>
2 changes: 1 addition & 1 deletion ui/src/workflow/icons/variable-assign-node-icon.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<AppAvatar shape="square">
<AppAvatar shape="square" class="avatar-blue">
<img src="@/assets/icon_assigner.svg" style="width: 65%" alt="" />
</AppAvatar>
</template>
Expand Down
56 changes: 7 additions & 49 deletions ui/src/workflow/nodes/function-node/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@
:prop="'input_field_list.' + index + '.value'"
:rules="{
required: item.is_required,
message: item.source === 'reference'
message:
item.source === 'reference'
? $t('views.functionLib.functionForm.form.param.selectPlaceholder')
: $t('views.functionLib.functionForm.form.param.inputPlaceholder'),
trigger: 'blur'
Expand Down Expand Up @@ -76,17 +77,13 @@
<h5 class="lighter mb-8">
{{ $t('views.functionLib.functionForm.form.param.code') }}
</h5>
<div class="function-CodemirrorEditor mb-8" v-if="showEditor">
<div class="mb-8" v-if="showEditor">
<CodemirrorEditor
v-model="chat_data.code"
@wheel="wheel"
style="height: 130px !important"
@submitDialog="submitCodemirrorEditor"
/>
<div class="function-CodemirrorEditor__footer">
<el-button text type="info" @click="openCodemirrorDialog" class="magnify">
<AppIcon iconName="app-magnify" style="font-size: 16px"></AppIcon>
</el-button>
</div>
</div>

<el-form-item
Expand All @@ -113,27 +110,6 @@
</el-form-item>
</el-form>
<FieldFormDialog ref="FieldFormDialogRef" @refresh="refreshFieldList" />
<!-- Codemirror 弹出层 -->
<el-dialog
v-model="dialogVisible"
:title="$t('views.functionLib.functionForm.form.param.code')"
append-to-body
fullscreen
>
<CodemirrorEditor
v-model="cloneContent"
style="
height: calc(100vh - 160px) !important;
border: 1px solid #bbbfc4;
border-radius: 4px;
"
/>
<template #footer>
<div class="dialog-footer mt-24">
<el-button type="primary" @click="submitDialog"> {{ $t('common.confirm') }}</el-button>
</div>
</template>
</el-dialog>
</NodeContainer>
</template>
<script setup lang="ts">
Expand Down Expand Up @@ -190,17 +166,8 @@ const validate = () => {
})
}

const dialogVisible = ref(false)
const cloneContent = ref('')

function openCodemirrorDialog() {
cloneContent.value = chat_data.value.code
dialogVisible.value = true
}

function submitDialog() {
set(props.nodeModel.properties.node_data, 'code', cloneContent.value)
dialogVisible.value = false
function submitCodemirrorEditor(val: string) {
set(props.nodeModel.properties.node_data, 'code', val)
}

function openAddDialog(data?: any, index?: any) {
Expand Down Expand Up @@ -244,13 +211,4 @@ onMounted(() => {
}, 100)
})
</script>
<style lang="scss">
.function-CodemirrorEditor__footer {
position: absolute;
bottom: 10px;
right: 10px;
}
.function-CodemirrorEditor {
position: relative;
}
</style>
<style lang="scss"></style>
Copy link
Copy Markdown
Contributor

@shaohuzhang1 shaohuzhang1 Feb 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code looks generally correct but has a few improvements that can be made:

  • Remove the append-to-body attribute from the <el-dialog> component. It's not necessary in this context.
  • Use CSS grid instead of flexbox to align the form items and buttons more cleanly.
  • Add some padding to the .mb-8 class to make it look better.
  • Consider adding validation error messages directly inside the input fields, as opposed to using separate message placeholders.

Here is updated version of the code with these improvements:

<style lang="scss">

.mb-8 {
  margin-bottom: 1rem;
}

.field-item {
  display: grid;
  gap: 0.5rem;

  & > .form-label-group {
    width: 35%;
  }

  & > .form-input-group {
    width: 65%;
  }
}

</style>
... (rest of the template remains the same)
</template>
<script setup lang="ts">
...
</script>

Loading