@antv/infographic 0.2.6 → 0.2.8

package/esm/designs/structures/relation-dagre-flow.js

@@ -0,0 +1,497 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic/jsx-runtime";
+import { DagreLayout } from '@antv/layout';
+import { Defs, getElementBounds, Group, Path, Polygon, Text } from '../../jsx';
+import { BtnAdd, BtnsGroup, ItemsGroup } from '../components';
+import { FlexLayout } from '../layouts';
+import { getColorPrimary, getPaletteColor, getThemeColors } from '../utils';
+import { registerStructure } from './registry';
+const DEFAULT_NODE_SEP = 50;
+const DEFAULT_RANK_SEP = 70;
+const DEFAULT_EDGE_SEP = 10;
+const DEFAULT_EDGE_WIDTH = 2;
+const DEFAULT_PADDING = 30;
+const checkUndirectedCycle = (nodeIds, edges) => {
+    const adj = new Map();
+    nodeIds.forEach((id) => adj.set(id, []));
+    for (const edge of edges) {
+        if (edge.source === edge.target)
+            return true;
+        adj.get(edge.source)?.push({ target: edge.target, edgeId: edge.id });
+        adj.get(edge.target)?.push({ target: edge.source, edgeId: edge.id });
+    }
+    const visited = new Set();
+    const dfs = (u, parentEdgeId) => {
+        visited.add(u);
+        const neighbors = adj.get(u) || [];
+        for (const { target: v, edgeId } of neighbors) {
+            if (edgeId === parentEdgeId)
+                continue;
+            if (visited.has(v))
+                return true;
+            if (dfs(v, edgeId))
+                return true;
+        }
+        return false;
+    };
+    for (const node of nodeIds) {
+        if (!visited.has(node)) {
+            if (dfs(node, null))
+                return true;
+        }
+    }
+    return false;
+};
+export const RelationDagreFlow = (props) => {
+    const { Title, Item, data, rankdir = 'TB', nodesep = DEFAULT_NODE_SEP, ranksep = DEFAULT_RANK_SEP, edgesep = DEFAULT_EDGE_SEP, edgeWidth = DEFAULT_EDGE_WIDTH, showConnections = true, edgeColorMode = 'gradient', edgeStyle = 'solid', edgeDashPattern = '5,5', edgeCornerRadius = 12, edgeRouting = 'orth', showArrow = true, arrowType = 'triangle', padding = DEFAULT_PADDING, edgeAnimation = 'none', edgeAnimationSpeed = 1, options, } = props;
+    const { title, desc, items = [] } = data;
+    const titleContent = Title ? _jsx(Title, { title: title, desc: desc }) : null;
+    if (!Item || items.length === 0) {
+        return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, _jsx(Group, { children: _jsx(BtnAdd, { indexes: [0], x: 0, y: 0 }) })] }));
+    }
+    const nodeMetaMap = new Map();
+    const nodeSizeMap = new Map();
+    const nodeColorMap = new Map();
+    const nodeIdsByIndex = new Map();
+    const nodeIdSet = new Set();
+    const colorGroupIndexMap = new Map();
+    let nextColorGroupIndex = 0;
+    const nodes = items.map((item, index) => {
+        const datum = item;
+        const id = String(datum.id ?? index);
+        const indexes = [index];
+        let primary;
+        const groupKey = String(datum.group ?? '');
+        if (groupKey) {
+            let groupIndex = colorGroupIndexMap.get(groupKey);
+            if (groupIndex == null) {
+                groupIndex = nextColorGroupIndex;
+                colorGroupIndexMap.set(groupKey, groupIndex);
+                nextColorGroupIndex += 1;
+            }
+            primary = getPaletteColor(options, [groupIndex]);
+        }
+        else {
+            primary = getPaletteColor(options, indexes);
+        }
+        const themeColors = primary
+            ? getThemeColors({ colorPrimary: primary }, options)
+            : undefined;
+        if (primary) {
+            nodeColorMap.set(id, primary);
+        }
+        const bounds = getElementBounds(_jsx(Item, { indexes: indexes, data: data, datum: datum, positionH: "center", positionV: "middle", themeColors: themeColors }));
+        nodeSizeMap.set(id, bounds);
+        nodeMetaMap.set(id, { id, indexes, datum, themeColors });
+        nodeIdsByIndex.set(index, id);
+        nodeIdSet.add(id);
+        return { id, parentId: datum.parentId };
+    });
+    const relations = data.relations ?? [];
+    const resolveNodeId = (value) => {
+        if (value == null)
+            return null;
+        const direct = String(value);
+        if (nodeIdSet.has(direct))
+            return direct;
+        const asIndex = Number(value);
+        if (!Number.isNaN(asIndex)) {
+            const mapped = nodeIdsByIndex.get(asIndex);
+            if (mapped)
+                return mapped;
+        }
+        return null;
+    };
+    const edges = relations
+        .map((relation, index) => {
+        const source = resolveNodeId(relation.from);
+        const target = resolveNodeId(relation.to);
+        if (!source || !target)
+            return null;
+        return {
+            id: relation.id ? String(relation.id) : `edge-${index}`,
+            source,
+            target,
+            relation,
+        };
+    })
+        .filter(Boolean);
+    const hasCycle = checkUndirectedCycle(Array.from(nodeIdSet), edges);
+    const finalEdgeRouting = hasCycle ? 'dagre' : edgeRouting;
+    const layout = new DagreLayout({
+        rankdir,
+        nodesep,
+        ranksep,
+        edgesep,
+        controlPoints: true,
+        nodeSize: (node) => {
+            const id = String(node.id ?? '');
+            const bounds = nodeSizeMap.get(id);
+            return bounds ? [bounds.width, bounds.height] : [0, 0];
+        },
+    });
+    layout.execute({ nodes, edges });
+    const nodeLayouts = [];
+    layout.forEachNode((node) => {
+        const id = String(node.id);
+        const meta = nodeMetaMap.get(id);
+        if (!meta)
+            return;
+        const bounds = nodeSizeMap.get(id);
+        const width = bounds?.width ?? 0;
+        const height = bounds?.height ?? 0;
+        const x = (node.x ?? 0) - width / 2;
+        const y = (node.y ?? 0) - height / 2;
+        nodeLayouts.push({
+            ...meta,
+            x,
+            y,
+            width,
+            height,
+            centerX: x + width / 2,
+            centerY: y + height / 2,
+        });
+    });
+    if (nodeLayouts.length === 0) {
+        return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, _jsx(Group, { children: _jsx(BtnAdd, { indexes: [0], x: 0, y: 0 }) })] }));
+    }
+    const minX = Math.min(...nodeLayouts.map((node) => node.x));
+    const minY = Math.min(...nodeLayouts.map((node) => node.y));
+    const offsetX = padding - minX;
+    const offsetY = padding - minY;
+    const nodeLayoutById = new Map();
+    const itemElements = [];
+    nodeLayouts.forEach((node) => {
+        const displayX = node.x + offsetX;
+        const displayY = node.y + offsetY;
+        const positionH = rankdir === 'LR' ? 'normal' : rankdir === 'RL' ? 'flipped' : 'center';
+        const positionV = rankdir === 'TB' ? 'normal' : rankdir === 'BT' ? 'flipped' : 'middle';
+        itemElements.push(_jsx(Item, { indexes: node.indexes, datum: node.datum, data: data, x: displayX, y: displayY, positionH: positionH, positionV: positionV, themeColors: node.themeColors }));
+        nodeLayoutById.set(node.id, {
+            ...node,
+            x: displayX,
+            y: displayY,
+            centerX: displayX + node.width / 2,
+            centerY: displayY + node.height / 2,
+        });
+    });
+    const defsElements = [];
+    const decorElements = [];
+    if (showConnections) {
+        const defaultStroke = getColorPrimary(options);
+        const themeColors = getThemeColors(options.themeConfig, options);
+        const labelBackground = themeColors?.colorBg ?? '#ffffff';
+        const labelTextColor = themeColors?.colorText ?? defaultStroke;
+        const arrowSize = Math.max(10, edgeWidth * 4);
+        const isVertical = rankdir === 'TB' || rankdir === 'BT';
+        const enableAnimation = edgeAnimation === 'ant-line';
+        const animationDashArray = enableAnimation ? edgeDashPattern : '';
+        const staticDashArray = !enableAnimation && edgeStyle === 'dashed' ? edgeDashPattern : '';
+        const actualDashArray = enableAnimation
+            ? animationDashArray
+            : staticDashArray;
+        const dashPatternLength = enableAnimation
+            ? animationDashArray
+                .split(',')
+                .reduce((sum, val) => sum + parseFloat(val.trim() || '0'), 0)
+            : 0;
+        const animationDuration = enableAnimation && dashPatternLength > 0
+            ? `${dashPatternLength / (edgeAnimationSpeed * 10)}s`
+            : '1s';
+        const straightCornerRadius = edgeCornerRadius;
+        const createStraightPath = (points, dx, dy) => points
+            .map(([x, y], index) => {
+            const prefix = index === 0 ? 'M' : 'L';
+            return `${prefix} ${x + dx} ${y + dy}`;
+        })
+            .join(' ');
+        const createRoundedPath = (points, radius, dx, dy) => {
+            if (points.length < 2)
+                return '';
+            const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+            const toPoint = ([x, y]) => ({
+                x: x + dx,
+                y: y + dy,
+            });
+            const output = [];
+            const first = toPoint(points[0]);
+            output.push(`M ${first.x} ${first.y}`);
+            if (points.length === 2) {
+                const last = toPoint(points[1]);
+                output.push(`L ${last.x} ${last.y}`);
+                return output.join(' ');
+            }
+            for (let i = 1; i < points.length - 1; i += 1) {
+                const prev = points[i - 1];
+                const curr = points[i];
+                const next = points[i + 1];
+                const v0x = curr[0] - prev[0];
+                const v0y = curr[1] - prev[1];
+                const v1x = next[0] - curr[0];
+                const v1y = next[1] - curr[1];
+                const d0 = Math.hypot(v0x, v0y);
+                const d1 = Math.hypot(v1x, v1y);
+                if (d0 === 0 || d1 === 0) {
+                    const currPoint = toPoint(curr);
+                    output.push(`L ${currPoint.x} ${currPoint.y}`);
+                    continue;
+                }
+                const r = clamp(radius, 0, Math.min(d0, d1) / 2);
+                if (r === 0) {
+                    const currPoint = toPoint(curr);
+                    output.push(`L ${currPoint.x} ${currPoint.y}`);
+                    continue;
+                }
+                const u0x = v0x / d0;
+                const u0y = v0y / d0;
+                const u1x = v1x / d1;
+                const u1y = v1y / d1;
+                const start = toPoint([curr[0] - u0x * r, curr[1] - u0y * r]);
+                const end = toPoint([curr[0] + u1x * r, curr[1] + u1y * r]);
+                output.push(`L ${start.x} ${start.y}`);
+                const currPoint = toPoint(curr);
+                output.push(`Q ${currPoint.x} ${currPoint.y} ${end.x} ${end.y}`);
+            }
+            const last = toPoint(points[points.length - 1]);
+            output.push(`L ${last.x} ${last.y}`);
+            return output.join(' ');
+        };
+        const createArrowElements = (x, y, angle, type, fillColor) => {
+            const ux = Math.cos(angle);
+            const uy = Math.sin(angle);
+            const px = -uy;
+            const py = ux;
+            const length = arrowSize;
+            const halfWidth = arrowSize * 0.55;
+            if (type === 'arrow') {
+                const leftX = x - ux * length + px * halfWidth;
+                const leftY = y - uy * length + py * halfWidth;
+                const rightX = x - ux * length - px * halfWidth;
+                const rightY = y - uy * length - py * halfWidth;
+                return [
+                    _jsx(Path, { d: `M ${leftX} ${leftY} L ${x} ${y} L ${rightX} ${rightY}`, stroke: fillColor, strokeWidth: Math.max(1.5, edgeWidth), strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }),
+                ];
+            }
+            if (type === 'diamond') {
+                const diamondLength = length * 1.25;
+                const diamondWidth = halfWidth * 0.75;
+                const midX = x - ux * diamondLength * 0.5;
+                const midY = y - uy * diamondLength * 0.5;
+                const diamondPoints = [
+                    { x, y },
+                    { x: midX + px * diamondWidth, y: midY + py * diamondWidth },
+                    { x: x - ux * diamondLength, y: y - uy * diamondLength },
+                    { x: midX - px * diamondWidth, y: midY - py * diamondWidth },
+                ];
+                return [
+                    _jsx(Polygon, { points: diamondPoints, fill: fillColor, stroke: fillColor, strokeWidth: Math.max(1, edgeWidth * 0.8) }),
+                ];
+            }
+            const trianglePoints = [
+                { x, y },
+                {
+                    x: x - ux * length + px * halfWidth,
+                    y: y - uy * length + py * halfWidth,
+                },
+                {
+                    x: x - ux * length - px * halfWidth,
+                    y: y - uy * length - py * halfWidth,
+                },
+            ];
+            return [
+                _jsx(Polygon, { points: trianglePoints, fill: fillColor, stroke: fillColor, strokeWidth: Math.max(1, edgeWidth * 0.8) }),
+            ];
+        };
+        const getMidPoint = (points) => {
+            if (points.length === 0)
+                return null;
+            if (points.length === 1)
+                return points[0];
+            let total = 0;
+            const segments = [];
+            for (let i = 0; i < points.length - 1; i += 1) {
+                const start = points[i];
+                const end = points[i + 1];
+                const length = Math.hypot(end[0] - start[0], end[1] - start[1]);
+                segments.push({ length, start, end });
+                total += length;
+            }
+            if (total === 0)
+                return points[0];
+            let target = total / 2;
+            for (let i = 0; i < segments.length; i += 1) {
+                const segment = segments[i];
+                if (target <= segment.length || i === segments.length - 1) {
+                    const ratio = segment.length === 0
+                        ? 0
+                        : Math.max(0, Math.min(1, target / segment.length));
+                    return [
+                        segment.start[0] + (segment.end[0] - segment.start[0]) * ratio,
+                        segment.start[1] + (segment.end[1] - segment.start[1]) * ratio,
+                    ];
+                }
+                target -= segment.length;
+            }
+            return points[Math.floor(points.length / 2)];
+        };
+        const getOrthEdgeEndpoints = (sourceId, targetId) => {
+            const source = nodeLayoutById.get(sourceId);
+            const target = nodeLayoutById.get(targetId);
+            if (!source || !target)
+                return null;
+            if (rankdir === 'TB') {
+                return {
+                    start: [source.centerX, source.y + source.height],
+                    end: [target.centerX, target.y],
+                };
+            }
+            if (rankdir === 'BT') {
+                return {
+                    start: [source.centerX, source.y],
+                    end: [target.centerX, target.y + target.height],
+                };
+            }
+            if (rankdir === 'LR') {
+                return {
+                    start: [source.x + source.width, source.centerY],
+                    end: [target.x, target.centerY],
+                };
+            }
+            return {
+                start: [source.x, source.centerY],
+                end: [target.x + target.width, target.centerY],
+            };
+        };
+        const getOrthEdgePoints = (sourceId, targetId) => {
+            const endpoints = getOrthEdgeEndpoints(sourceId, targetId);
+            if (!endpoints)
+                return null;
+            const { start, end } = endpoints;
+            if (isVertical) {
+                const midY = start[1] + (end[1] - start[1]) / 2;
+                return {
+                    start,
+                    end,
+                    points: [start, [start[0], midY], [end[0], midY], end],
+                };
+            }
+            const midX = start[0] + (end[0] - start[0]) / 2;
+            return {
+                start,
+                end,
+                points: [start, [midX, start[1]], [midX, end[1]], end],
+            };
+        };
+        layout.forEachEdge((edge) => {
+            const normalizePoints = (rawPoints) => {
+                if (!Array.isArray(rawPoints))
+                    return [];
+                return rawPoints
+                    .map((point) => {
+                    if (!point)
+                        return null;
+                    if (Array.isArray(point) && point.length >= 2) {
+                        return [Number(point[0]), Number(point[1])];
+                    }
+                    return null;
+                })
+                    .filter((point) => !!point && Number.isFinite(point[0]) && Number.isFinite(point[1]));
+            };
+            const fallbackPoints = () => {
+                const source = nodeLayoutById.get(String(edge.source));
+                const target = nodeLayoutById.get(String(edge.target));
+                if (!source || !target)
+                    return [];
+                return [
+                    [source.centerX - offsetX, source.centerY - offsetY],
+                    [target.centerX - offsetX, target.centerY - offsetY],
+                ];
+            };
+            const useOrthRouting = finalEdgeRouting === 'orth';
+            const orthEdge = useOrthRouting
+                ? getOrthEdgePoints(String(edge.source), String(edge.target))
+                : null;
+            const normalized = useOrthRouting ? [] : normalizePoints(edge.points);
+            const points = useOrthRouting
+                ? (orthEdge?.points ?? [])
+                : normalized.length
+                    ? normalized
+                    : fallbackPoints();
+            if (!points.length)
+                return;
+            const pointsOffsetX = useOrthRouting ? 0 : offsetX;
+            const pointsOffsetY = useOrthRouting ? 0 : offsetY;
+            const startPoint = useOrthRouting
+                ? (orthEdge?.start ?? points[0])
+                : points[0];
+            const endPoint = useOrthRouting
+                ? (orthEdge?.end ?? points[points.length - 1])
+                : points[points.length - 1];
+            const relation = edge
+                ._original?.relation;
+            const sourceColor = nodeColorMap.get(String(edge.source)) ?? defaultStroke;
+            const targetColor = nodeColorMap.get(String(edge.target)) ?? defaultStroke;
+            const gradientKey = `edge-gradient-${String(sourceColor)}-${String(targetColor)}`.replace(/[^a-zA-Z0-9_-]/g, '');
+            const edgeStroke = edgeColorMode === 'gradient' ? `url(#${gradientKey})` : defaultStroke;
+            let pathD = '';
+            if (straightCornerRadius > 0) {
+                pathD = createRoundedPath(points, straightCornerRadius, pointsOffsetX, pointsOffsetY);
+            }
+            else {
+                pathD = createStraightPath(points, pointsOffsetX, pointsOffsetY);
+            }
+            if (!pathD)
+                return;
+            const pathElement = (_jsx(Path, { d: pathD, stroke: edgeStroke, strokeWidth: edgeWidth, strokeDasharray: actualDashArray, fill: "none", "data-element-type": "shape", children: enableAnimation && (_jsx("animate", { attributeName: "stroke-dashoffset", from: String(dashPatternLength), to: "0", dur: animationDuration, repeatCount: "indefinite" })) }));
+            decorElements.push(pathElement);
+            if (edgeColorMode === 'gradient') {
+                const start = startPoint;
+                const end = endPoint;
+                defsElements.push(_jsxs("linearGradient", { id: gradientKey, gradientUnits: "userSpaceOnUse", x1: start[0] + pointsOffsetX, y1: start[1] + pointsOffsetY, x2: end[0] + pointsOffsetX, y2: end[1] + pointsOffsetY, children: [_jsx("stop", { offset: "0%", stopColor: sourceColor }), _jsx("stop", { offset: "100%", stopColor: targetColor })] }));
+            }
+            if (relation?.label) {
+                let labelPoint = null;
+                const midPoint = getMidPoint(points);
+                if (midPoint) {
+                    labelPoint = [
+                        midPoint[0] + pointsOffsetX,
+                        midPoint[1] + pointsOffsetY,
+                    ];
+                }
+                if (labelPoint) {
+                    const labelText = String(relation.label);
+                    const labelBounds = getElementBounds(_jsx(Text, { fontSize: 14, fontWeight: "normal", children: labelText }));
+                    const labelX = labelPoint[0] - labelBounds.width / 2;
+                    const labelY = labelPoint[1] - labelBounds.height / 2;
+                    decorElements.push(_jsx(Text, { x: labelX, y: labelY, width: labelBounds.width, height: labelBounds.height, fontSize: 14, fontWeight: "normal", alignHorizontal: "center", alignVertical: "middle", fill: labelTextColor, backgroundColor: labelBackground, children: labelText }));
+                }
+            }
+            const effectiveShowArrow = relation?.showArrow ?? showArrow;
+            const direction = relation?.direction ?? 'forward';
+            const edgeArrowType = relation?.arrowType ?? arrowType;
+            const lastIndex = points.length - 1;
+            if (effectiveShowArrow && points.length > 1) {
+                if (direction === 'forward' || direction === 'both') {
+                    const head = points[lastIndex];
+                    const tail = points[lastIndex - 1];
+                    const angle = Math.atan2(head[1] - tail[1], head[0] - tail[0]);
+                    const arrowFill = edgeColorMode === 'gradient' ? targetColor : defaultStroke;
+                    const arrowElements = createArrowElements(head[0] + pointsOffsetX, head[1] + pointsOffsetY, angle, edgeArrowType, arrowFill);
+                    decorElements.push(...arrowElements);
+                }
+                if (direction === 'both') {
+                    const head = points[0];
+                    const tail = points[1];
+                    const angle = Math.atan2(head[1] - tail[1], head[0] - tail[0]);
+                    const arrowFill = edgeColorMode === 'gradient' ? sourceColor : defaultStroke;
+                    const arrowElements = createArrowElements(head[0] + pointsOffsetX, head[1] + pointsOffsetY, angle, edgeArrowType, arrowFill);
+                    decorElements.push(...arrowElements);
+                }
+            }
+        });
+    }
+    return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, _jsxs(Group, { children: [_jsx(Defs, { children: defsElements }), _jsx(Group, { width: 0, height: 0, children: decorElements }), _jsx(ItemsGroup, { children: itemElements }), _jsx(BtnsGroup, {})] })] }));
+};
+registerStructure('relation-dagre-flow', {
+    component: RelationDagreFlow,
+    composites: ['title', 'item'],
+});

