init
This commit is contained in:
吴红兵
183
src/views/knowledge/aiFlow/panels/MCPPanel.vue
Normal file
183
src/views/knowledge/aiFlow/panels/MCPPanel.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<div class="panel-content">
|
||||
<!-- 输入变量部分 -->
|
||||
<div class="mb-2 panel-section">
|
||||
<div class="flex justify-between items-center panel-header">
|
||||
<span>变量输入</span>
|
||||
<el-button type="primary" size="small" @click="addParam">
|
||||
<el-icon>
|
||||
<Plus />
|
||||
</el-icon>
|
||||
添加
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="params-list">
|
||||
<div v-for="(param, index) in inputParams" :key="index" class="mb-2">
|
||||
<div class="param-item">
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="9">
|
||||
<el-input v-model="param.name" placeholder="变量名" />
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-select v-model="param.type" placeholder="变量值" class="w-full">
|
||||
<el-option-group v-for="item in previousOutputParams" :key="item.name" :label="item.name">
|
||||
<el-option v-for="param in item.list" :key="param.name" :label="param.name" :value="`${item.id}.${param.name}`" />
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-button @click="removeParam(index)">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MCP 配置部分 -->
|
||||
<div class="mb-2 panel-section">
|
||||
<div class="panel-header">
|
||||
<span>MCP 配置</span>
|
||||
</div>
|
||||
|
||||
<el-form label-position="top">
|
||||
<div class="param-item param-item-margin">
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">MCP 服务：</span>
|
||||
<el-select v-model="node.mcpParams.mcpId" placeholder="请选择 MCP 服务" class="flex-1" @change="onMcpChange">
|
||||
<el-option v-for="mcp in mcpList" :key="mcp.mcpId" :label="mcp.name" :value="mcp.mcpId">
|
||||
<span style="float: left">{{ mcp.name }}</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px">{{ mcp.mcpType }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="param-item param-item-margin" v-if="node.mcpParams.mcpId">
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">请求提示词：</span>
|
||||
<el-input
|
||||
v-model="node.mcpParams.prompt"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请求提示词，使用${变量名}引用上方定义的变量"
|
||||
class="flex-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 输出变量部分 -->
|
||||
<div class="panel-section">
|
||||
<div class="flex justify-between items-center panel-header">
|
||||
<span>输出变量</span>
|
||||
<el-button type="primary" size="small" @click="addOutput">
|
||||
<el-icon>
|
||||
<Plus />
|
||||
</el-icon>
|
||||
添加
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="params-list">
|
||||
<div v-for="(output, index) in outputParams" :key="index" class="mb-2">
|
||||
<div class="param-item">
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="9">
|
||||
<el-input v-model="output.name" placeholder="变量名" />
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-select v-model="output.type" placeholder="变量类型" class="w-full">
|
||||
<el-option label="文本" value="string" />
|
||||
<el-option label="数字" value="number" />
|
||||
<el-option label="布尔值" value="boolean" />
|
||||
<el-option label="对象" value="object" />
|
||||
<el-option label="数组" value="array" />
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-button @click="removeOutput(index)">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Plus, Delete } from '@element-plus/icons-vue';
|
||||
import common from './common';
|
||||
import { list } from '/@/api/knowledge/aiMcpConfig';
|
||||
|
||||
export default {
|
||||
name: 'McpPanel',
|
||||
mixins: [common],
|
||||
components: {
|
||||
Plus,
|
||||
Delete,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mcpList: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
selectedMcp() {
|
||||
return this.mcpList.find(mcp => mcp.mcpId === this.node.mcpParams?.mcpId);
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
// 确保 mcpParams 对象存在
|
||||
if (!this.node.mcpParams) {
|
||||
this.$set(this.node, 'mcpParams', {
|
||||
mcpId: '',
|
||||
mcpName: '',
|
||||
prompt: '',
|
||||
});
|
||||
}
|
||||
|
||||
await this.fetchMcpList();
|
||||
|
||||
// 确保输出参数有默认值
|
||||
if (!this.outputParams.length) {
|
||||
this.outputParams.push({
|
||||
name: 'result',
|
||||
type: 'string',
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async fetchMcpList() {
|
||||
try {
|
||||
const { data } = await list();
|
||||
this.mcpList = data || [];
|
||||
} catch (error) {
|
||||
console.error('获取 MCP 列表失败:', error);
|
||||
}
|
||||
},
|
||||
onMcpChange() {
|
||||
const selectedMcp = this.selectedMcp;
|
||||
if (selectedMcp) {
|
||||
this.node.mcpParams.mcpName = selectedMcp.name;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.w-full {
|
||||
margin-right: 15px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user