<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">
|
<div class="flex flex-col gap-y-2">
|
<div :key="subIndex" v-for="(subItem, subIndex) in codeInput.params[0].value" class="flex-items-center gap-x-2 pr-8">
|
<el-input filterable class="w-[120px] flex-0" v-model="subItem.key" placeholder="参数名"> </el-input>
|
|
<el-input filterable class="w-[120px] flex-0" v-model="subItem.value" placeholder="值"> </el-input>
|
<span class="ywifont ywicon-shanchu text-red-400 cursor-pointer" @click="delInputVarItem(subIndex)"></span>
|
</div>
|
<el-button class="w-fit mt-3" type="primary" @click="addInputVarItem">添加新的入参</el-button>
|
</div>
|
</FieldLayout>
|
<FieldLayout :title="codeStr.name">
|
<CodeEditor
|
:title="codeStr.name"
|
: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>
|
<FieldLayout :title="codeOutput.name">
|
<div class="flex flex-col gap-y-2">
|
<div :key="subIndex" v-for="(subItem, subIndex) in codeOutput.params[0].value" class="flex-items-center gap-x-2 pr-8">
|
<el-input filterable class="w-[120px] flex-0" v-model="subItem.key" placeholder="参数名"> </el-input>
|
|
<el-select v-model="subItem.type">
|
<el-option
|
v-for="item in Object.keys(parameterTypeMap)"
|
:key="item"
|
:value="item"
|
:label="parameterTypeMap[item]"
|
></el-option>
|
</el-select>
|
<span class="ywifont ywicon-shanchu text-red-400 cursor-pointer" @click="delOutputVarItem(subIndex)"></span>
|
</div>
|
<el-button class="w-fit mt-3" type="primary" @click="addOutputVarItem">添加新的出参</el-button>
|
</div>
|
</FieldLayout>
|
<Handle :id="sourceHandleId" type="source" :position="Position.Right" />
|
</NodeBasicLayout>
|
</template>
|
|
<script lang="ts" setup>
|
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, parameterTypeMap } from '../../vueFlowEnum';
|
import CodeEditor from '/@/components/input/codeEditor/index.vue';
|
// 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 { 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 data = ref(node.node.data);
|
const codeInput = ref(VueFlowHelper.getGroupParam(data.value, 0));
|
const codeStr = ref(VueFlowHelper.getGroupParam(data.value, 1));
|
const codeOutput = ref(VueFlowHelper.getGroupParam(data.value, 2));
|
|
const codeLanguage = ref(VueFlowHelper.getConfigValue(codeStr.value.params[0], 'language', ['text', 'javascript']));
|
|
// defaultLanguage 不存在，设置默认值
|
!codeStr.value.params[0].defaultLanguage && (codeStr.value.params[0].defaultLanguage = 'javascript');
|
|
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 delOutputVarItem = (index) => {
|
if (!codeOutput.value.params[0].value || codeOutput.value.params[0].value.length === 0) {
|
return;
|
}
|
// if (codeOutput.value.params[0].value?.length === 1) {
|
// codeOutput.value.params[0].value = getOutputEmptyItem();
|
// return;
|
// }
|
codeOutput.value.params[0].value.splice(index, 1);
|
};
|
|
const addOutputVarItem = () => {
|
if (!codeOutput.value.params[0].value || codeOutput.value.params[0].value.length === 0) {
|
codeOutput.value.params[0].value = [];
|
}
|
codeOutput.value.params[0].value.push(getOutputEmptyItem());
|
};
|
</script>
|
