shalu-agent-workflow/apps/web/src/features/toolbar/index.vue

<template>
	<div class="absolute top-0 right-0 p-16px flex flex-col gap-12px">
		<el-tooltip content="节点" placement="left">
			<el-popover placement="left-start" width="360px">
				<NodeLibary @add-node="(val) => $emit('create:node', val)" />
				<template #reference>
					<IconButton type="primary" class="ml-12px" icon="lucide:package-plus" square />
				</template>
			</el-popover>
		</el-tooltip>

		<el-tooltip content="注释" placement="left">
			<IconButton
				icon="lucide:file-plus-corner"
				square
				@click="$emit('create:node', 'stickyNote')"
			/>
		</el-tooltip>

		<el-tooltip content="运行" placement="left">
			<IconButton
				icon="lucide:play"
				icon-color="#fff"
				type="success"
				square
				@click="$emit('run')"
			/>
		</el-tooltip>

		<el-tooltip content="环境变量" placement="left">
			<IconButton icon="eos-icons:env" icon-color="#666" square @click="showEnvDialog = true" />
		</el-tooltip>

		<AgentEnvDialog v-model="showEnvDialog" @change="handleEnvChange" :value="envVars" />
	</div>
</template>

<script setup lang="ts">
import { IconButton } from '@repo/ui'
import { ref } from 'vue'
import NodeLibary from '@/features/nodeLibary/index.vue'
import AgentEnvDialog from './AgentEnvDialog.vue'

const props = defineProps<{
	envVars: {
		name: string
		value: string
		type: 'string' | 'number' | 'boolean' | 'object' | 'array'
	}[]
}>()

const emit = defineEmits<{
	(
		e: 'changeEnvVars',
		value: {
			name: string
			value: string
			type: 'string' | 'number' | 'boolean' | 'object' | 'array'
		}[]
	): void
	(e: 'run'): void
	(e: 'create:node', value: { type: string } | string): void
}>()

const showEnvDialog = ref(false)

function handleEnvChange(
	payload: {
		name: string
		value: string
		type: 'string' | 'number' | 'boolean' | 'object' | 'array'
	}[]
) {
	emit('changeEnvVars', payload)
}
</script>

<style scoped></style>