<template>
|
<NodeBasicLayout v-model:title="data.title" :type="NodeType.Code" :showOffset="false" :description="data.description">
|
<Handle :id="targetHandleId" type="target" :position="Position.Left" />
|
<FieldLayout :title="codeInput.name">
|
<el-input class="w-full flex-0" v-model="codeInput.params[0].value" placeholder="参数名"> </el-input>
|
</FieldLayout>
|
<FieldLayout :title="codeStr.name">
|
<CodeEditor
|
v-model="codeStr.params[0].value"
|
:language="codeLanguage"
|
v-model:defaultLanguage="codeStr.params[0].defaultLanguage"
|
v-model:editValue="codeStr.params[0].value"
|
/>
|
<template #right>
|
<!-- <el-select size="small" class="w-[100px]" v-model="codeStr.params[0].defaultLanguage">
|
<el-option v-for="item in codeLanguage" :key="item" :value="item" :label="textTypeMap[item]"></el-option>
|
</el-select> -->
|
</template>
|
</FieldLayout>
|
|
<Handle :id="sourceHandleId" type="source" :position="Position.Right" />
|
<Teleport to="body">
|
<CodeEditDialog v-if="editMapCodeItem" v-model="codeEditDlgIsShow" :item="editMapCodeItem"></CodeEditDialog>
|
</Teleport>
|
</NodeBasicLayout>
|
</template>
|
|
<script lang="ts" setup>
|
import { javascript } from '@codemirror/lang-javascript';
|
import { vscodeDark } from '@uiw/codemirror-theme-vscode';
|
import type { NodeProps } from '@vue-flow/core';
|
import { Handle, Position, useNode } from '@vue-flow/core';
|
import { computed, ref } from 'vue';
|
import { VueFlowHelper } from '../../VueFlowHelper';
|
import { NodeType, ParameterType } from '../../vueFlowEnum';
|
import CodeEditDialog from './components/CodeEditDlg.vue';
|
import FieldLayout from './components/FieldLayout.vue';
|
import NodeBasicLayout from './components/NodeBasicLayout.vue';
|
import type { LLMNodeData, LLMNodeEvents } from './index';
|
import CodeEditor from '/@/components/input/codeEditor/index.vue';
|
import { textTypeMap } from '/@/components/input/codeEditor/types';
|
|
defineProps<NodeProps<LLMNodeData, LLMNodeEvents>>();
|
const node = useNode();
|
const targetHandleId = ref(VueFlowHelper.getHandleId(node.node, 'target'));
|
const sourceHandleId = ref(VueFlowHelper.getHandleId(node.node, 'source'));
|
const javascriptEditorExtensions = [javascript(), vscodeDark];
|
|
const data = ref(node.node.data);
|
const codeInput = ref(VueFlowHelper.getGroupParam(data.value, 0));
|
const codeStr = ref(VueFlowHelper.getGroupParam(data.value, 1));
|
const codeLanguage = computed(() => {
|
return VueFlowHelper.getConfigValue(codeStr.value.params[0], 'language', ['text', 'javascript']);
|
});
|
// defaultLanguage 不存在，设置默认值
|
!codeStr.value.params[0].defaultLanguage && (codeStr.value.params[0].defaultLanguage = 'text');
|
const getInputEmptyItem = () => {
|
return {
|
key: '',
|
type: 'input',
|
label: '',
|
value: '',
|
};
|
};
|
|
const getOutputEmptyItem = () => {
|
return {
|
key: '',
|
type: ParameterType.String,
|
};
|
};
|
const delInputVarItem = (index) => {
|
if (!codeInput.value.params[0].value || codeInput.value.params[0].value.length === 0) {
|
return;
|
}
|
// if (codeInput.value.params[0].value?.length === 1) {
|
// codeInput.value.params[0].value = getEmptyItem();
|
// return;
|
// }
|
codeInput.value.params[0].value.splice(index, 1);
|
};
|
|
const addInputVarItem = () => {
|
if (!codeInput.value.params[0].value || codeInput.value.params[0].value.length === 0) {
|
codeInput.value.params[0].value = [];
|
}
|
codeInput.value.params[0].value.push(getInputEmptyItem());
|
};
|
|
const editMapCodeItem = ref({});
|
const codeEditDlgIsShow = ref(false);
|
const fullEditCodeClick = (item) => {
|
editMapCodeItem.value = item;
|
codeEditDlgIsShow.value = true;
|
};
|
</script>
|
