@yh-ui/flow 0.1.21

package/dist/components/edges/DataFlowEdge.vue

@@ -0,0 +1,211 @@
+<script setup>
+import { computed, ref, onMounted, onUnmounted, watch } from "vue";
+const props = defineProps({
+  edge: { type: Object, required: true },
+  path: { type: String, required: true },
+  sourceX: { type: Number, required: true },
+  sourceY: { type: Number, required: true },
+  targetX: { type: Number, required: true },
+  targetY: { type: Number, required: true },
+  labelX: { type: Number, required: false, default: void 0 },
+  labelY: { type: Number, required: false, default: void 0 },
+  style: { type: Object, required: false, default: () => ({}) },
+  stroke: { type: String, required: false, default: "#b1b1b7" },
+  strokeWidth: { type: Number, required: false, default: 2 },
+  sourcePosition: { type: String, required: false, default: "right" },
+  targetPosition: { type: String, required: false, default: "left" }
+});
+const edgeData = computed(() => props.edge?.data ?? {});
+const flowStatus = computed(() => edgeData.value.flowStatus ?? "idle");
+const flowEffect = computed(() => edgeData.value.flowEffect ?? "particles");
+const glowIntensity = computed(() => edgeData.value.glowIntensity ?? 8);
+const particleCount = computed(() => edgeData.value.particleCount ?? 3);
+const animationDuration = computed(() => edgeData.value.animationDuration ?? 2);
+const isSelected = computed(() => props.edge?.selected ?? false);
+const isAnimated = computed(() => props.edge?.animated ?? false);
+const label = computed(() => props.edge?.label ?? "");
+const edgeId = computed(() => props.edge?.id ?? "");
+const edgeStrokeWidth = computed(() => props.strokeWidth ?? 2);
+const STATUS_COLORS = {
+  idle: { primary: "#b1b1b7", glow: "#b1b1b7", particle: "#d1d1d7" },
+  processing: { primary: "#6366f1", glow: "#4f46e5", particle: "#818cf8" },
+  success: { primary: "#10b981", glow: "#059669", particle: "#34d399" },
+  error: { primary: "#ef4444", glow: "#dc2626", particle: "#f87171" },
+  warning: { primary: "#f59e0b", glow: "#d97706", particle: "#fcd34d" }
+};
+const colors = computed(() => STATUS_COLORS[flowStatus.value]);
+const centX = computed(() => props.labelX ?? (props.sourceX + props.targetX) / 2);
+const centY = computed(() => props.labelY ?? (props.sourceY + props.targetY) / 2);
+const filterId = computed(() => `data-flow-glow-${edgeId.value}`);
+const particleGradId = computed(() => `data-flow-grad-${edgeId.value}`);
+const namedPathId = computed(() => `data-flow-path-${edgeId.value}`);
+const particles = computed(
+  () => Array.from({ length: particleCount.value }, (_, i) => ({
+    key: i,
+    delay: i / particleCount.value * animationDuration.value
+  }))
+);
+const isActive = computed(
+  () => flowStatus.value === "processing" || flowStatus.value === "success" || flowStatus.value === "error" || flowStatus.value === "warning"
+);
+const showGlow = computed(
+  () => isActive.value && (flowEffect.value === "glow" || flowEffect.value === "particles")
+);
+const strokeStyle = computed(() => ({
+  stroke: colors.value.primary,
+  strokeWidth: edgeStrokeWidth.value,
+  strokeDasharray: isAnimated.value && !isActive.value ? "5,5" : void 0,
+  ...props.style ?? {}
+}));
+const hitAreaStyle = computed(() => ({
+  stroke: "transparent",
+  strokeWidth: Math.max(edgeStrokeWidth.value * 5, 20),
+  fill: "none"
+}));
+const pulseOpacity = ref(0.8);
+let pulseTimer = null;
+function startPulse() {
+  if (pulseTimer) clearInterval(pulseTimer);
+  pulseTimer = setInterval(
+    () => {
+      pulseOpacity.value = pulseOpacity.value === 0.8 ? 0.2 : 0.8;
+    },
+    animationDuration.value * 1e3 / 2
+  );
+}
+function stopPulse() {
+  if (pulseTimer) {
+    clearInterval(pulseTimer);
+    pulseTimer = null;
+  }
+}
+onMounted(() => {
+  if (flowEffect.value === "pulse" && isActive.value) startPulse();
+});
+onUnmounted(() => stopPulse());
+watch([flowEffect, isActive], ([effect, active]) => {
+  stopPulse();
+  if (effect === "pulse" && active) startPulse();
+});
+</script>
+
+<template>
+  <g
+    :class="['flow-data-flow-edge', `status-${flowStatus}`, `effect-${flowEffect}`, {
+  selected: isSelected,
+  animated: isAnimated
+}]"
+  >
+    <!-- SVG 滤镜/渐变定义 -->
+    <defs>
+      <!-- 发光模糊滤镜 -->
+      <filter :id="filterId" x="-60%" y="-60%" width="220%" height="220%">
+        <feGaussianBlur :stdDeviation="glowIntensity / 3" result="blur" />
+        <feMerge>
+          <feMergeNode in="blur" />
+          <feMergeNode in="SourceGraphic" />
+        </feMerge>
+      </filter>
+
+      <!-- 粒子径向渐变（中心亮、边缘透明） -->
+      <radialGradient :id="particleGradId" cx="50%" cy="50%" r="50%">
+        <stop offset="0%" :stop-color="colors.particle" stop-opacity="1" />
+        <stop offset="100%" :stop-color="colors.primary" stop-opacity="0" />
+      </radialGradient>
+    </defs>
+
+    <!-- ① 发光底层（glow / particles 模式下激活） -->
+    <path
+      v-if="showGlow"
+      :d="path"
+      class="flow-edge-glow"
+      :style="{
+  stroke: colors.glow,
+  strokeWidth: edgeStrokeWidth * 4,
+  opacity: 0.35,
+  filter: `url(#${filterId})`
+}"
+      fill="none"
+    />
+
+    <!-- ② 主线条 -->
+    <path
+      :d="path"
+      class="flow-edge-main"
+      :style="strokeStyle"
+      fill="none"
+      :filter="showGlow ? `url(#${filterId})` : void 0"
+    />
+
+    <!-- ③ pulse 模式：叠加闪烁层 -->
+    <path
+      v-if="flowEffect === 'pulse' && isActive"
+      :d="path"
+      class="flow-edge-pulse"
+      :style="{
+  stroke: colors.primary,
+  strokeWidth: edgeStrokeWidth + 2,
+  opacity: pulseOpacity,
+  transition: `opacity ${animationDuration / 2}s ease-in-out`,
+  filter: `url(#${filterId})`
+}"
+      fill="none"
+    />
+
+    <!-- ④ wave 模式：流动虚线 -->
+    <path
+      v-if="flowEffect === 'wave' && isActive"
+      :d="path"
+      class="flow-edge-wave"
+      :style="{
+  stroke: colors.particle,
+  strokeWidth: edgeStrokeWidth,
+  strokeDasharray: '8 4',
+  fill: 'none'
+}"
+    />
+
+    <!-- ⑤ particles 模式：粒子沿路径流动 -->
+    <template v-if="flowEffect === 'particles' && isActive">
+      <!-- 供 animateMotion 引用的命名路径（不可见） -->
+      <path :id="namedPathId" :d="path" fill="none" stroke="none" />
+      <circle
+        v-for="p in particles"
+        :key="p.key"
+        r="4"
+        :fill="`url(#${particleGradId})`"
+        class="flow-particle"
+      >
+        <animateMotion
+          :dur="`${animationDuration}s`"
+          :begin="`${p.delay}s`"
+          repeatCount="indefinite"
+          calcMode="spline"
+          keySplines="0.5 0 0.5 1"
+          keyTimes="0;1"
+          rotate="auto"
+        >
+          <mpath :href="`#${namedPathId}`" />
+        </animateMotion>
+      </circle>
+    </template>
+
+    <!-- ⑥ 点击热区（扩大交互面积，不可见） -->
+    <path :d="path" :style="hitAreaStyle" class="flow-edge-hitarea" />
+
+    <!-- ⑦ 连线标签 -->
+    <foreignObject v-if="label" :x="centX - 38" :y="centY - 14" width="76" height="28">
+      <div class="flow-data-flow-label">{{ label }}</div>
+    </foreignObject>
+
+    <!-- ⑧ 状态指示点（无标签时显示） -->
+    <g v-if="flowStatus !== 'idle' && !label" :transform="`translate(${centX}, ${centY})`">
+      <circle r="9" :fill="colors.primary" opacity="0.12" />
+      <circle r="4" :fill="colors.primary" />
+    </g>
+  </g>
+</template>
+
+<style scoped>
+.flow-data-flow-edge{cursor:pointer;pointer-events:all}.flow-edge-main{transition:stroke .3s ease,stroke-width .2s ease}.flow-edge-glow,.flow-edge-wave{pointer-events:none}.flow-edge-wave{animation:wave-flow v-bind("`${animationDuration}s`") linear infinite}@keyframes wave-flow{0%{stroke-dashoffset:24}to{stroke-dashoffset:0}}.flow-particle{pointer-events:none}.flow-edge-hitarea{cursor:pointer;pointer-events:stroke}.flow-data-flow-edge.selected .flow-edge-main{filter:brightness(1.2);stroke-width:3}.flow-data-flow-edge.selected .flow-edge-glow{opacity:.6!important}.flow-data-flow-label{align-items:center;backdrop-filter:blur(4px);background:hsla(0,0%,100%,.92);border:1px solid rgba(0,0,0,.06);border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.08);color:#374151;display:flex;font-size:11px;font-weight:500;height:100%;justify-content:center;padding:2px 6px;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.flow-data-flow-edge.status-processing .flow-edge-main{animation:processing-pulse 1.5s ease-in-out infinite}@keyframes processing-pulse{0%,to{opacity:1}50%{opacity:.65}}.flow-data-flow-edge.status-error .flow-edge-main{animation:error-flash .8s ease-in-out infinite}@keyframes error-flash{0%,to{opacity:1}50%{opacity:.3}}.flow-data-flow-edge.status-warning .flow-edge-main{animation:warning-pulse 2s ease-in-out infinite}@keyframes warning-pulse{0%,to{opacity:1}50%{opacity:.55}}
+</style>

