feat(workflow): 节点配置支持 keyValue 与 schemaJson 字段类型
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div class="kv-editor">
|
||||
<div v-for="(item, idx) in list" :key="idx" class="kv-row">
|
||||
<el-input v-model="item.key" placeholder="key" size="small" class="kv-key" @input="sync" />
|
||||
<el-input v-model="item.value" placeholder="value" size="small" class="kv-value" @input="sync" />
|
||||
<el-button size="small" text type="danger" class="kv-del" @click="remove(idx)">
|
||||
<el-icon><Delete /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button size="small" class="kv-add" @click="add">
|
||||
<el-icon><Plus /></el-icon> 添加
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { Plus, Delete } from '@element-plus/icons-vue';
|
||||
|
||||
const props = defineProps<{ modelValue: Record<string, unknown> }>();
|
||||
const emit = defineEmits<{ 'update:modelValue': [Record<string, unknown>] }>();
|
||||
|
||||
const list = ref<{ key: string; value: string }[]>([]);
|
||||
|
||||
function toList(obj: Record<string, unknown>) {
|
||||
return Object.entries(obj || {}).map(([k, v]) => ({
|
||||
key: k,
|
||||
value: typeof v === 'string' ? v : JSON.stringify(v),
|
||||
}));
|
||||
}
|
||||
|
||||
function toRecord() {
|
||||
const obj: Record<string, unknown> = {};
|
||||
for (const item of list.value) {
|
||||
if (item.key.trim()) obj[item.key.trim()] = item.value;
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
|
||||
function sync() {
|
||||
emit('update:modelValue', toRecord());
|
||||
}
|
||||
|
||||
function add() {
|
||||
list.value.push({ key: '', value: '' });
|
||||
}
|
||||
|
||||
function remove(idx: number) {
|
||||
list.value.splice(idx, 1);
|
||||
sync();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
list.value = toList(val);
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.kv-editor {
|
||||
width: 100%;
|
||||
}
|
||||
.kv-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-bottom: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
.kv-key {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.kv-value {
|
||||
flex: 2;
|
||||
min-width: 0;
|
||||
}
|
||||
.kv-del {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.kv-add {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -76,6 +76,16 @@
|
||||
>
|
||||
<el-option v-for="opt in field.options" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||||
</el-select>
|
||||
<KeyValueEditor
|
||||
v-else-if="field.type === 'keyValue'"
|
||||
:model-value="getFieldValue(field.field)"
|
||||
@update:model-value="(v: any) => updateFieldValue(field.field, v)"
|
||||
/>
|
||||
<el-button
|
||||
v-else-if="field.type === 'schemaJson'"
|
||||
@click="openSchemaEditor(field.field)"
|
||||
style="width: 100%"
|
||||
>配置</el-button>
|
||||
<el-input
|
||||
v-else
|
||||
:model-value="getFieldValue(field.field)"
|
||||
@@ -98,12 +108,26 @@
|
||||
/>
|
||||
</div>
|
||||
<el-empty v-else description="请选择一个节点" :image-size="100" />
|
||||
|
||||
<!-- Schema 编辑器弹窗 -->
|
||||
<el-dialog v-model="schemaEditorVisible" title="编辑 Schema" width="640px" append-to-body destroy-on-close>
|
||||
<div style="height: 400px; overflow-y: auto">
|
||||
<JsonEditor v-model="schemaEditorData" />
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="schemaEditorVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="confirmSchemaEditor">确 定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import type { Node } from '@vue-flow/core';
|
||||
import InputSourceManager from './InputSourceManager.vue';
|
||||
import KeyValueEditor from './KeyValueEditor.vue';
|
||||
import { JsonEditor } from '/@/components/json-schema-editor';
|
||||
|
||||
interface NodeData {
|
||||
label?: string;
|
||||
@@ -148,6 +172,23 @@ const emit = defineEmits<{
|
||||
(e: 'update:patchLayout', value: boolean): void;
|
||||
}>();
|
||||
|
||||
// Schema 编辑器弹窗
|
||||
const schemaEditorVisible = ref(false);
|
||||
const schemaEditorField = ref('');
|
||||
const schemaEditorData = ref<any>({});
|
||||
|
||||
function openSchemaEditor(fieldName: string) {
|
||||
schemaEditorField.value = fieldName;
|
||||
const val = getFieldValue(fieldName);
|
||||
schemaEditorData.value = val && typeof val === 'object' ? { ...val } : {};
|
||||
schemaEditorVisible.value = true;
|
||||
}
|
||||
|
||||
function confirmSchemaEditor() {
|
||||
updateFieldValue(schemaEditorField.value, schemaEditorData.value);
|
||||
schemaEditorVisible.value = false;
|
||||
}
|
||||
|
||||
const updateNodeLabel = (newLabel: string) => {
|
||||
if (!props.selectedNode?.data) return;
|
||||
const updatedNode = {
|
||||
|
||||
Reference in New Issue
Block a user