节点

一个可组合的节点组件，用于基于 Vue Flow 的画布，具有基于 Card 的样式。

Node 组件为 Vue Flow 画布提供了一个可组合的、基于 Card 的节点。它包括连接句柄支持、结构化布局和使用 shadcn/vue 组件的一致样式。

Node 组件设计用于与 Canvas 组件一起使用。查看 Workflow 演示以获取完整示例。

使用 CLI 安装

AI Elements Vue

shadcn-vue CLI

npx ai-elements-vue@latest add node

手动安装

将以下代码复制并粘贴到同一文件夹中。

Node.vue

NodeHeader.vue

NodeTitle.vue

NodeDescription.vue

NodeAction.vue

NodeContent.vue

NodeFooter.vue

index.ts

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import Card from '@repo/shadcn-vue/components/ui/card/Card.vue'
import { cn } from '@repo/shadcn-vue/lib/utils'
import { Handle, Position } from '@vue-flow/core'
import { reactiveOmit } from '@vueuse/core'

interface NodeHandles {
  target?: boolean
  source?: boolean
}

interface NodeProps {
  class?: HTMLAttributes['class']
  handles?: NodeHandles
}

const props = defineProps<NodeProps>()
const delegatedProps = reactiveOmit(props, 'class')
</script>

<template>
  <Card
    v-bind="delegatedProps"
    :class="cn('node-container relative size-full h-auto w-sm gap-0 rounded-md p-0', props.class)"
  >
    <Handle v-if="props.handles?.target" :position="Position.Left" type="target" />
    <Handle v-if="props.handles?.source" :position="Position.Right" type="source" />
    <slot />
  </Card>
</template>