package/dist/components/edges/DataFlowEdge.vue.d.ts

@@ -0,0 +1,41 @@
+import type { Edge, Position, EdgeStyle } from '../../types';
+export type DataFlowStatus = 'idle' | 'processing' | 'success' | 'error' | 'warning';
+export type DataFlowEffect = 'particles' | 'glow' | 'pulse' | 'wave' | 'none';
+interface Props {
+    /** EdgeRenderer 注入：完整边对象 */
+    edge: Edge;
+    /** EdgeRenderer 注入：预计算 SVG 路径 */
+    path: string;
+    /** EdgeRenderer 注入：源点 X */
+    sourceX: number;
+    /** EdgeRenderer 注入：源点 Y */
+    sourceY: number;
+    /** EdgeRenderer 注入：目标点 X */
+    targetX: number;
+    /** EdgeRenderer 注入：目标点 Y */
+    targetY: number;
+    /** EdgeRenderer 注入：中心 X（用于标签） */
+    labelX?: number;
+    /** EdgeRenderer 注入：中心 Y（用于标签） */
+    labelY?: number;
+    /** EdgeRenderer 注入：边样式 */
+    style?: EdgeStyle;
+    /** EdgeRenderer 注入：线条颜色 */
+    stroke?: string;
+    /** EdgeRenderer 注入：线条宽度 */
+    strokeWidth?: number;
+    /** 源点方向（EdgeRenderer 从 sourceHandle 推导） */
+    sourcePosition?: Position;
+    /** 目标点方向 */
+    targetPosition?: Position;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    style: EdgeStyle;
+    stroke: string;
+    strokeWidth: number;
+    sourcePosition: Position;
+    targetPosition: Position;
+    labelX: number;
+    labelY: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/edges/SmoothEdge.d.vue.ts

@@ -0,0 +1,22 @@
+import type { Position, EdgeStyle } from '../../types';
+interface Props {
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    sourcePosition?: Position;
+    targetPosition?: Position;
+    style?: EdgeStyle;
+    selected?: boolean;
+    animated?: boolean;
+    label?: string;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+    style: EdgeStyle;
+    selected: boolean;
+    animated: boolean;
+    sourcePosition: Position;
+    targetPosition: Position;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/edges/SmoothEdge.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  sourceX: { type: Number, required: true },
+  sourceY: { type: Number, required: true },
+  targetX: { type: Number, required: true },
+  targetY: { type: Number, required: true },
+  sourcePosition: { type: String, required: false, default: "right" },
+  targetPosition: { type: String, required: false, default: "left" },
+  style: { type: Object, required: false, default: () => ({}) },
+  selected: { type: Boolean, required: false, default: false },
+  animated: { type: Boolean, required: false, default: false },
+  label: { type: String, required: false, default: "" }
+});
+const centerX = computed(() => (props.sourceX + props.targetX) / 2);
+const centerY = computed(() => (props.sourceY + props.targetY) / 2);
+const path = computed(() => {
+  const { sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition } = props;
+  const deltaX = Math.abs(targetX - sourceX) * 0.5;
+  const deltaY = Math.abs(targetY - sourceY) * 0.5;
+  let cp1x = sourceX, cp1y = sourceY, cp2x = targetX, cp2y = targetY;
+  if (sourcePosition === "right") cp1x += deltaX;
+  else if (sourcePosition === "left") cp1x -= deltaX;
+  else if (sourcePosition === "bottom") cp1y += deltaY;
+  else if (sourcePosition === "top") cp1y -= deltaY;
+  if (targetPosition === "right") cp2x += deltaX;
+  else if (targetPosition === "left") cp2x -= deltaX;
+  else if (targetPosition === "bottom") cp2y += deltaY;
+  else if (targetPosition === "top") cp2y -= deltaY;
+  return `M ${sourceX} ${sourceY} C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${targetX} ${targetY}`;
+});
+const pathStyle = computed(() => ({
+  ...props.style,
+  strokeDasharray: props.animated ? "5,5" : void 0,
+  animation: props.animated ? "dash 0.5s linear infinite" : void 0
+}));
+</script>
+
+<template>
+  <g :class="['flow-smooth-edge', {
+  selected,
+  animated
+}]">
+    <path :d="path" fill="none" :style="pathStyle" stroke-width="2" stroke="#b1b1b7" />
+    <foreignObject v-if="label" :x="centerX - 30" :y="centerY - 10" width="60" height="20">
+      <div class="flow-edge-label">{{ label }}</div>
+    </foreignObject>
+  </g>
+</template>
+
+<style scoped>
+.flow-edge-label{color:#666;font-size:12px;text-align:center}@keyframes dash{to{stroke-dashoffset:-10}}
+</style>

package/dist/components/edges/SmoothEdge.vue.d.ts

@@ -0,0 +1,22 @@
+import type { Position, EdgeStyle } from '../../types';
+interface Props {
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    sourcePosition?: Position;
+    targetPosition?: Position;
+    style?: EdgeStyle;
+    selected?: boolean;
+    animated?: boolean;
+    label?: string;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+    style: EdgeStyle;
+    selected: boolean;
+    animated: boolean;
+    sourcePosition: Position;
+    targetPosition: Position;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/edges/StepEdge.d.vue.ts

@@ -0,0 +1,22 @@
+import type { Position, EdgeStyle } from '../../types';
+interface Props {
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    sourcePosition?: Position;
+    targetPosition?: Position;
+    style?: EdgeStyle;
+    selected?: boolean;
+    animated?: boolean;
+    label?: string;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+    style: EdgeStyle;
+    selected: boolean;
+    animated: boolean;
+    sourcePosition: Position;
+    targetPosition: Position;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/edges/StepEdge.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  sourceX: { type: Number, required: true },
+  sourceY: { type: Number, required: true },
+  targetX: { type: Number, required: true },
+  targetY: { type: Number, required: true },
+  sourcePosition: { type: String, required: false, default: "right" },
+  targetPosition: { type: String, required: false, default: "left" },
+  style: { type: Object, required: false, default: () => ({}) },
+  selected: { type: Boolean, required: false, default: false },
+  animated: { type: Boolean, required: false, default: false },
+  label: { type: String, required: false, default: "" }
+});
+const path = computed(() => {
+  const { sourceX, sourceY, targetX, targetY } = props;
+  const midX = (sourceX + targetX) / 2;
+  return `M ${sourceX} ${sourceY} H ${midX} V ${targetY} H ${targetX}`;
+});
+const centerX = computed(() => (props.sourceX + props.targetX) / 2);
+const centerY = computed(() => (props.sourceY + props.targetY) / 2);
+const pathStyle = computed(() => ({
+  ...props.style,
+  strokeDasharray: props.animated ? "5,5" : void 0
+}));
+</script>
+
+<template>
+  <g :class="['flow-step-edge', {
+  selected,
+  animated
+}]">
+    <path :d="path" fill="none" :style="pathStyle" stroke-width="2" stroke="#b1b1b7" />
+    <foreignObject v-if="label" :x="centerX - 30" :y="centerY - 10" width="60" height="20">
+      <div class="flow-edge-label">{{ label }}</div>
+    </foreignObject>
+  </g>
+</template>
+
+<style scoped>
+.flow-edge-label{background:#fff;color:#666;font-size:12px;padding:2px 4px;text-align:center}
+</style>

package/dist/components/edges/StepEdge.vue.d.ts

@@ -0,0 +1,22 @@
+import type { Position, EdgeStyle } from '../../types';
+interface Props {
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    sourcePosition?: Position;
+    targetPosition?: Position;
+    style?: EdgeStyle;
+    selected?: boolean;
+    animated?: boolean;
+    label?: string;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+    style: EdgeStyle;
+    selected: boolean;
+    animated: boolean;
+    sourcePosition: Position;
+    targetPosition: Position;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/edges/index.cjs

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BaseEdge", {
+  enumerable: true,
+  get: function () {
+    return _BaseEdge.default;
+  }
+});
+Object.defineProperty(exports, "BezierEdge", {
+  enumerable: true,
+  get: function () {
+    return _BezierEdge.default;
+  }
+});
+Object.defineProperty(exports, "DataFlowEdge", {
+  enumerable: true,
+  get: function () {
+    return _DataFlowEdge.default;
+  }
+});
+Object.defineProperty(exports, "SmoothEdge", {
+  enumerable: true,
+  get: function () {
+    return _SmoothEdge.default;
+  }
+});
+Object.defineProperty(exports, "StepEdge", {
+  enumerable: true,
+  get: function () {
+    return _StepEdge.default;
+  }
+});
+var _BaseEdge = _interopRequireDefault(require("./BaseEdge.vue"));
+var _SmoothEdge = _interopRequireDefault(require("./SmoothEdge.vue"));
+var _StepEdge = _interopRequireDefault(require("./StepEdge.vue"));
+var _BezierEdge = _interopRequireDefault(require("./BezierEdge.vue"));
+var _DataFlowEdge = _interopRequireDefault(require("./DataFlowEdge.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/edges/index.d.ts

@@ -0,0 +1,5 @@
+export { default as BaseEdge } from './BaseEdge.vue';
+export { default as SmoothEdge } from './SmoothEdge.vue';
+export { default as StepEdge } from './StepEdge.vue';
+export { default as BezierEdge } from './BezierEdge.vue';
+export { default as DataFlowEdge } from './DataFlowEdge.vue';

package/dist/components/edges/index.mjs

@@ -0,0 +1,5 @@
+export { default as BaseEdge } from "./BaseEdge.vue";
+export { default as SmoothEdge } from "./SmoothEdge.vue";
+export { default as StepEdge } from "./StepEdge.vue";
+export { default as BezierEdge } from "./BezierEdge.vue";
+export { default as DataFlowEdge } from "./DataFlowEdge.vue";

package/dist/components/nodes/BaseNode.d.vue.ts

@@ -0,0 +1,25 @@
+import type { Node, NodeHandle, NodeStyle } from '../../types';
+interface Props {
+    id: string;
+    type: string;
+    data: Node['data'];
+    selected: boolean;
+    dragging: boolean;
+    connectable: boolean;
+    style?: NodeStyle;
+    handles?: NodeHandle[];
+    label?: string;
+    labelColor?: string;
+    descriptionColor?: string;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+    style: NodeStyle;
+    connectable: boolean;
+    selected: boolean;
+    dragging: boolean;
+    labelColor: string;
+    descriptionColor: string;
+    handles: NodeHandle[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/nodes/BaseNode.vue

@@ -0,0 +1,93 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  id: { type: String, required: true },
+  type: { type: String, required: true },
+  data: { type: null, required: true },
+  selected: { type: Boolean, required: true, default: false },
+  dragging: { type: Boolean, required: true, default: false },
+  connectable: { type: Boolean, required: true, default: true },
+  style: { type: Object, required: false, default: () => ({}) },
+  handles: { type: Array, required: false, default: () => [
+    { type: "source", position: "right", isConnectable: true },
+    { type: "target", position: "left", isConnectable: true }
+  ] },
+  label: { type: String, required: false, default: "" },
+  labelColor: { type: String, required: false, default: "" },
+  descriptionColor: { type: String, required: false, default: "" }
+});
+const nodeStyle = computed(() => {
+  const base = {
+    padding: "var(--flow-node-padding, 10px)",
+    borderRadius: "var(--flow-node-border-radius, 8px)",
+    border: "1px solid var(--flow-node-border, #dcdfe6)",
+    backgroundColor: "var(--flow-node-background, #fff)",
+    minWidth: "100px",
+    textAlign: "center",
+    transition: "all 0.2s"
+  };
+  if (props.selected) {
+    base.border = "2px solid var(--flow-node-selected-border, #409eff)";
+    base.boxShadow = "var(--flow-node-selected-shadow, 0 0 8px rgba(64, 158, 255, 0.4))";
+  }
+  if (props.dragging) {
+    base.opacity = "var(--flow-node-dragging-opacity, 0.8)";
+    base.cursor = "grabbing";
+  }
+  return { ...base, ...props.style };
+});
+function getHandleStyle(handle) {
+  const style = {
+    width: "var(--flow-handle-size, 12px)",
+    height: "var(--flow-handle-size, 12px)",
+    backgroundColor: "var(--flow-handle-background, #fff)",
+    border: "2px solid var(--flow-handle-border, #409eff)",
+    borderRadius: "var(--flow-handle-border-radius, 50%)",
+    cursor: "crosshair"
+  };
+  if (handle.style) {
+    Object.assign(style, handle.style);
+  }
+  return style;
+}
+</script>
+
+<template>
+  <div :class="['flow-base-node', {
+  selected,
+  dragging
+}]" :style="nodeStyle">
+    <div
+      class="flow-node-label"
+      :style="{
+  color: labelColor || data?.labelColor || 'var(--flow-node-label-color, #303133)'
+}"
+    >
+      {{ label || data?.label || type }}
+    </div>
+    <div
+      v-if="data?.description"
+      class="flow-node-description"
+      :style="{
+  color: descriptionColor || data?.descriptionColor || 'var(--flow-node-description-color, #909399)'
+}"
+    >
+      {{ data.description }}
+    </div>
+    <template v-for="handle in handles" :key="`${handle.type}-${handle.position}`">
+      <div
+        v-if="handle.isConnectable !== false && connectable"
+        class="flow-handle"
+        :class="[`flow-handle-${handle.type}`, `flow-handle-position-${handle.position}`]"
+        :style="getHandleStyle(handle)"
+        :data-handle-id="handle.id"
+        :data-handle-type="handle.type"
+        :data-handle-position="handle.position"
+      />
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.flow-base-node{box-sizing:border-box;cursor:pointer;display:inline-block;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.flow-base-node.selected{z-index:10}.flow-base-node.dragging{cursor:grabbing;z-index:100}.flow-node-label{color:var(--flow-node-label-color,#303133);font-family:inherit;font-size:var(--flow-node-label-font-size,14px);font-weight:var(--flow-node-label-font-weight,500)}.flow-node-description{color:var(--flow-node-description-color,#909399);font-size:var(--flow-node-description-font-size,12px);margin-top:4px}.flow-handle{position:absolute;z-index:20}.flow-handle:hover{background-color:var(--flow-handle-hover-background,var(--flow-handle-border,#409eff))}.flow-handle-position-top{left:50%;top:-6px;transform:translateX(-50%)}.flow-handle-position-right{right:-6px;top:50%;transform:translateY(-50%)}.flow-handle-position-bottom{bottom:-6px;left:50%;transform:translateX(-50%)}.flow-handle-position-left{left:-6px;top:50%;transform:translateY(-50%)}
+</style>

package/dist/components/nodes/BaseNode.vue.d.ts

@@ -0,0 +1,25 @@
+import type { Node, NodeHandle, NodeStyle } from '../../types';
+interface Props {
+    id: string;
+    type: string;
+    data: Node['data'];
+    selected: boolean;
+    dragging: boolean;
+    connectable: boolean;
+    style?: NodeStyle;
+    handles?: NodeHandle[];
+    label?: string;
+    labelColor?: string;
+    descriptionColor?: string;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+    style: NodeStyle;
+    connectable: boolean;
+    selected: boolean;
+    dragging: boolean;
+    labelColor: string;
+    descriptionColor: string;
+    handles: NodeHandle[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;