Skip to content

Commit 5280d81

Browse files
wangdan-fit2cloudwangdan-fit2cloud
committed
perf: optimization codemirror component
1 parent aa4a834 commit 5280d81

File tree

5 files changed

+203
-220
lines changed

5 files changed

+203
-220
lines changed

‎ui/src/components/codemirror-editor/index.vue‎

Lines changed: 88 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,50 @@
11
<template>
2-
<Codemirror
3-
v-bind="$attrs"
4-
ref="cmRef"
5-
:extensions="extensions"
6-
:style="codemirrorStyle"
7-
:tab-size="4"
8-
:autofocus="true"
9-
/>
2+
<div class="codemirror-editor w-full">
3+
<Codemirror
4+
v-model="data"
5+
ref="cmRef"
6+
:extensions="extensions"
7+
:style="codemirrorStyle"
8+
:tab-size="4"
9+
:autofocus="true"
10+
v-bind="$attrs"
11+
/>
12+
13+
<div class="codemirror-editor__footer">
14+
<el-button text type="info" @click="openCodemirrorDialog" class="magnify">
15+
<AppIcon iconName="app-magnify" style="font-size: 16px"></AppIcon>
16+
</el-button>
17+
</div>
18+
<!-- Codemirror 弹出层 -->
19+
<el-dialog
20+
v-model="dialogVisible"
21+
:title="$t('views.functionLib.functionForm.form.param.code')"
22+
append-to-body
23+
fullscreen
24+
>
25+
<Codemirror
26+
v-model="cloneContent"
27+
:extensions="extensions"
28+
:style="codemirrorStyle"
29+
:tab-size="4"
30+
:autofocus="true"
31+
style="
32+
height: calc(100vh - 160px) !important;
33+
border: 1px solid #bbbfc4;
34+
border-radius: 4px;
35+
"
36+
/>
37+
<template #footer>
38+
<div class="dialog-footer mt-24">
39+
<el-button type="primary" @click="submitDialog"> {{ $t('common.confirm') }}</el-button>
40+
</div>
41+
</template>
42+
</el-dialog>
43+
</div>
1044
</template>
1145

