shalu-agent-workflow/apps/web/src/components/setter/index.vue

<!--
 * @Author: liuJie
 * @Date: 2026-01-25 22:13:06
 * @LastEditors: liuJie
 * @LastEditTime: 2026-01-27 10:01:23
 * @Describe: file describe
-->
<script lang="ts" setup>
import { computed } from 'vue'
import { Icon } from '@iconify/vue'
import { useComponentMapInspector } from '@/store'
import type { IWorkflow } from '@repo/workflow'

import HttpSetter from './HttpSetter.vue'
import CodeSetter from './CodeSetter.vue'
import ConditionSetter from './ConditionSetter.vue'
import DatabaseSetter from './DatabaseSetter.vue'

const setterMap = {
	'http-node': HttpSetter,
	'code-node': CodeSetter,
	'condition-node': ConditionSetter,
	'database-node': DatabaseSetter
}

const store = useComponentMapInspector()

console.log(store.componentMap['http'])

interface Props {
	id: string
	workflow: IWorkflow
	visible: boolean
}
const props = withDefaults(defineProps<Props>(), {
	id: '',
	data: null,
	visible: false
})
const emit = defineEmits<{
	'update:visible': [value: boolean]
}>()

const node = computed(() => {
	return props.workflow.nodes.find((node) => node.id === props.id)
})

const setter = computed(() => {
	return node.value?.type && setterMap[node.value.type as keyof typeof setterMap]
})

const closeDrawer = () => {
	emit('update:visible', false)
}
</script>
<template>
	<div class="setter">
		<div class="drawer shadow-2xl" :class="{ 'drawer--open': props.visible && setter }">
			<header>
				<h4>{{ node?.label }}</h4>
				<Icon
					icon="lucide:x"
					height="24"
					width="24"
					@click="closeDrawer"
					class="cursor-pointer"
				></Icon>
			</header>
			<div class="content">
				<component :is="setter" :data="node?.data"></component>
			</div>
		</div>
	</div>
</template>
<style lang="less" scoped>
.setter {
	/* Drawer 主体 */
	.drawer {
		position: fixed;
		top: 100px;
		right: 5px;
		bottom: 10px;
		width: 420px;
		background: #fff;
		z-index: 1000;
		border-radius: 8px;
		display: flex;
		flex-direction: column;
		border: 1px solid #e4e4e4;

		/* 初始隐藏状态 */
		transform: translateX(110%);
		transition: transform 0.25s ease;
	}

	/* 显示状态 */
	.drawer--open {
		transform: translateX(0);
	}

	/* Header */
	.drawer header {
		height: 56px;
		padding: 0 16px;
		border-bottom: 1px solid #eee;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	/* 内容区 */
	.drawer .content {
		flex: 1;
		// padding: 16px;
		overflow-y: auto;
	}

	::v-deep(.el-collapse-item__header) {
		box-sizing: border-box;
		padding: 0 8px;
	}
	::v-deep(.el-collapse-item__content) {
		box-sizing: border-box;
		padding: 0 8px;
		padding-bottom: 12px;
	}
}
</style>