Skip to content

Commit b37cc3b

Browse files
wangdan-fit2cloudwangdan-fit2cloud
authored
perf: The style of MCP nodes when there is no data (#3017)
1 parent dfe6d0a commit b37cc3b

File tree

1 file changed

+140
-126
lines changed

1 file changed

+140
-126
lines changed

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

Lines changed: 140 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -59,135 +59,149 @@
5959
<h5 class="title-decoration-1 mb-8">
6060
{{ $t('views.applicationWorkflow.nodes.mcpNode.toolParam') }}
6161
</h5>
62-
<div
63-
class="border-r-4 p-8-12 mb-8 layout-bg lighter"
64-
v-if="form_data.tool_params[form_data.params_nested]"
65-
>
66-
<el-form
67-
ref="dynamicsFormRef"
68-
label-position="top"
69-
v-loading="loading"
70-
require-asterisk-position="right"
71-
:hide-required-asterisk="true"
72-
v-if="form_data.mcp_tool"
73-
@submit.prevent
74-
>
75-
<el-form-item
76-
v-for="item in form_data.tool_form_field" :key="item.field"
77-
:required="item.required"
62+
<template v-if="form_data.tool_params[form_data.params_nested]">
63+
<div class="p-8-12" v-if="!form_data.mcp_tool">
64+
<el-text type="info">{{ $t('common.noData') }}</el-text>
65+
</div>
66+
<div v-else class="border-r-4 p-8-12 mb-8 layout-bg lighter">
67+
<el-form
68+
ref="dynamicsFormRef"
69+
label-position="top"
70+
v-loading="loading"
71+
require-asterisk-position="right"
72+
:hide-required-asterisk="true"
73+
v-if="form_data.mcp_tool"
74+
@submit.prevent
7875
>
79-
<template #label>
80-
<div class="flex-between">
81-
<div>
82-
<TooltipLabel :label="item.label.label" :tooltip="item.label.attrs.tooltip" />
83-
<span v-if="item.required" class="danger">*</span>
76+
<el-form-item
77+
v-for="item in form_data.tool_form_field"
78+
:key="item.field"
79+
:required="item.required"
80+
>
81+
<template #label>
82+
<div class="flex-between">
83+
<div>
84+
<TooltipLabel :label="item.label.label" :tooltip="item.label.attrs.tooltip" />
85+
<span v-if="item.required" class="danger">*</span>
86+
</div>
87+
<el-select
88+
:teleported="false"
89+
v-model="item.source"
90+
size="small"
91+
style="width: 85px"
92+
@change="form_data.tool_params[form_data.params_nested] = {}"
93+
>
94+
<el-option
95+
:label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.reference')"
96+
value="referencing"
97+
/>
98+
<el-option
99+
:label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.custom')"
100+
value="custom"
101+
/>
102+
</el-select>
84103
</div>
85-
<el-select :teleported="false" v-model="item.source" size="small"
86-
style="width: 85px"
87-
@change="form_data.tool_params[form_data.params_nested] = {}">
88-
<el-option
89-
:label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.reference')"
90-
value="referencing"
91-
/>
92-
<el-option
93-
:label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.custom')"
94-
value="custom"
95-
/>
96-
</el-select>
97-
</div>
98-
</template>
99-
<el-input
100-
v-if="item.source === 'custom' && item.input_type === 'TextInput'"
101-
v-model="form_data.tool_params[form_data.params_nested][item.label.label]"
102-
/>
103-
<el-input-number
104-
v-else-if="item.source === 'custom' && item.input_type === 'NumberInput'"
105-
v-model="form_data.tool_params[form_data.params_nested][item.label.label]"
106-
/>
107-
<el-switch
108-
v-else-if="item.source === 'custom' && item.input_type === 'SwitchInput'"
109-
v-model="form_data.tool_params[form_data.params_nested][item.label.label]"
110-
/>
111-
<el-input
112-
v-else-if="item.source === 'custom' && item.input_type === 'JsonInput'"
113-
v-model="form_data.tool_params[form_data.params_nested][item.label.label]"
114-
type="textarea"
115-
/>
116-
<NodeCascader
117-
v-if="item.source === 'referencing'"
118-
ref="nodeCascaderRef2"
119-
:nodeModel="nodeModel"
120-
class="w-full"
121-
:placeholder="$t('views.applicationWorkflow.variable.placeholder')"
122-
v-model="form_data.tool_params[form_data.params_nested][item.label.label]"
123-
/>
124-
</el-form-item>
125-
</el-form>
126-
</div>
127-
<div
128-
v-else
129-
class="border-r-4 p-8-12 mb-8 layout-bg lighter"
130-
>
131-
<el-form
132-
ref="dynamicsFormRef"
133-
label-position="top"
134-
v-loading="loading"
135-
require-asterisk-position="right"
136-
:hide-required-asterisk="true"
137-
v-if="form_data.mcp_tool"
138-
@submit.prevent
139-
>
140-
<el-form-item
141-
v-for="item in form_data.tool_form_field" :key="item.field"
142-
:required="item.required"
104+
</template>
105+
<el-input
106+
v-if="item.source === 'custom' && item.input_type === 'TextInput'"
107+
v-model="form_data.tool_params[form_data.params_nested][item.label.label]"
108+
/>
109+
<el-input-number
110+
v-else-if="item.source === 'custom' && item.input_type === 'NumberInput'"
111+
v-model="form_data.tool_params[form_data.params_nested][item.label.label]"
112+
/>
113+
<el-switch
114+
v-else-if="item.source === 'custom' && item.input_type === 'SwitchInput'"
115+
v-model="form_data.tool_params[form_data.params_nested][item.label.label]"
116+
/>
117+
<el-input
118+
v-else-if="item.source === 'custom' && item.input_type === 'JsonInput'"
119+
v-model="form_data.tool_params[form_data.params_nested][item.label.label]"
120+
type="textarea"
121+
/>
122+
<NodeCascader
123+
v-if="item.source === 'referencing'"
124+
ref="nodeCascaderRef2"
125+
:nodeModel="nodeModel"
126+
class="w-full"
127+
:placeholder="$t('views.applicationWorkflow.variable.placeholder')"
128+
v-model="form_data.tool_params[form_data.params_nested][item.label.label]"
129+
/>
130+
</el-form-item>
131+
</el-form>
132+
</div>
133+
</template>
134+
<template v-else>
135+
<div class="p-8-12" v-if="!form_data.mcp_tool">
136+
<el-text type="info">{{ $t('common.noData') }}</el-text>
137+
</div>
138+
<div v-else class="border-r-4 p-8-12 mb-8 layout-bg lighter">
139+
<el-form
140+
ref="dynamicsFormRef"
141+
label-position="top"
142+
v-loading="loading"
143+
require-asterisk-position="right"
144+
:hide-required-asterisk="true"
145+
v-if="form_data.mcp_tool"
146+
@submit.prevent
143147
>
144-
<template #label>
145-
<div class="flex-between">
146-
<div>
147-
<TooltipLabel :label="item.label.label" :tooltip="item.label.attrs.tooltip" />
148-
<span v-if="item.required" class="danger">*</span>
148+
<el-form-item
149+
v-for="item in form_data.tool_form_field"
150+
:key="item.field"
151+
:required="item.required"
152+
>
153+
<template #label>
154+
<div class="flex-between">
155+
<div>
156+
<TooltipLabel :label="item.label.label" :tooltip="item.label.attrs.tooltip" />
157+
<span v-if="item.required" class="danger">*</span>
158+
</div>
159+
<el-select
160+
:teleported="false"
161+
v-model="item.source"
162+
size="small"
163+
style="width: 85px"
164+
>
165+
<el-option
166+
:label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.reference')"
167+
value="referencing"
168+
/>
169+
<el-option
170+
:label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.custom')"
171+
value="custom"
172+
/>
173+
</el-select>
149174
</div>
150-
<el-select :teleported="false" v-model="item.source" size="small"
151-
style="width: 85px">
152-
<el-option
153-
:label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.reference')"
154-
value="referencing"
155-
/>
156-
<el-option
157-
:label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.custom')"
158-
value="custom"
159-
/>
160-
</el-select>
161-
</div>
162-
</template>
163-
<el-input
164-
v-if="item.source === 'custom' && item.input_type === 'TextInput'"
165-
v-model="form_data.tool_params[item.label.label]"
166-
/>
167-
<el-input-number
168-
v-else-if="item.source === 'custom' && item.input_type === 'NumberInput'"
169-
v-model="form_data.tool_params[item.label.label]"
170-
/>
171-
<el-switch
172-
v-else-if="item.source === 'custom' && item.input_type === 'SwitchInput'"
173-
v-model="form_data.tool_params[item.label.label]"
174-
/>
175-
<el-input
176-
v-else-if="item.source === 'custom' && item.input_type === 'JsonInput'"
177-
v-model="form_data.tool_params[item.label.label]"
178-
type="textarea"
179-
/>
180-
<NodeCascader
181-
v-if="item.source === 'referencing'"
182-
ref="nodeCascaderRef2"
183-
:nodeModel="nodeModel"
184-
class="w-full"
185-
:placeholder="$t('views.applicationWorkflow.variable.placeholder')"
186-
v-model="form_data.tool_params[item.label.label]"
187-
/>
188-
</el-form-item>
189-
</el-form>
190-
</div>
175+
</template>
176+
<el-input
177+
v-if="item.source === 'custom' && item.input_type === 'TextInput'"
178+
v-model="form_data.tool_params[item.label.label]"
179+
/>
180+
<el-input-number
181+
v-else-if="item.source === 'custom' && item.input_type === 'NumberInput'"
182+
v-model="form_data.tool_params[item.label.label]"
183+
/>
184+
<el-switch
185+
v-else-if="item.source === 'custom' && item.input_type === 'SwitchInput'"
186+
v-model="form_data.tool_params[item.label.label]"
187+
/>
188+
<el-input
189+
v-else-if="item.source === 'custom' && item.input_type === 'JsonInput'"
190+
v-model="form_data.tool_params[item.label.label]"
191+
type="textarea"
192+
/>
193+
<NodeCascader
194+
v-if="item.source === 'referencing'"
195+
ref="nodeCascaderRef2"
196+
:nodeModel="nodeModel"
197+
class="w-full"
198+
:placeholder="$t('views.applicationWorkflow.variable.placeholder')"
199+
v-model="form_data.tool_params[item.label.label]"
200+
/>
201+
</el-form-item>
202+
</el-form>
203+
</div>
204+
</template>
191205
</NodeContainer>
192206
</template>
193207
<script setup lang="ts">
@@ -319,7 +333,7 @@ function changeTool() {
319333
} else if (args_schema.properties[item].type === 'object') {
320334
input_type = 'JsonInput'
321335
}
322-
console.log(args_schema.properties[item]);
336+
console.log(args_schema.properties[item])
323337
form_data.value.tool_form_field.push({
324338
field: item,
325339
label: {

0 commit comments

Comments
 (0)