feat: 修改画布内容

packages/workflow/src/components/elements/CanvasNode.vue

@@ -71,20 +71,33 @@ const outputs = computed(() =>
 		})
 	)
 )
+
+const nodeClass = computed(() => {
+	let classes: string[] = []
+	if (props.selected) {
+		classes.push('ring-6px', 'ring-#e0e2e7')
+	}
+	if (inputs.value.length === 0) {
+		classes.push('rounded-l-36px')
+	}
+
+	return classes
+})
 </script>
 
 <template>
 	<div
-		class="w-full h-full bg-#fff box-border border-2 border-solid border-#dcdcdc rounded-4px relative"
+		class="w-full h-full bg-#fff box-border border-2 border-solid border-#dcdcdc rounded-8px relative"
+		:class="nodeClass"
 	>
 		<div className="w-full h-full relative flex items-center justify-center">
 			<Icon :icon="data?.icon" height="40" width="40" :color="data?.iconColor" />
 		</div>
 
-		<div className="absolute w-full bottom--22px text-12px text-center text-#222">
+		<div className="absolute w-full bottom--24px text-12px text-center text-#222">
 			{{ data?.displayName }}
 		</div>
-		<div className="absolute w-full bottom--38px text-12px text-center text-#999 truncate">
+		<div className="absolute w-full bottom--40px text-12px text-center text-#999 truncate">
 			{{ data.subtitle }}
 		</div>
 

packages/workflow/src/components/elements/handles/CanvasHandle.vue

@@ -1,18 +1,35 @@
 <script lang="ts" setup>
+import { computed } from 'vue'
 import { Handle, type Position, type ValidConnectionFunc } from '@vue-flow/core'
 import HandlePort from './HandlePort.vue'
 
-defineProps<{
+const props = defineProps<{
 	handleId: string
 	handleClasses?: string | string[]
 	position: Position
 	offset?: Record<string, string>
-	isConnectableStart?: boolean
-	isConnectableEnd?: boolean
 	isValidConnection?: ValidConnectionFunc
 	type: 'source' | 'target'
 	label?: string
+	maxConnections?: number
+	connectionsCount: number
 }>()
+
+const connectionsLimitReached = computed(() => {
+	return props.maxConnections && props.connectionsCount >= props.maxConnections
+})
+
+const isConnectableStart = computed(() => {
+	if (connectionsLimitReached.value) return false
+
+	return props.type === 'source'
+})
+
+const isConnectableEnd = computed(() => {
+	if (connectionsLimitReached.value) return false
+
+	return props.type === 'target'
+})
 </script>
 
 <template>