package/esm/designs/structures/sequence-funnel.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentType } from '../../jsx';
+import type { BaseStructureProps } from './types';
+export interface SequenceFunnelProps extends BaseStructureProps {
+    gap?: number;
+    width?: number;
+    funnelWidth?: number;
+    itemHeight?: number;
+    minBottomRatio?: number;
+}
+export declare const SequenceFunnel: ComponentType<SequenceFunnelProps>;

package/esm/designs/structures/sequence-funnel.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic/jsx-runtime";
+/**
+ * 序列漏斗结构（SequenceFunnel）
+ * 用途：
+ * - 在左侧渲染分层漏斗形状（倒置梯形堆叠），右侧渲染对应的 item 卡片与图标
+ * - 形状上宽下窄，底部平滑（梯形），卡片背景插入漏斗下方
+ */
+import roundPolygon, { getSegments } from 'round-polygon';
+import tinycolor from 'tinycolor2';
+import { Defs, Group, Polygon, Rect } from '../../jsx';
+import { BtnAdd, BtnRemove, BtnsGroup, ItemIcon, ItemsGroup, } from '../components';
+import { FlexLayout } from '../layouts';
+import { getPaletteColor, getThemeColors } from '../utils';
+import { registerStructure } from './registry';
+// Constants
+const FUNNEL_CORNER_RADIUS = 6;
+const ICON_SIZE = 32;
+const FUNNEL_LAYER_HEIGHT_RATIO = 1.25;
+const OVERLAP_DIST = 25;
+const TEXT_GAP = 15;
+export const SequenceFunnel = (props) => {
+    const { Title, Item, data, gap = 10, width = 700, funnelWidth, itemHeight = 60, minBottomRatio = 0.25, // 默认底部保留 25% 的宽度，形成梯形
+    options, } = props;
+    const { title, desc, items = [] } = data;
+    const titleContent = Title ? _jsx(Title, { title: title, desc: desc }) : null;
+    if (items.length === 0) {
+        return (_jsx(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: titleContent }));
+    }
+    const themeColors = getThemeColors(options.themeConfig);
+    // 计算各区域尺寸
+    const actualFunnelWidth = funnelWidth ?? width * 0.55; // 稍微调窄一点漏斗，给右侧留更多空间
+    const itemAreaWidth = width - actualFunnelWidth;
+    // 漏斗层高度
+    const funnelLayerHeight = itemHeight * FUNNEL_LAYER_HEIGHT_RATIO;
+    const totalHeight = items.length * funnelLayerHeight + (items.length - 1) * gap;
+    // 计算底部的最小像素宽度
+    const minFunnelPixelWidth = actualFunnelWidth * minBottomRatio;
+    const elements = items.map((item, index) => {
+        const indexes = [index];
+        // 获取颜色
+        const color = getPaletteColor(options, [index]) || themeColors.colorPrimary;
+        // 1. 计算当前层的梯形形状
+        // 使用线性插值，从 actualFunnelWidth 收缩到 minFunnelPixelWidth
+        const { points, topWidth } = calculateTrapezoidSegment(actualFunnelWidth, minFunnelPixelWidth, funnelLayerHeight, gap, totalHeight, index);
+        // 圆角处理
+        const rounded = roundPolygon(points, FUNNEL_CORNER_RADIUS);
+        const segments = getSegments(rounded, 'AMOUNT', 10);
+        // 坐标计算
+        const funnelCenterX = actualFunnelWidth / 2;
+        const funnelY = index * (funnelLayerHeight + gap);
+        // 2. 背景与 Item 的位置计算
+        // 在漏斗（倒梯形）中，顶边（topWidth）总是比底边（bottomWidth）宽
+        // 所以右侧边缘的最外点是 topWidth 的一半
+        const rightTopX = funnelCenterX + topWidth / 2;
+        // 背景卡片：
+        // X 轴起点：从漏斗最宽处向左回缩 overlapDist，形成“插入”效果
+        const backgroundX = rightTopX - OVERLAP_DIST;
+        // 宽度：填满剩余空间，但要补上左侧回缩的距离
+        const backgroundWidth = itemAreaWidth + OVERLAP_DIST - 10; // -10 用于右侧留白
+        const backgroundYOffset = (funnelLayerHeight - itemHeight) / 2;
+        const backgroundY = funnelY + backgroundYOffset;
+        // 文本内容 (Item)：
+        // X 轴起点：不应该跟着背景向左缩，而应该在漏斗边缘右侧，避免被漏斗遮挡
+        const itemX = rightTopX + TEXT_GAP;
+        const itemWidth = backgroundWidth - OVERLAP_DIST - TEXT_GAP;
+        const itemY = backgroundY;
+        // 图标位置
+        const iconX = funnelCenterX - ICON_SIZE / 2;
+        const iconY = funnelY + funnelLayerHeight / 2 - ICON_SIZE / 2;
+        const funnelColorId = `${color.replace('#', '')}-funnel-${index}`;
+        return {
+            background: (_jsx(Rect, { x: backgroundX, y: backgroundY, width: backgroundWidth, height: itemHeight, ry: "8" // 背景圆角稍微大一点，显得柔和
+                , fill: tinycolor(color).setAlpha(0.1).toRgbString(), "data-element-type": "shape" })),
+            funnel: [
+                _jsx(Defs, { children: _jsxs("linearGradient", { id: funnelColorId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", stopColor: tinycolor(color).lighten(10).toString() }), _jsx("stop", { offset: "100%", stopColor: color })] }) }),
+                _jsx(Polygon, { points: segments, fill: `url(#${funnelColorId})`, y: funnelY, "data-element-type": "shape", 
+                    // 添加轻微阴影效果增加层次感（可选，依赖环境支持 filter）
+                    style: { filter: 'drop-shadow(0px 2px 3px rgba(0,0,0,0.15))' } }),
+            ],
+            icon: (_jsx(ItemIcon, { indexes: indexes, x: iconX, y: iconY, size: ICON_SIZE, fill: "#fff" })),
+            item: (_jsx(Item, { indexes: indexes, datum: item, data: data, x: itemX, y: itemY, width: itemWidth, height: itemHeight, positionV: "middle" })),
+            btnRemove: (_jsx(BtnRemove, { indexes: indexes, x: backgroundX + backgroundWidth, y: backgroundY })),
+        };
+    });
+    const btnAdd = (_jsx(BtnAdd, { indexes: [items.length], x: width / 2, y: totalHeight + 10 }));
+    return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, _jsxs(Group, { width: width, height: totalHeight + 40, children: [_jsx(Group, { children: elements.map((element) => element.background) }), _jsx(Group, { children: elements.flatMap((element) => element.funnel) }), _jsx(Group, { children: elements.map((element) => element.icon) }), _jsx(ItemsGroup, { children: elements.map((element) => element.item) }), _jsxs(BtnsGroup, { children: [elements.map((element) => element.btnRemove), btnAdd] })] })] }));
+};
+// 计算梯形分段逻辑
+function calculateTrapezoidSegment(maxWidth, minWidth, layerHeight, gap, totalHeight, index) {
+    const centerX = maxWidth / 2;
+    // 当前层顶部和底部的 Y 坐标（相对于总高度）
+    const currentTopY = index * (layerHeight + gap);
+    const currentBottomY = currentTopY + layerHeight;
+    // 线性插值计算宽度
+    // Width = MaxWidth - (MaxWidth - MinWidth) * (Y / TotalHeight)
+    const widthDiff = maxWidth - minWidth;
+    const topWidth = maxWidth - widthDiff * (currentTopY / totalHeight);
+    const bottomWidth = maxWidth - widthDiff * (currentBottomY / totalHeight);
+    // 生成四个顶点 (梯形)
+    const p1 = { x: centerX - topWidth / 2, y: 0 }; // 左上
+    const p2 = { x: centerX + topWidth / 2, y: 0 }; // 右上
+    const p3 = { x: centerX + bottomWidth / 2, y: layerHeight }; // 右下
+    const p4 = { x: centerX - bottomWidth / 2, y: layerHeight }; // 左下
+    return { points: [p1, p2, p3, p4], topWidth, bottomWidth };
+}
+// 注册
+registerStructure('sequence-funnel', {
+    component: SequenceFunnel,
+    composites: ['title', 'item'],
+});

package/esm/designs/utils/hierarchy-color.d.ts

@@ -1,7 +1,7 @@
 /**
  * 层级结构着色模式类型
  */
-export type HierarchyColorMode = 'level' | 'branch' | 'node' | 'node-flat';
+export type HierarchyColorMode = 'level' | 'branch' | 'node' | 'node-flat' | 'group';
 /**
  * 层级节点信息接口
  */