red-future/admin-ui
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

针对https节点改动

Browse Source
This commit is contained in:
吴思建
2026-05-19 13:55:11 +08:00
parent 7f28b3fd5d
commit f64d6334e2
1 changed files with 162 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
src/views/settings/creation/index.vue
View File

@@ -69,25 +69,23 @@
</el-form-item>
<!-- 基础表单 + 模型表单 -->
<el-form-item v-for="fieldItem in allFormFields" :key="fieldItem.field" :label="fieldItem.label">
<el-input
v-if="fieldItem.type === 'input' && !isSelectField(fieldItem.field)"
v-model="dynamicFormValues[fieldItem.field]"
:placeholder="fieldItem.required ? '必填' : '选填'"
/>
<!-- 下拉选择框 -->
<el-select
v-else-if="fieldItem.type === 'input' && isSelectField(fieldItem.field)"
v-if="fieldItem.type === 'select' || isSelectField(fieldItem)"
v-model="dynamicFormValues[fieldItem.field]"
:placeholder="fieldItem.required ? '必填' : '选填'"
class="w100"
>
<el-option v-for="opt in getSelectOptions(fieldItem.field)" :key="opt.value" :label="opt.label" :value="opt.value" />
<el-option v-for="opt in getSelectOptions(fieldItem)" :key="opt.value" :label="opt.label" :value="opt.value" />
</el-select>
<!-- 数字输入框 -->
<el-input-number
v-else-if="fieldItem.type === 'number'"
v-else-if="fieldItem.type === 'number' || fieldItem.type === 'inputNumber'"
v-model="dynamicFormValues[fieldItem.field]"
:min="fieldItem.field === 'count' ? 1 : undefined"
class="w100"
/>
<!-- 多行文本框 -->
<el-input
v-else-if="fieldItem.type === 'textarea'"
v-model="dynamicFormValues[fieldItem.field]"
@@ -95,7 +93,46 @@
:rows="3"
:placeholder="fieldItem.required ? '必填' : '选填'"
/>
<!-- 开关 -->
<el-switch v-else-if="fieldItem.type === 'switch'" v-model="dynamicFormValues[fieldItem.field]" />
<!-- 键值对输入（HTTP节点的headers和body） -->
<div v-else-if="fieldItem.type === 'keyValue'" class="key-value-input-wrapper">
<div
v-for="(pair, pairIndex) in getKeyValuePairs(fieldItem.field)"
:key="pairIndex"
class="key-value-pair"
>
<el-input
v-model="pair.key"
placeholder="键"
class="key-input"
@input="updateKeyValueField(fieldItem.field)"
/>
<el-input
v-model="pair.value"
placeholder="值"
class="value-input"
@input="updateKeyValueField(fieldItem.field)"
/>
<el-button
type="danger"
:icon="Delete"
circle
size="small"
@click="removeKeyValuePair(fieldItem.field, pairIndex)"
/>
</div>
<el-button
type="primary"
link
:icon="Plus"
@click="addKeyValuePair(fieldItem.field)"
class="add-pair-btn"
>
添加键值对
</el-button>
</div>
<!-- 默认文本输入框 -->
<el-input v-else v-model="dynamicFormValues[fieldItem.field]" :placeholder="fieldItem.required ? '必填' : '选填'" />
</el-form-item>
<!-- 上级节点参数选择（表单参数节点和开始节点除外） -->
@@ -545,7 +582,7 @@
<script setup lang="ts">
import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Document, Plus, Paperclip, MagicStick, Promotion, Check, Setting, Search, CircleCheck, VideoPause } from '@element-plus/icons-vue';
import { Document, Plus, Paperclip, MagicStick, Promotion, Check, Setting, Search, CircleCheck, VideoPause, Delete } from '@element-plus/icons-vue';
import LogicFlow from '@logicflow/core';
import { Control, SelectionSelect } from '@logicflow/extension';
import '@logicflow/core/dist/index.css';
@@ -1648,19 +1685,29 @@ const isJudgeNode = (node: Item) => {
return JUDGE_KEYWORDS.some((k) => code.includes(k) || text.includes(k));
};
// 判断字段是否应该显示为下拉选择
const isSelectField = (field: string) => {
return field === 'size' || field === 'resolution';
const isSelectField = (fieldItem: NodeLibraryFormItem) => {
// 如果字段类型是 select，直接返回 true
if (fieldItem.type === 'select') return true;
// 兼容旧的硬编码字段
return fieldItem.field === 'size' || fieldItem.field === 'resolution';
};
// 获取下拉选项
const getSelectOptions = (field: string) => {
if (field === 'size') {
const getSelectOptions = (fieldItem: NodeLibraryFormItem) => {
// 优先使用字段配置中的 options
if (fieldItem.options && Array.isArray(fieldItem.options)) {
return fieldItem.options;
}
// 兼容旧的硬编码选项
if (fieldItem.field === 'size') {
return [
{ label: '1024x1024', value: '1024x1024' },
{ label: '512x512', value: '512x512' },
{ label: '256x256', value: '256x256' },
];
}
if (field === 'resolution') {
if (fieldItem.field === 'resolution') {
return [
{ label: '1920x1080', value: '1920x1080' },
{ label: '1280x720', value: '1280x720' },
@@ -1677,7 +1724,72 @@ const addCustomField = () => {
const removeCustomField = (index: number) => {
customFields.value.splice(index, 1);
};
// 判断是否可以添加自定义字段（排除判断节点、开始节点）
// 获取键值对数组
const getKeyValuePairs = (field: string) => {
const value = dynamicFormValues[field];
if (!value) {
return [{ key: '', value: '' }];
}
// 如果是字符串，尝试解析为JSON对象
if (typeof value === 'string') {
try {
const parsed = JSON.parse(value);
if (typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed)) {
return Object.entries(parsed).map(([k, v]) => ({ key: k, value: String(v) }));
}
} catch (e) {
// 解析失败，返回空数组
}
return [{ key: '', value: '' }];
}
// 如果是对象，转换为键值对数组
if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
const pairs = Object.entries(value).map(([k, v]) => ({ key: k, value: String(v) }));
return pairs.length > 0 ? pairs : [{ key: '', value: '' }];
}
return [{ key: '', value: '' }];
};
// 添加键值对
const addKeyValuePair = (field: string) => {
const pairs = getKeyValuePairs(field);
pairs.push({ key: '', value: '' });
updateKeyValueFieldFromPairs(field, pairs);
};
// 删除键值对
const removeKeyValuePair = (field: string, index: number) => {
const pairs = getKeyValuePairs(field);
pairs.splice(index, 1);
// 如果删除后为空，保留一个空的键值对
if (pairs.length === 0) {
pairs.push({ key: '', value: '' });
}
updateKeyValueFieldFromPairs(field, pairs);
};
// 更新键值对字段
const updateKeyValueField = (field: string) => {
const pairs = getKeyValuePairs(field);
updateKeyValueFieldFromPairs(field, pairs);
};
// 从键值对数组更新字段值
const updateKeyValueFieldFromPairs = (field: string, pairs: Array<{ key: string; value: string }>) => {
// 过滤掉空的键值对
const validPairs = pairs.filter(p => p.key.trim() !== '');
// 转换为对象
const obj: Record<string, string> = {};
validPairs.forEach(p => {
if (p.key.trim()) {
obj[p.key.trim()] = p.value;
}
});
// 保存为JSON字符串
dynamicFormValues[field] = Object.keys(obj).length > 0 ? JSON.stringify(obj) : '';
};
// 判断是否可以添加自定义字段（排除判断节点、开始节点、HTTP节点等）
const canAddCustomFields = (element: SelectedState | null) => {
if (!element || element.kind !== 'node') return false;
const nodeCode = String(element.properties?.nodeCode || '').toLowerCase();
@@ -1689,6 +1801,12 @@ const canAddCustomFields = (element: SelectedState | null) => {
// 排除开始节点
if (nodeCode === START_NODE_CODE || text === START_NODE_TEXT.toLowerCase()) return false;
// 排除HTTP节点（已有完整的表单配置，不需要自定义字段）
if (nodeCode === 'http') return false;
// 排除表单节点
if (nodeCode === 'form') return false;
return true;
};
// 判断是否可以选择上级参数（排除表单参数节点和开始节点）
@@ -3002,6 +3120,35 @@ onBeforeUnmount(() => {
.custom-field-value-full {
width: 100%;
}
.key-value-input-wrapper {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
}
.key-value-pair {
display: flex;
gap: 8px;
align-items: center;
}
.key-value-pair .key-input {
flex: 0 0 35%;
min-width: 0;
}
.key-value-pair .value-input {
flex: 1;
min-width: 0;
}
.key-value-pair .el-button {
flex-shrink: 0;
}
.add-pair-btn {
align-self: flex-start;
margin-top: 4px;
}
.input-source-list {
display: flex;
flex-direction: column;