school-developer/src/views/knowledge/aiFlow/panels/MCPPanel.vue

<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>