1246
<script setup lang="ts">
13-
import { ref } from 'vue'
47+
import { ref, computed, watch } from 'vue'
1448
import { Codemirror } from 'vue-codemirror'
1549
import { python } from '@codemirror/lang-python'
1650
import { oneDark } from '@codemirror/theme-one-dark'
@@ -19,6 +53,19 @@ import FunctionApi from '@/api/function-lib'
1953
2054
defineOptions({ name: 'CodemirrorEditor' })
2155
56+
const props = defineProps<{
57+
modelValue: any
58+
}>()
59+
const emit = defineEmits(['update:modelValue', 'submitDialog'])
60+
const data = computed({
61+
set: (value) => {
62+
emit('update:modelValue', value)
63+
},
64+
get: () => {
65+
return props.modelValue
66+
}
67+
})
68+
2269
function getRangeFromLineAndColumn(state: any, line: number, column: number, end_column?: number) {
2370
const l = state.doc.line(line)
2471
const form = l.from + column
@@ -52,9 +99,39 @@ const regexpLinter = linter(async (view) => {
5299
})
53100
const extensions = [python(), regexpLinter, oneDark]
54101
const codemirrorStyle = {
55-
height: '210px!important'
102+
height: '210px!important',
103+
width: '100%'
56104
}
57105
const cmRef = ref<InstanceType<typeof Codemirror>>()
106+
// 弹出框相关代码
107+
const dialogVisible = ref<boolean>(false)
108+
109+
const cloneContent = ref<string>('')
110+
111+
watch(dialogVisible, (bool) => {
112+
if (!bool) {
113+
emit('submitDialog', cloneContent.value)
114+
}
115+
})
116+
117+
const openCodemirrorDialog = () => {
118+
cloneContent.value = props.modelValue
119+
dialogVisible.value = true
120+
}
121+
122+
function submitDialog() {
123+
emit('submitDialog', cloneContent.value)
124+
dialogVisible.value = false
125+
}
58126
</script>
59127

60-
<style lang="scss"></style>
128+
<style lang="scss" scoped>
129+
.codemirror-editor {
130+
position: relative;
131+
&__footer {
132+
position: absolute;
133+
bottom: 10px;
134+
right: 10px;
135+
}
136+
}
137+
</style>

‎ui/src/views/function-lib/component/FunctionFormDrawer.vue‎

Lines changed: 5 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -133,13 +133,8 @@
133133
</el-text>
134134
</h4>
135135

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

165-
<!-- Codemirror 弹出层 -->
166-
<el-dialog
167-
v-model="dialogVisible"
168-
:title="$t('views.functionLib.functionForm.form.param.code')"
169-
append-to-body
170-
fullscreen
171-
>
172-
<CodemirrorEditor
173-
v-model="cloneContent"
174-
style="
175-
height: calc(100vh - 160px) !important;
176-
border: 1px solid #bbbfc4;
177-
border-radius: 4px;
178-
"
179-
/>
180-
<template #footer>
181-
<div class="dialog-footer mt-24">
182-
<el-button type="primary" @click="submitDialog"> {{ $t('common.confirm') }}</el-button>
183-
</div>
184-
</template>
185-
</el-dialog>
186160
<FunctionDebugDrawer ref="FunctionDebugDrawerRef" />
187161
<FieldFormDialog ref="FieldFormDialogRef" @refresh="refreshFieldList" />
188162
</el-drawer>
@@ -223,9 +197,6 @@ const form = ref<functionLibData>({
223197
permission_type: 'PRIVATE'
224198
})
225199
226-
const dialogVisible = ref(false)
227-
const cloneContent = ref<any>('')
228-
229200
watch(visible, (bool) => {
230201
if (!bool) {
231202
isEdit.value = false
@@ -259,14 +230,8 @@ const rules = reactive({
259230
]
260231
})
261232
262-
function openCodemirrorDialog() {
263-
cloneContent.value = form.value.code
264-
dialogVisible.value = true
265-
}
266-
267-
function submitDialog() {
268-
form.value.code = cloneContent.value
269-
dialogVisible.value = false
233+
function submitCodemirrorEditor(val: string) {
234+
form.value.code = val
270235
}
271236
272237
function close() {
@@ -353,13 +318,4 @@ defineExpose({
353318
open
354319
})
355320
</script>
356-
<style lang="scss" scoped>
357-
.function-CodemirrorEditor__footer {
358-
position: absolute;
359-
bottom: 10px;
360-
right: 10px;
361-
}
362-
.function-CodemirrorEditor {
363-
position: relative;
364-
}
365-
</style>
321+
<style lang="scss" scoped></style>

‎ui/src/workflow/icons/variable-assign-node-icon.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<AppAvatar shape="square">
2+
<AppAvatar shape="square" class="avatar-blue">
33
<img src="@/assets/icon_assigner.svg" style="width: 65%" alt="" />
44
</AppAvatar>
55
</template>

‎ui/src/workflow/nodes/function-node/index.vue‎

Lines changed: 7 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@
2323
:prop="'input_field_list.' + index + '.value'"
2424
:rules="{
2525
required: item.is_required,
26-
message: item.source === 'reference'
26+
message:
27+
item.source === 'reference'
2728
? $t('views.functionLib.functionForm.form.param.selectPlaceholder')
2829
: $t('views.functionLib.functionForm.form.param.inputPlaceholder'),
2930
trigger: 'blur'
@@ -76,17 +77,13 @@
7677
<h5 class="lighter mb-8">
7778
{{ $t('views.functionLib.functionForm.form.param.code') }}
7879
</h5>
79-
<div class="function-CodemirrorEditor mb-8" v-if="showEditor">
80+
<div class="mb-8" v-if="showEditor">
8081
<CodemirrorEditor
8182
v-model="chat_data.code"
8283
@wheel="wheel"
8384
style="height: 130px !important"
85+
@submitDialog="submitCodemirrorEditor"
8486
/>
85-
<div class="function-CodemirrorEditor__footer">
86-
<el-button text type="info" @click="openCodemirrorDialog" class="magnify">
87-
<AppIcon iconName="app-magnify" style="font-size: 16px"></AppIcon>
88-
</el-button>
89-
</div>
9087
</div>
9188

9289
<el-form-item
@@ -113,27 +110,6 @@
113110
</el-form-item>
114111
</el-form>
115112
<FieldFormDialog ref="FieldFormDialogRef" @refresh="refreshFieldList" />
116-
<!-- Codemirror 弹出层 -->
117-
<el-dialog
118-
v-model="dialogVisible"
119-
:title="$t('views.functionLib.functionForm.form.param.code')"
120-
append-to-body
121-
fullscreen
122-
>
123-
<CodemirrorEditor
124-
v-model="cloneContent"
125-
style="
126-
height: calc(100vh - 160px) !important;
127-
border: 1px solid #bbbfc4;
128-
border-radius: 4px;
129-
"
130-
/>
131-
<template #footer>
132-
<div class="dialog-footer mt-24">
133-
<el-button type="primary" @click="submitDialog"> {{ $t('common.confirm') }}</el-button>
134-
</div>
135-
</template>
136-
</el-dialog>
137113
</NodeContainer>
138114
</template>
139115
<script setup lang="ts">
@@ -190,17 +166,8 @@ const validate = () => {
190166
})
191167
}
192168
193-
const dialogVisible = ref(false)
194-
const cloneContent = ref('')
195-
196-
function openCodemirrorDialog() {
197-
cloneContent.value = chat_data.value.code
198-
dialogVisible.value = true
199-
}
200-
201-
function submitDialog() {
202-
set(props.nodeModel.properties.node_data, 'code', cloneContent.value)
203-
dialogVisible.value = false
169+
function submitCodemirrorEditor(val: string) {
170+
set(props.nodeModel.properties.node_data, 'code', val)
204171
}
205172
206173
function openAddDialog(data?: any, index?: any) {
@@ -244,13 +211,4 @@ onMounted(() => {
244211
}, 100)
245212
})
246213
</script>
247-
<style lang="scss">
248-
.function-CodemirrorEditor__footer {
249-
position: absolute;
250-
bottom: 10px;
251-
right: 10px;
252-
}
253-
.function-CodemirrorEditor {
254-
position: relative;
255-
}
256-
</style>
214+
<style lang="scss"></style>

0 commit comments

Comments
 (0)