From f2cfe4acb213c5c61a60fc993fb8b30cd0ff0bc4 Mon Sep 17 00:00:00 2001
From: Aaron <antvaaron@gmail.com>
Date: Thu, 30 Oct 2025 20:20:46 +0800
Subject: [PATCH 1/4] refactor(infographic): items registration add values

---
 .../src/designs/items/BadgeCard.tsx           |  5 +-
 .../src/designs/items/BulletText.tsx          |  5 +-
 .../src/designs/items/CandyCardLite.tsx       |  5 +-
 .../src/designs/items/ChartColumn.tsx         |  5 +-
 .../src/designs/items/CircleNode.tsx          |  5 +-
 .../src/designs/items/CircularProgress.tsx    |  5 +-
 .../src/designs/items/CompactCard.tsx         |  5 +-
 .../src/designs/items/DoneList.tsx            |  5 +-
 .../src/designs/items/HorizontalIconArrow.tsx |  5 +-
 .../src/designs/items/HorizontalIconLine.tsx  |  5 +-
 .../src/designs/items/IconBadge.tsx           |  5 +-
 .../src/designs/items/IndexedCard.tsx         |  5 +-
 .../src/designs/items/LCornerCard.tsx         |  5 +-
 .../src/designs/items/LetterCard.tsx          |  5 +-
 .../src/designs/items/PillBadge.tsx           |  5 +-
 .../src/designs/items/PlainText.tsx           |  5 +-
 .../src/designs/items/ProgressCard.tsx        |  5 +-
 .../infographic/src/designs/items/Pyramid.tsx |  5 +-
 .../src/designs/items/QuarterCircular.tsx     |  5 +-
 .../src/designs/items/QuarterSimpleCard.tsx   |  5 +-
 .../src/designs/items/RibbonCard.tsx          |  5 +-
 .../src/designs/items/RoundedRectNode.tsx     |  5 +-
 .../designs/items/SimpleHorizontalArrow.tsx   |  5 +-
 .../src/designs/items/SimpleIllusItem.tsx     |  5 +-
 .../src/designs/items/SimpleItem.tsx          |  5 +-
 .../src/designs/items/SimpleVerticalArrow.tsx |  5 +-
 .../src/designs/items/UnderlineText.tsx       |  5 +-
 .../src/designs/items/VerticalIconArrow.tsx   |  5 +-
 .../infographic/src/designs/items/prompt.md   | 48 ++++++++++++++++---
 .../infographic/src/designs/items/types.ts    |  1 +
 30 files changed, 155 insertions(+), 34 deletions(-)

diff --git a/packages/infographic/src/designs/items/BadgeCard.tsx b/packages/infographic/src/designs/items/BadgeCard.tsx
index 8c09444d9..0f0e2a0dd 100644
--- a/packages/infographic/src/designs/items/BadgeCard.tsx
+++ b/packages/infographic/src/designs/items/BadgeCard.tsx
@@ -136,4 +136,7 @@ export const BadgeCard: ComponentType<BadgeCardProps> = (props) => {
   );
 };
 
-registerItem('badge-card', { component: BadgeCard });
+registerItem('badge-card', {
+  component: BadgeCard,
+  values: ['icon', 'label', 'value', 'desc'],
+});
diff --git a/packages/infographic/src/designs/items/BulletText.tsx b/packages/infographic/src/designs/items/BulletText.tsx
index 0cf62fc73..c771cb7bc 100644
--- a/packages/infographic/src/designs/items/BulletText.tsx
+++ b/packages/infographic/src/designs/items/BulletText.tsx
@@ -75,4 +75,7 @@ export const BulletText: ComponentType<BulletTextProps> = (props) => {
   );
 };
 
-registerItem('bullet-text', { component: BulletText });
+registerItem('bullet-text', {
+  component: BulletText,
+  values: ['label'],
+});
diff --git a/packages/infographic/src/designs/items/CandyCardLite.tsx b/packages/infographic/src/designs/items/CandyCardLite.tsx
index 20c66465a..e11cbfd7d 100644
--- a/packages/infographic/src/designs/items/CandyCardLite.tsx
+++ b/packages/infographic/src/designs/items/CandyCardLite.tsx
@@ -82,4 +82,7 @@ export const CandyCardLite: ComponentType<CandyCardLiteProps> = (props) => {
   );
 };
 
-registerItem('candy-card-lite', { component: CandyCardLite });
+registerItem('candy-card-lite', {
+  component: CandyCardLite,
+  values: ['icon', 'label', 'desc'],
+});
diff --git a/packages/infographic/src/designs/items/ChartColumn.tsx b/packages/infographic/src/designs/items/ChartColumn.tsx
index d776a327e..351458d41 100644
--- a/packages/infographic/src/designs/items/ChartColumn.tsx
+++ b/packages/infographic/src/designs/items/ChartColumn.tsx
@@ -125,4 +125,7 @@ export const ChartColumn: ComponentType<ChartColumnProps> = (props) => {
   );
 };
 
-registerItem('chart-column', { component: ChartColumn });
+registerItem('chart-column', {
+  component: ChartColumn,
+  values: ['label', 'value'],
+});
diff --git a/packages/infographic/src/designs/items/CircleNode.tsx b/packages/infographic/src/designs/items/CircleNode.tsx
index 39761ac8f..dab07e19f 100644
--- a/packages/infographic/src/designs/items/CircleNode.tsx
+++ b/packages/infographic/src/designs/items/CircleNode.tsx
@@ -93,7 +93,10 @@ export const CircleNode: ComponentType<CircleNodeProps> = (props) => {
   );
 };
 
-registerItem('circle-node', { component: CircleNode });
+registerItem('circle-node', {
+  component: CircleNode,
+  values: ['label'],
+});
 
 function fadeWithWhite(
   color: tinycolor.Instance,
diff --git a/packages/infographic/src/designs/items/CircularProgress.tsx b/packages/infographic/src/designs/items/CircularProgress.tsx
index f6497c465..a33c17cfc 100644
--- a/packages/infographic/src/designs/items/CircularProgress.tsx
+++ b/packages/infographic/src/designs/items/CircularProgress.tsx
@@ -100,4 +100,7 @@ export const CircularProgress: ComponentType<CircularProgressProps> = (
   );
 };
 
-registerItem('circular-progress', { component: CircularProgress });
+registerItem('circular-progress', {
+  component: CircularProgress,
+  values: ['label', 'value'],
+});
diff --git a/packages/infographic/src/designs/items/CompactCard.tsx b/packages/infographic/src/designs/items/CompactCard.tsx
index 6a3fe5c29..a46faa0c1 100644
--- a/packages/infographic/src/designs/items/CompactCard.tsx
+++ b/packages/infographic/src/designs/items/CompactCard.tsx
@@ -124,4 +124,7 @@ export const CompactCard: ComponentType<CompactCardProps> = (props) => {
   );
 };
 
-registerItem('compact-card', { component: CompactCard });
+registerItem('compact-card', {
+  component: CompactCard,
+  values: ['icon', 'label', 'value', 'desc'],
+});
diff --git a/packages/infographic/src/designs/items/DoneList.tsx b/packages/infographic/src/designs/items/DoneList.tsx
index da027a0e0..40aedd45d 100644
--- a/packages/infographic/src/designs/items/DoneList.tsx
+++ b/packages/infographic/src/designs/items/DoneList.tsx
@@ -63,4 +63,7 @@ export const DoneList: ComponentType<DoneListProps> = (props) => {
   );
 };
 
-registerItem('done-list', { component: DoneList });
+registerItem('done-list', {
+  component: DoneList,
+  values: ['desc'],
+});
diff --git a/packages/infographic/src/designs/items/HorizontalIconArrow.tsx b/packages/infographic/src/designs/items/HorizontalIconArrow.tsx
index fd08690bf..0b94f443a 100644
--- a/packages/infographic/src/designs/items/HorizontalIconArrow.tsx
+++ b/packages/infographic/src/designs/items/HorizontalIconArrow.tsx
@@ -218,4 +218,7 @@ const DotLine = (props: {
   );
 };
 
-registerItem('horizontal-icon-arrow', { component: HorizontalIconArrow });
+registerItem('horizontal-icon-arrow', {
+  component: HorizontalIconArrow,
+  values: ['icon', 'label', 'desc'],
+});
diff --git a/packages/infographic/src/designs/items/HorizontalIconLine.tsx b/packages/infographic/src/designs/items/HorizontalIconLine.tsx
index 17075aa0c..9ac9794e2 100644
--- a/packages/infographic/src/designs/items/HorizontalIconLine.tsx
+++ b/packages/infographic/src/designs/items/HorizontalIconLine.tsx
@@ -146,4 +146,7 @@ export const HorizontalIconLine: ComponentType<HorizontalIconLineProps> = (
   );
 };
 
-registerItem('horizontal-icon-line', { component: HorizontalIconLine });
+registerItem('horizontal-icon-line', {
+  component: HorizontalIconLine,
+  values: ['icon', 'label', 'desc'],
+});
diff --git a/packages/infographic/src/designs/items/IconBadge.tsx b/packages/infographic/src/designs/items/IconBadge.tsx
index 2446972b9..395eec353 100644
--- a/packages/infographic/src/designs/items/IconBadge.tsx
+++ b/packages/infographic/src/designs/items/IconBadge.tsx
@@ -119,4 +119,7 @@ export const IconBadge: ComponentType<IconBadgeProps> = (props) => {
   );
 };
 
-registerItem('icon-badge', { component: IconBadge });
+registerItem('icon-badge', {
+  component: IconBadge,
+  values: ['icon', 'label'],
+});
diff --git a/packages/infographic/src/designs/items/IndexedCard.tsx b/packages/infographic/src/designs/items/IndexedCard.tsx
index 06ff23209..d34d62aca 100644
--- a/packages/infographic/src/designs/items/IndexedCard.tsx
+++ b/packages/infographic/src/designs/items/IndexedCard.tsx
@@ -222,4 +222,7 @@ export const IndexedCard: ComponentType<IndexedCardProps> = (props) => {
   );
 };
 
-registerItem('indexed-card', { component: IndexedCard });
+registerItem('indexed-card', {
+  component: IndexedCard,
+  values: ['label', 'desc'],
+});
diff --git a/packages/infographic/src/designs/items/LCornerCard.tsx b/packages/infographic/src/designs/items/LCornerCard.tsx
index 5fbab6dd1..c8b27cbfb 100644
--- a/packages/infographic/src/designs/items/LCornerCard.tsx
+++ b/packages/infographic/src/designs/items/LCornerCard.tsx
@@ -103,4 +103,7 @@ export const LCornerCard: ComponentType<LCornerCardProps> = (props) => {
   );
 };
 
-registerItem('l-corner-card', { component: LCornerCard });
+registerItem('l-corner-card', {
+  component: LCornerCard,
+  values: ['icon', 'label', 'desc'],
+});
diff --git a/packages/infographic/src/designs/items/LetterCard.tsx b/packages/infographic/src/designs/items/LetterCard.tsx
index 538f5599c..05255a2e9 100644
--- a/packages/infographic/src/designs/items/LetterCard.tsx
+++ b/packages/infographic/src/designs/items/LetterCard.tsx
@@ -163,4 +163,7 @@ export const LetterCard: ComponentType<LetterCardProps> = (props) => {
   );
 };
 
-registerItem('letter-card', { component: LetterCard });
+registerItem('letter-card', {
+  component: LetterCard,
+  values: ['label'],
+});
diff --git a/packages/infographic/src/designs/items/PillBadge.tsx b/packages/infographic/src/designs/items/PillBadge.tsx
index d3c648e8d..6eacc7cad 100644
--- a/packages/infographic/src/designs/items/PillBadge.tsx
+++ b/packages/infographic/src/designs/items/PillBadge.tsx
@@ -132,4 +132,7 @@ export const PillBadge: ComponentType<PillBadgeProps> = (props) => {
   );
 };
 
-registerItem('pill-badge', { component: PillBadge });
+registerItem('pill-badge', {
+  component: PillBadge,
+  values: ['label', 'desc'],
+});
diff --git a/packages/infographic/src/designs/items/PlainText.tsx b/packages/infographic/src/designs/items/PlainText.tsx
index 4ae8236dd..b3200f7f8 100644
--- a/packages/infographic/src/designs/items/PlainText.tsx
+++ b/packages/infographic/src/designs/items/PlainText.tsx
@@ -37,4 +37,7 @@ export const LabelText: ComponentType<LabelTextProps> = (props) => {
   );
 };
 
-registerItem('plain-text', { component: LabelText });
+registerItem('plain-text', {
+  component: LabelText,
+  values: ['label'],
+});
diff --git a/packages/infographic/src/designs/items/ProgressCard.tsx b/packages/infographic/src/designs/items/ProgressCard.tsx
index 434304cf6..c1f82d5e7 100644
--- a/packages/infographic/src/designs/items/ProgressCard.tsx
+++ b/packages/infographic/src/designs/items/ProgressCard.tsx
@@ -195,4 +195,7 @@ export const ProgressCard: ComponentType<ProgressCardProps> = (props) => {
   );
 };
 
-registerItem('progress-card', { component: ProgressCard });
+registerItem('progress-card', {
+  component: ProgressCard,
+  values: ['icon', 'label', 'value', 'desc'],
+});
diff --git a/packages/infographic/src/designs/items/Pyramid.tsx b/packages/infographic/src/designs/items/Pyramid.tsx
index 77e4f45e5..e64b4b7c1 100644
--- a/packages/infographic/src/designs/items/Pyramid.tsx
+++ b/packages/infographic/src/designs/items/Pyramid.tsx
@@ -183,4 +183,7 @@ function calculateTriangleSegment(
   return { points, topWidth, bottomWidth };
 }
 
-registerItem('pyramid', { component: Pyramid });
+registerItem('pyramid', {
+  component: Pyramid,
+  values: ['icon', 'label', 'desc'],
+});
diff --git a/packages/infographic/src/designs/items/QuarterCircular.tsx b/packages/infographic/src/designs/items/QuarterCircular.tsx
index c4716316f..59f3aadcb 100644
--- a/packages/infographic/src/designs/items/QuarterCircular.tsx
+++ b/packages/infographic/src/designs/items/QuarterCircular.tsx
@@ -276,4 +276,7 @@ export const QuarterCircular: ComponentType<QuarterCircularProps> = (props) => {
   );
 };
 
-registerItem('quarter-circular', { component: QuarterCircular });
+registerItem('quarter-circular', {
+  component: QuarterCircular,
+  values: ['icon', 'label', 'desc'],
+});
diff --git a/packages/infographic/src/designs/items/QuarterSimpleCard.tsx b/packages/infographic/src/designs/items/QuarterSimpleCard.tsx
index ad1fe195b..2b6109914 100644
--- a/packages/infographic/src/designs/items/QuarterSimpleCard.tsx
+++ b/packages/infographic/src/designs/items/QuarterSimpleCard.tsx
@@ -190,4 +190,7 @@ export const QuarterSimpleCard: ComponentType<QuarterSimpleCardProps> = (
   );
 };
 
-registerItem('quarter-simple-card', { component: QuarterSimpleCard });
+registerItem('quarter-simple-card', {
+  component: QuarterSimpleCard,
+  values: ['icon', 'label', 'desc'],
+});
diff --git a/packages/infographic/src/designs/items/RibbonCard.tsx b/packages/infographic/src/designs/items/RibbonCard.tsx
index 1a424889a..572f741a0 100644
--- a/packages/infographic/src/designs/items/RibbonCard.tsx
+++ b/packages/infographic/src/designs/items/RibbonCard.tsx
@@ -160,4 +160,7 @@ export const RibbonCard: ComponentType<RibbonCardProps> = (props) => {
   );
 };
 
-registerItem('ribbon-card', { component: RibbonCard });
+registerItem('ribbon-card', {
+  component: RibbonCard,
+  values: ['icon', 'label', 'value', 'desc'],
+});
diff --git a/packages/infographic/src/designs/items/RoundedRectNode.tsx b/packages/infographic/src/designs/items/RoundedRectNode.tsx
index 24dd9be91..de70ef90c 100644
--- a/packages/infographic/src/designs/items/RoundedRectNode.tsx
+++ b/packages/infographic/src/designs/items/RoundedRectNode.tsx
@@ -73,4 +73,7 @@ export const RoundedRectNode: ComponentType<RoundedRectNodeProps> = (props) => {
   );
 };
 
-registerItem('rounded-rect-node', { component: RoundedRectNode });
+registerItem('rounded-rect-node', {
+  component: RoundedRectNode,
+  values: ['label'],
+});
diff --git a/packages/infographic/src/designs/items/SimpleHorizontalArrow.tsx b/packages/infographic/src/designs/items/SimpleHorizontalArrow.tsx
index 175cebb85..1a4a8724b 100644
--- a/packages/infographic/src/designs/items/SimpleHorizontalArrow.tsx
+++ b/packages/infographic/src/designs/items/SimpleHorizontalArrow.tsx
@@ -147,4 +147,7 @@ const HorizontalArrow = (
   );
 };
 
-registerItem('simple-horizontal-arrow', { component: SimpleHorizontalArrow });
+registerItem('simple-horizontal-arrow', {
+  component: SimpleHorizontalArrow,
+  values: ['label', 'desc'],
+});
diff --git a/packages/infographic/src/designs/items/SimpleIllusItem.tsx b/packages/infographic/src/designs/items/SimpleIllusItem.tsx
index 6f0a2a3fb..c136d4c07 100644
--- a/packages/infographic/src/designs/items/SimpleIllusItem.tsx
+++ b/packages/infographic/src/designs/items/SimpleIllusItem.tsx
@@ -71,4 +71,7 @@ export const SimpleIllusItem: ComponentType<SimpleIllusItemProps> = (props) => {
   );
 };
 
-registerItem('simple-illus', { component: SimpleIllusItem });
+registerItem('simple-illus', {
+  component: SimpleIllusItem,
+  values: ['illus', 'label', 'desc'],
+});
diff --git a/packages/infographic/src/designs/items/SimpleItem.tsx b/packages/infographic/src/designs/items/SimpleItem.tsx
index 046f81d07..4d0f8fb4b 100644
--- a/packages/infographic/src/designs/items/SimpleItem.tsx
+++ b/packages/infographic/src/designs/items/SimpleItem.tsx
@@ -213,4 +213,7 @@ export const SimpleItem: ComponentType<SimpleItemProps> = (props) => {
   }
 };
 
-registerItem('simple', { component: SimpleItem });
+registerItem('simple', {
+  component: SimpleItem,
+  values: ['icon', 'label', 'desc'],
+});
diff --git a/packages/infographic/src/designs/items/SimpleVerticalArrow.tsx b/packages/infographic/src/designs/items/SimpleVerticalArrow.tsx
index 7dcbd1ed7..1c2015110 100644
--- a/packages/infographic/src/designs/items/SimpleVerticalArrow.tsx
+++ b/packages/infographic/src/designs/items/SimpleVerticalArrow.tsx
@@ -140,4 +140,7 @@ const VerticalArrow = (
   );
 };
 
-registerItem('simple-vertical-arrow', { component: SimpleVerticalArrow });
+registerItem('simple-vertical-arrow', {
+  component: SimpleVerticalArrow,
+  values: ['label', 'desc'],
+});
diff --git a/packages/infographic/src/designs/items/UnderlineText.tsx b/packages/infographic/src/designs/items/UnderlineText.tsx
index 0675b8fe0..1dc45f2e1 100644
--- a/packages/infographic/src/designs/items/UnderlineText.tsx
+++ b/packages/infographic/src/designs/items/UnderlineText.tsx
@@ -138,4 +138,7 @@ export const UnderlineText: ComponentType<UnderlineTextProps> = (props) => {
   );
 };
 
-registerItem('underline-text', { component: UnderlineText });
+registerItem('underline-text', {
+  component: UnderlineText,
+  values: ['label', 'desc'],
+});
diff --git a/packages/infographic/src/designs/items/VerticalIconArrow.tsx b/packages/infographic/src/designs/items/VerticalIconArrow.tsx
index fa1545cf6..2ee5cec95 100644
--- a/packages/infographic/src/designs/items/VerticalIconArrow.tsx
+++ b/packages/infographic/src/designs/items/VerticalIconArrow.tsx
@@ -219,4 +219,7 @@ const DotLine = (props: {
   );
 };
 
-registerItem('vertical-icon-arrow', { component: VerticalIconArrow });
+registerItem('vertical-icon-arrow', {
+  component: VerticalIconArrow,
+  values: ['icon', 'label', 'desc'],
+});
diff --git a/packages/infographic/src/designs/items/prompt.md b/packages/infographic/src/designs/items/prompt.md
index da78e5f9e..70bc0a647 100644
--- a/packages/infographic/src/designs/items/prompt.md
+++ b/packages/infographic/src/designs/items/prompt.md
@@ -396,7 +396,39 @@ import { getItemProps, getItemId } from './utils';
 // import roundPolygon, { xxx } from 'round-polygon';
 ```
 
-### 6. 组件结构模板
+### 6. values 字段规则
+
+在 `registerItem` 时，需要传入 `values` 字段，表示当前组件使用了哪些封装组件。`values` 的值基于代码实现中使用的组件来确定：
+
+- **ItemLabel** → `"label"`
+- **ItemDesc** → `"desc"`
+- **ItemValue** → `"value"`
+- **ItemIcon** 或 **ItemIconCircle** → `"icon"`
+- **Illus** → `"illus"`
+
+**示例**：
+
+```typescript
+// 如果组件使用了 ItemLabel 和 ItemDesc
+registerItem('simple-text', {
+  component: SimpleText,
+  values: ['label', 'desc']
+});
+
+// 如果组件使用了 ItemIcon, ItemLabel, ItemValue 和 ItemDesc
+registerItem('full-card', {
+  component: FullCard,
+  values: ['icon', 'label', 'value', 'desc']
+});
+
+// 如果组件使用了 Illus, ItemLabel 和 ItemDesc
+registerItem('illus-item', {
+  component: IllusItem,
+  values: ['illus', 'label', 'desc']
+});
+```
+
+### 7. 组件结构模板
 
 ```typescript
 export interface [ItemName]Props extends BaseItemProps {
@@ -481,10 +513,13 @@ export const [ItemName]: ComponentType<[ItemName]Props> = (props) => {
   );
 };
 
-registerItem('[item-name]', { component: [ItemName] });
+registerItem('[item-name]', {
+  component: [ItemName],
+  values: ['label', 'desc', 'icon', 'value', 'illus'] // 根据组件实际使用的组件来确定
+});
 ```
 
-### 7. indexes 索引系统
+### 8. indexes 索引系统
 
 **indexes** 是数据项在信息图中的位置标识，用数组表示层级关系：
 
@@ -507,7 +542,7 @@ const indexStr = String(indexes[0] + 1).padStart(2, '0'); // "01", "02", ...
 const isEven = indexes[0] % 2 === 0;
 ```
 
-### 8. 关键设计原则
+### 9. 关键设计原则
 
 #### positionH/positionV 处理
 
@@ -687,7 +722,7 @@ const quarterCirclePath = isFlipped
 - `A rx ry x-axis-rotation large-arc-flag sweep-flag x y` - 弧线
 - `Z` - 闭合路径
 
-### 9. 约束规则
+### 10. 约束规则
 
 **严格遵守：**
 
@@ -702,8 +737,9 @@ const quarterCirclePath = isFlipped
 7. **支持 positionH/V 对齐方式**（根据设计需求）
 8. **避免出现元素坐标为负值的情况**
 9. **条件渲染可选元素**（icon、label、desc、value）
+10. **注册组件时必须提供 values 字段**，根据实际使用的封装组件确定值
 
-### 10. 命名规范
+### 11. 命名规范
 
 - 组件名：大驼峰，如 `DoneList`, `ChartColumn`
 - 注册名：小写连字符，如 `done-list`, `chart-column`
diff --git a/packages/infographic/src/designs/items/types.ts b/packages/infographic/src/designs/items/types.ts
index 609d444c7..f4e4ad22c 100644
--- a/packages/infographic/src/designs/items/types.ts
+++ b/packages/infographic/src/designs/items/types.ts
@@ -23,5 +23,6 @@ export interface ItemOptions extends Partial<BaseItemProps> {
 
 export interface Item<T extends BaseItemProps = BaseItemProps> {
   component: ComponentType<T>;
+  values?: string[];
   options?: ItemOptions;
 }

From 066085d90b7343bfa3341107432d159a9ce53333 Mon Sep 17 00:00:00 2001
From: Aaron <antvaaron@gmail.com>
Date: Thu, 30 Oct 2025 20:27:17 +0800
Subject: [PATCH 2/4] refactor(infographic): list column grid row structure
 support zigzag

---
 .../infographic/src/designs/items/BadgeCard.tsx    |  2 +-
 .../infographic/src/designs/items/BulletText.tsx   |  2 +-
 .../src/designs/items/CandyCardLite.tsx            |  2 +-
 .../infographic/src/designs/items/ChartColumn.tsx  |  2 +-
 .../infographic/src/designs/items/CircleNode.tsx   |  2 +-
 .../src/designs/items/CircularProgress.tsx         |  2 +-
 .../infographic/src/designs/items/CompactCard.tsx  |  2 +-
 .../infographic/src/designs/items/DoneList.tsx     |  2 +-
 .../src/designs/items/HorizontalIconArrow.tsx      | 14 ++++++--------
 .../src/designs/items/HorizontalIconLine.tsx       |  2 +-
 .../infographic/src/designs/items/IconBadge.tsx    |  2 +-
 .../infographic/src/designs/items/IndexedCard.tsx  |  2 +-
 .../infographic/src/designs/items/LCornerCard.tsx  |  2 +-
 .../infographic/src/designs/items/LetterCard.tsx   |  2 +-
 .../infographic/src/designs/items/PillBadge.tsx    |  2 +-
 .../infographic/src/designs/items/PlainText.tsx    |  2 +-
 .../infographic/src/designs/items/ProgressCard.tsx |  2 +-
 packages/infographic/src/designs/items/Pyramid.tsx |  2 +-
 .../src/designs/items/QuarterCircular.tsx          |  2 +-
 .../src/designs/items/QuarterSimpleCard.tsx        |  2 +-
 .../infographic/src/designs/items/RibbonCard.tsx   |  2 +-
 .../src/designs/items/RoundedRectNode.tsx          |  2 +-
 .../src/designs/items/SimpleHorizontalArrow.tsx    | 13 +++----------
 .../src/designs/items/SimpleIllusItem.tsx          |  2 +-
 .../infographic/src/designs/items/SimpleItem.tsx   |  2 +-
 .../src/designs/items/SimpleVerticalArrow.tsx      | 10 +++++-----
 .../src/designs/items/UnderlineText.tsx            |  2 +-
 .../src/designs/items/VerticalIconArrow.tsx        | 12 ++++++------
 packages/infographic/src/designs/items/types.ts    |  2 +-
 .../src/designs/structures/list-column.tsx         |  4 +++-
 .../src/designs/structures/list-grid.tsx           |  4 +++-
 .../src/designs/structures/list-row.tsx            |  4 +++-
 packages/infographic/src/templates/built-in.ts     | 12 ++++++------
 33 files changed, 60 insertions(+), 63 deletions(-)

diff --git a/packages/infographic/src/designs/items/BadgeCard.tsx b/packages/infographic/src/designs/items/BadgeCard.tsx
index 0f0e2a0dd..fd8b7856e 100644
--- a/packages/infographic/src/designs/items/BadgeCard.tsx
+++ b/packages/infographic/src/designs/items/BadgeCard.tsx
@@ -138,5 +138,5 @@ export const BadgeCard: ComponentType<BadgeCardProps> = (props) => {
 
 registerItem('badge-card', {
   component: BadgeCard,
-  values: ['icon', 'label', 'value', 'desc'],
+  composites: ['icon', 'label', 'value', 'desc'],
 });
diff --git a/packages/infographic/src/designs/items/BulletText.tsx b/packages/infographic/src/designs/items/BulletText.tsx
index c771cb7bc..dad6a5a02 100644
--- a/packages/infographic/src/designs/items/BulletText.tsx
+++ b/packages/infographic/src/designs/items/BulletText.tsx
@@ -77,5 +77,5 @@ export const BulletText: ComponentType<BulletTextProps> = (props) => {
 
 registerItem('bullet-text', {
   component: BulletText,
-  values: ['label'],
+  composites: ['label'],
 });
diff --git a/packages/infographic/src/designs/items/CandyCardLite.tsx b/packages/infographic/src/designs/items/CandyCardLite.tsx
index e11cbfd7d..d0c4715bf 100644
--- a/packages/infographic/src/designs/items/CandyCardLite.tsx
+++ b/packages/infographic/src/designs/items/CandyCardLite.tsx
@@ -84,5 +84,5 @@ export const CandyCardLite: ComponentType<CandyCardLiteProps> = (props) => {
 
 registerItem('candy-card-lite', {
   component: CandyCardLite,
-  values: ['icon', 'label', 'desc'],
+  composites: ['icon', 'label', 'desc'],
 });
diff --git a/packages/infographic/src/designs/items/ChartColumn.tsx b/packages/infographic/src/designs/items/ChartColumn.tsx
index 351458d41..f5e561e9e 100644
--- a/packages/infographic/src/designs/items/ChartColumn.tsx
+++ b/packages/infographic/src/designs/items/ChartColumn.tsx
@@ -127,5 +127,5 @@ export const ChartColumn: ComponentType<ChartColumnProps> = (props) => {
 
 registerItem('chart-column', {
   component: ChartColumn,
-  values: ['label', 'value'],
+  composites: ['label', 'value'],
 });
diff --git a/packages/infographic/src/designs/items/CircleNode.tsx b/packages/infographic/src/designs/items/CircleNode.tsx
index dab07e19f..5554eb9dd 100644
--- a/packages/infographic/src/designs/items/CircleNode.tsx
+++ b/packages/infographic/src/designs/items/CircleNode.tsx
@@ -95,7 +95,7 @@ export const CircleNode: ComponentType<CircleNodeProps> = (props) => {
 
 registerItem('circle-node', {
   component: CircleNode,
-  values: ['label'],
+  composites: ['label'],
 });
 
 function fadeWithWhite(
diff --git a/packages/infographic/src/designs/items/CircularProgress.tsx b/packages/infographic/src/designs/items/CircularProgress.tsx
index a33c17cfc..1ff348260 100644
--- a/packages/infographic/src/designs/items/CircularProgress.tsx
+++ b/packages/infographic/src/designs/items/CircularProgress.tsx
@@ -102,5 +102,5 @@ export const CircularProgress: ComponentType<CircularProgressProps> = (
 
 registerItem('circular-progress', {
   component: CircularProgress,
-  values: ['label', 'value'],
+  composites: ['label', 'value'],
 });
diff --git a/packages/infographic/src/designs/items/CompactCard.tsx b/packages/infographic/src/designs/items/CompactCard.tsx
index a46faa0c1..32aa99b66 100644
--- a/packages/infographic/src/designs/items/CompactCard.tsx
+++ b/packages/infographic/src/designs/items/CompactCard.tsx
@@ -126,5 +126,5 @@ export const CompactCard: ComponentType<CompactCardProps> = (props) => {
 
 registerItem('compact-card', {
   component: CompactCard,
-  values: ['icon', 'label', 'value', 'desc'],
+  composites: ['icon', 'label', 'value', 'desc'],
 });
diff --git a/packages/infographic/src/designs/items/DoneList.tsx b/packages/infographic/src/designs/items/DoneList.tsx
index 40aedd45d..557049160 100644
--- a/packages/infographic/src/designs/items/DoneList.tsx
+++ b/packages/infographic/src/designs/items/DoneList.tsx
@@ -65,5 +65,5 @@ export const DoneList: ComponentType<DoneListProps> = (props) => {
 
 registerItem('done-list', {
   component: DoneList,
-  values: ['desc'],
+  composites: ['desc'],
 });
diff --git a/packages/infographic/src/designs/items/HorizontalIconArrow.tsx b/packages/infographic/src/designs/items/HorizontalIconArrow.tsx
index 0b94f443a..d8c5e7422 100644
--- a/packages/infographic/src/designs/items/HorizontalIconArrow.tsx
+++ b/packages/infographic/src/designs/items/HorizontalIconArrow.tsx
@@ -18,17 +18,15 @@ import type { BaseItemProps } from './types';
 
 export interface HorizontalIconArrowProps extends BaseItemProps {
   width?: number;
-  /** 翻转方向 */
-  flipped?: boolean;
 }
 
 export const HorizontalIconArrow: ComponentType<HorizontalIconArrowProps> = (
   props,
 ) => {
-  const [{ indexes, datum, width = 140, themeColors, flipped }, restProps] =
-    getItemProps(props, ['width', 'flipped']);
-
-  const positionV = indexes[0] % 2 === (flipped ? 0 : 1) ? 'normal' : 'flipped';
+  const [
+    { indexes, datum, width = 140, themeColors, positionV = 'normal' },
+    restProps,
+  ] = getItemProps(props, ['width']);
 
   const textAlignVertical = positionV === 'normal' ? 'bottom' : 'top';
   const label = (
@@ -183,7 +181,7 @@ const DotLine = (props: {
   width?: number;
   height?: number;
   fill: string;
-  positionV?: 'normal' | 'flipped';
+  positionV?: 'normal' | 'center' | 'flipped';
 }) => {
   const {
     x = 0,
@@ -220,5 +218,5 @@ const DotLine = (props: {
 
 registerItem('horizontal-icon-arrow', {
   component: HorizontalIconArrow,
-  values: ['icon', 'label', 'desc'],
+  composites: ['icon', 'label', 'desc'],
 });
diff --git a/packages/infographic/src/designs/items/HorizontalIconLine.tsx b/packages/infographic/src/designs/items/HorizontalIconLine.tsx
index 9ac9794e2..11e0351db 100644
--- a/packages/infographic/src/designs/items/HorizontalIconLine.tsx
+++ b/packages/infographic/src/designs/items/HorizontalIconLine.tsx
@@ -148,5 +148,5 @@ export const HorizontalIconLine: ComponentType<HorizontalIconLineProps> = (
 
 registerItem('horizontal-icon-line', {
   component: HorizontalIconLine,
-  values: ['icon', 'label', 'desc'],
+  composites: ['icon', 'label', 'desc'],
 });
diff --git a/packages/infographic/src/designs/items/IconBadge.tsx b/packages/infographic/src/designs/items/IconBadge.tsx
index 395eec353..fec157de1 100644
--- a/packages/infographic/src/designs/items/IconBadge.tsx
+++ b/packages/infographic/src/designs/items/IconBadge.tsx
@@ -121,5 +121,5 @@ export const IconBadge: ComponentType<IconBadgeProps> = (props) => {
 
 registerItem('icon-badge', {
   component: IconBadge,
-  values: ['icon', 'label'],
+  composites: ['icon', 'label'],
 });
diff --git a/packages/infographic/src/designs/items/IndexedCard.tsx b/packages/infographic/src/designs/items/IndexedCard.tsx
index d34d62aca..c82e14d30 100644
--- a/packages/infographic/src/designs/items/IndexedCard.tsx
+++ b/packages/infographic/src/designs/items/IndexedCard.tsx
@@ -224,5 +224,5 @@ export const IndexedCard: ComponentType<IndexedCardProps> = (props) => {
 
 registerItem('indexed-card', {
   component: IndexedCard,
-  values: ['label', 'desc'],
+  composites: ['label', 'desc'],
 });
diff --git a/packages/infographic/src/designs/items/LCornerCard.tsx b/packages/infographic/src/designs/items/LCornerCard.tsx
index c8b27cbfb..b1b4e413e 100644
--- a/packages/infographic/src/designs/items/LCornerCard.tsx
+++ b/packages/infographic/src/designs/items/LCornerCard.tsx
@@ -105,5 +105,5 @@ export const LCornerCard: ComponentType<LCornerCardProps> = (props) => {
 
 registerItem('l-corner-card', {
   component: LCornerCard,
-  values: ['icon', 'label', 'desc'],
+  composites: ['icon', 'label', 'desc'],
 });
diff --git a/packages/infographic/src/designs/items/LetterCard.tsx b/packages/infographic/src/designs/items/LetterCard.tsx
index 05255a2e9..8bf3c2b3b 100644
--- a/packages/infographic/src/designs/items/LetterCard.tsx
+++ b/packages/infographic/src/designs/items/LetterCard.tsx
@@ -165,5 +165,5 @@ export const LetterCard: ComponentType<LetterCardProps> = (props) => {
 
 registerItem('letter-card', {
   component: LetterCard,
-  values: ['label'],
+  composites: ['label'],
 });
diff --git a/packages/infographic/src/designs/items/PillBadge.tsx b/packages/infographic/src/designs/items/PillBadge.tsx
index 6eacc7cad..0c1b6b2cd 100644
--- a/packages/infographic/src/designs/items/PillBadge.tsx
+++ b/packages/infographic/src/designs/items/PillBadge.tsx
@@ -134,5 +134,5 @@ export const PillBadge: ComponentType<PillBadgeProps> = (props) => {
 
 registerItem('pill-badge', {
   component: PillBadge,
-  values: ['label', 'desc'],
+  composites: ['label', 'desc'],
 });
diff --git a/packages/infographic/src/designs/items/PlainText.tsx b/packages/infographic/src/designs/items/PlainText.tsx
index b3200f7f8..cf9fa0dbe 100644
--- a/packages/infographic/src/designs/items/PlainText.tsx
+++ b/packages/infographic/src/designs/items/PlainText.tsx
@@ -39,5 +39,5 @@ export const LabelText: ComponentType<LabelTextProps> = (props) => {
 
 registerItem('plain-text', {
   component: LabelText,
-  values: ['label'],
+  composites: ['label'],
 });
diff --git a/packages/infographic/src/designs/items/ProgressCard.tsx b/packages/infographic/src/designs/items/ProgressCard.tsx
index c1f82d5e7..a0aff3643 100644
--- a/packages/infographic/src/designs/items/ProgressCard.tsx
+++ b/packages/infographic/src/designs/items/ProgressCard.tsx
@@ -197,5 +197,5 @@ export const ProgressCard: ComponentType<ProgressCardProps> = (props) => {
 
 registerItem('progress-card', {
   component: ProgressCard,
-  values: ['icon', 'label', 'value', 'desc'],
+  composites: ['icon', 'label', 'value', 'desc'],
 });
diff --git a/packages/infographic/src/designs/items/Pyramid.tsx b/packages/infographic/src/designs/items/Pyramid.tsx
index e64b4b7c1..408223ca0 100644
--- a/packages/infographic/src/designs/items/Pyramid.tsx
+++ b/packages/infographic/src/designs/items/Pyramid.tsx
@@ -185,5 +185,5 @@ function calculateTriangleSegment(
 
 registerItem('pyramid', {
   component: Pyramid,
-  values: ['icon', 'label', 'desc'],
+  composites: ['icon', 'label', 'desc'],
 });
diff --git a/packages/infographic/src/designs/items/QuarterCircular.tsx b/packages/infographic/src/designs/items/QuarterCircular.tsx
index 59f3aadcb..b5e6a620a 100644
--- a/packages/infographic/src/designs/items/QuarterCircular.tsx
+++ b/packages/infographic/src/designs/items/QuarterCircular.tsx
@@ -278,5 +278,5 @@ export const QuarterCircular: ComponentType<QuarterCircularProps> = (props) => {
 
 registerItem('quarter-circular', {
   component: QuarterCircular,
-  values: ['icon', 'label', 'desc'],
+  composites: ['icon', 'label', 'desc'],
 });
diff --git a/packages/infographic/src/designs/items/QuarterSimpleCard.tsx b/packages/infographic/src/designs/items/QuarterSimpleCard.tsx
index 2b6109914..162875c53 100644
--- a/packages/infographic/src/designs/items/QuarterSimpleCard.tsx
+++ b/packages/infographic/src/designs/items/QuarterSimpleCard.tsx
@@ -192,5 +192,5 @@ export const QuarterSimpleCard: ComponentType<QuarterSimpleCardProps> = (
 
 registerItem('quarter-simple-card', {
   component: QuarterSimpleCard,
-  values: ['icon', 'label', 'desc'],
+  composites: ['icon', 'label', 'desc'],
 });
diff --git a/packages/infographic/src/designs/items/RibbonCard.tsx b/packages/infographic/src/designs/items/RibbonCard.tsx
index 572f741a0..8c784581f 100644
--- a/packages/infographic/src/designs/items/RibbonCard.tsx
+++ b/packages/infographic/src/designs/items/RibbonCard.tsx
@@ -162,5 +162,5 @@ export const RibbonCard: ComponentType<RibbonCardProps> = (props) => {
 
 registerItem('ribbon-card', {
   component: RibbonCard,
-  values: ['icon', 'label', 'value', 'desc'],
+  composites: ['icon', 'label', 'value', 'desc'],
 });
diff --git a/packages/infographic/src/designs/items/RoundedRectNode.tsx b/packages/infographic/src/designs/items/RoundedRectNode.tsx
index de70ef90c..bbc6eced7 100644
--- a/packages/infographic/src/designs/items/RoundedRectNode.tsx
+++ b/packages/infographic/src/designs/items/RoundedRectNode.tsx
@@ -75,5 +75,5 @@ export const RoundedRectNode: ComponentType<RoundedRectNodeProps> = (props) => {
 
 registerItem('rounded-rect-node', {
   component: RoundedRectNode,
-  values: ['label'],
+  composites: ['label'],
 });
diff --git a/packages/infographic/src/designs/items/SimpleHorizontalArrow.tsx b/packages/infographic/src/designs/items/SimpleHorizontalArrow.tsx
index 1a4a8724b..681658971 100644
--- a/packages/infographic/src/designs/items/SimpleHorizontalArrow.tsx
+++ b/packages/infographic/src/designs/items/SimpleHorizontalArrow.tsx
@@ -24,16 +24,9 @@ export const SimpleHorizontalArrow: ComponentType<
   SimpleHorizontalArrowProps
 > = (props) => {
   const [
-    {
-      indexes,
-      datum,
-      width = 140,
-      themeColors,
-      flipped,
-      positionV = indexes[0] % 2 === (flipped ? 0 : 1) ? 'normal' : 'flipped',
-    },
+    { indexes, datum, width = 140, themeColors, positionV = 'normal' },
     restProps,
-  ] = getItemProps(props, ['width', 'flipped']);
+  ] = getItemProps(props, ['width']);
 
   const textAlignVertical = positionV === 'normal' ? 'bottom' : 'top';
   const label = (
@@ -149,5 +142,5 @@ const HorizontalArrow = (
 
 registerItem('simple-horizontal-arrow', {
   component: SimpleHorizontalArrow,
-  values: ['label', 'desc'],
+  composites: ['label', 'desc'],
 });
diff --git a/packages/infographic/src/designs/items/SimpleIllusItem.tsx b/packages/infographic/src/designs/items/SimpleIllusItem.tsx
index c136d4c07..5939f23de 100644
--- a/packages/infographic/src/designs/items/SimpleIllusItem.tsx
+++ b/packages/infographic/src/designs/items/SimpleIllusItem.tsx
@@ -73,5 +73,5 @@ export const SimpleIllusItem: ComponentType<SimpleIllusItemProps> = (props) => {
 
 registerItem('simple-illus', {
   component: SimpleIllusItem,
-  values: ['illus', 'label', 'desc'],
+  composites: ['illus', 'label', 'desc'],
 });
diff --git a/packages/infographic/src/designs/items/SimpleItem.tsx b/packages/infographic/src/designs/items/SimpleItem.tsx
index 4d0f8fb4b..5caeec225 100644
--- a/packages/infographic/src/designs/items/SimpleItem.tsx
+++ b/packages/infographic/src/designs/items/SimpleItem.tsx
@@ -215,5 +215,5 @@ export const SimpleItem: ComponentType<SimpleItemProps> = (props) => {
 
 registerItem('simple', {
   component: SimpleItem,
-  values: ['icon', 'label', 'desc'],
+  composites: ['icon', 'label', 'desc'],
 });
diff --git a/packages/infographic/src/designs/items/SimpleVerticalArrow.tsx b/packages/infographic/src/designs/items/SimpleVerticalArrow.tsx
index 1c2015110..aca5a27cb 100644
--- a/packages/infographic/src/designs/items/SimpleVerticalArrow.tsx
+++ b/packages/infographic/src/designs/items/SimpleVerticalArrow.tsx
@@ -22,10 +22,10 @@ export interface SimpleVerticalArrowProps extends BaseItemProps {
 export const SimpleVerticalArrow: ComponentType<SimpleVerticalArrowProps> = (
   props,
 ) => {
-  const [{ indexes, datum, height = 140, themeColors, flipped }, restProps] =
-    getItemProps(props, ['height', 'flipped']);
-
-  const positionH = indexes[0] % 2 === (flipped ? 0 : 1) ? 'normal' : 'flipped';
+  const [
+    { indexes, datum, height = 140, themeColors, positionH = 'normal' },
+    restProps,
+  ] = getItemProps(props, ['height']);
 
   const textAlignHorizontal = positionH === 'normal' ? 'right' : 'left';
   const label = (
@@ -142,5 +142,5 @@ const VerticalArrow = (
 
 registerItem('simple-vertical-arrow', {
   component: SimpleVerticalArrow,
-  values: ['label', 'desc'],
+  composites: ['label', 'desc'],
 });
diff --git a/packages/infographic/src/designs/items/UnderlineText.tsx b/packages/infographic/src/designs/items/UnderlineText.tsx
index 1dc45f2e1..bff8b2eee 100644
--- a/packages/infographic/src/designs/items/UnderlineText.tsx
+++ b/packages/infographic/src/designs/items/UnderlineText.tsx
@@ -140,5 +140,5 @@ export const UnderlineText: ComponentType<UnderlineTextProps> = (props) => {
 
 registerItem('underline-text', {
   component: UnderlineText,
-  values: ['label', 'desc'],
+  composites: ['label', 'desc'],
 });
diff --git a/packages/infographic/src/designs/items/VerticalIconArrow.tsx b/packages/infographic/src/designs/items/VerticalIconArrow.tsx
index 2ee5cec95..b2aeb5bf9 100644
--- a/packages/infographic/src/designs/items/VerticalIconArrow.tsx
+++ b/packages/infographic/src/designs/items/VerticalIconArrow.tsx
@@ -25,10 +25,10 @@ export interface VerticalIconArrowProps extends BaseItemProps {
 export const VerticalIconArrow: ComponentType<VerticalIconArrowProps> = (
   props,
 ) => {
-  const [{ indexes, datum, height = 140, themeColors, flipped }, restProps] =
-    getItemProps(props, ['height', 'flipped']);
-
-  const positionH = indexes[0] % 2 === (flipped ? 0 : 1) ? 'normal' : 'flipped';
+  const [
+    { indexes, datum, height = 140, themeColors, positionH = 'normal' },
+    restProps,
+  ] = getItemProps(props, ['height']);
 
   const textAlignHorizontal = positionH === 'normal' ? 'right' : 'left';
   const label = (
@@ -184,7 +184,7 @@ const DotLine = (props: {
   width?: number;
   height?: number;
   fill: string;
-  positionH?: 'normal' | 'flipped';
+  positionH?: 'normal' | 'center' | 'flipped';
 }) => {
   const {
     x = 0,
@@ -221,5 +221,5 @@ const DotLine = (props: {
 
 registerItem('vertical-icon-arrow', {
   component: VerticalIconArrow,
-  values: ['icon', 'label', 'desc'],
+  composites: ['icon', 'label', 'desc'],
 });
diff --git a/packages/infographic/src/designs/items/types.ts b/packages/infographic/src/designs/items/types.ts
index f4e4ad22c..f60288264 100644
--- a/packages/infographic/src/designs/items/types.ts
+++ b/packages/infographic/src/designs/items/types.ts
@@ -23,6 +23,6 @@ export interface ItemOptions extends Partial<BaseItemProps> {
 
 export interface Item<T extends BaseItemProps = BaseItemProps> {
   component: ComponentType<T>;
-  values?: string[];
+  composites: string[];
   options?: ItemOptions;
 }
diff --git a/packages/infographic/src/designs/structures/list-column.tsx b/packages/infographic/src/designs/structures/list-column.tsx
index c664dec2c..b2fe3a217 100644
--- a/packages/infographic/src/designs/structures/list-column.tsx
+++ b/packages/infographic/src/designs/structures/list-column.tsx
@@ -9,10 +9,11 @@ import type { BaseStructureProps } from './types';
 export interface ListColumnProps extends BaseStructureProps {
   width?: number;
   gap?: number;
+  zigzag?: boolean;
 }
 
 export const ListColumn: ComponentType<ListColumnProps> = (props) => {
-  const { Title, Item, data, gap = 20, width: contentWidth } = props;
+  const { Title, Item, data, gap = 20, width: contentWidth, zigzag } = props;
   const { title, desc, items = [] } = data;
 
   const btnBounds = getElementBounds(<BtnAdd indexes={[0]} />);
@@ -39,6 +40,7 @@ export const ListColumn: ComponentType<ListColumnProps> = (props) => {
         y={itemY}
         width={width}
         positionV="center"
+        positionH={zigzag && index % 2 === 0 ? 'normal' : 'flipped'}
       />,
     );
 
diff --git a/packages/infographic/src/designs/structures/list-grid.tsx b/packages/infographic/src/designs/structures/list-grid.tsx
index fcfe48c59..b4ae0e067 100644
--- a/packages/infographic/src/designs/structures/list-grid.tsx
+++ b/packages/infographic/src/designs/structures/list-grid.tsx
@@ -9,10 +9,11 @@ import type { BaseStructureProps } from './types';
 export interface ListGridProps extends BaseStructureProps {
   columns?: number;
   gap?: number;
+  zigzag?: boolean;
 }
 
 export const ListGrid: ComponentType<ListGridProps> = (props) => {
-  const { Title, Item, data, columns = 3, gap = 24 } = props;
+  const { Title, Item, data, columns = 3, gap = 24, zigzag } = props;
   const { title, desc, items = [] } = data;
 
   const titleContent = Title ? <Title title={title} desc={desc} /> : null;
@@ -46,6 +47,7 @@ export const ListGrid: ComponentType<ListGridProps> = (props) => {
         x={itemX}
         y={itemY}
         positionH="center"
+        positionV={zigzag && index % 2 === 0 ? 'normal' : 'flipped'}
       />,
     );
 
diff --git a/packages/infographic/src/designs/structures/list-row.tsx b/packages/infographic/src/designs/structures/list-row.tsx
index 6da309047..578e0741e 100644
--- a/packages/infographic/src/designs/structures/list-row.tsx
+++ b/packages/infographic/src/designs/structures/list-row.tsx
@@ -8,10 +8,11 @@ import type { BaseStructureProps } from './types';
 
 export interface ListRowProps extends BaseStructureProps {
   gap?: number;
+  zigzag?: boolean;
 }
 
 export const ListRow: ComponentType<ListRowProps> = (props) => {
-  const { Title, Item, data, gap = 20 } = props;
+  const { Title, Item, data, gap = 20, zigzag } = props;
   const { title, desc, items = [] } = data;
 
   const titleContent = Title ? <Title title={title} desc={desc} /> : null;
@@ -37,6 +38,7 @@ export const ListRow: ComponentType<ListRowProps> = (props) => {
         data={data}
         x={itemX}
         positionH="center"
+        positionV={zigzag && index % 2 === 0 ? 'normal' : 'flipped'}
       />,
     );
 
diff --git a/packages/infographic/src/templates/built-in.ts b/packages/infographic/src/templates/built-in.ts
index aab4c79b4..5e88ecf57 100644
--- a/packages/infographic/src/templates/built-in.ts
+++ b/packages/infographic/src/templates/built-in.ts
@@ -116,7 +116,7 @@ const BUILT_IN_TEMPLATES: Record<string, TemplateOptions> = {
   'list-column-vertical-icon-arrow': {
     design: {
       title: 'default',
-      structure: { type: 'list-column', gap: -5 },
+      structure: { type: 'list-column', gap: -5, zigzag: true },
       items: [{ type: 'vertical-icon-arrow' }],
     },
   },
@@ -173,7 +173,7 @@ const BUILT_IN_TEMPLATES: Record<string, TemplateOptions> = {
   'list-grid-horizontal-icon-arrow': {
     design: {
       title: 'default',
-      structure: { type: 'list-grid', gap: 0 },
+      structure: { type: 'list-grid', gap: 0, zigzag: true },
       items: [{ type: 'horizontal-icon-arrow' }],
     },
   },
@@ -215,7 +215,7 @@ const BUILT_IN_TEMPLATES: Record<string, TemplateOptions> = {
   'list-row-horizontal-icon-arrow': {
     design: {
       title: 'default',
-      structure: { type: 'list-row', gap: 0 },
+      structure: { type: 'list-row', gap: 0, zigzag: true },
       items: [{ type: 'horizontal-icon-arrow' }],
     },
   },
@@ -285,14 +285,14 @@ const BUILT_IN_TEMPLATES: Record<string, TemplateOptions> = {
   'list-column-simple-vertical-arrow': {
     design: {
       title: 'default',
-      structure: { type: 'list-column', gap: 0 },
+      structure: { type: 'list-column', gap: 0, zigzag: true },
       items: [{ type: 'simple-vertical-arrow' }],
     },
   },
   'list-row-simple-horizontal-arrow': {
     design: {
       title: 'default',
-      structure: { type: 'list-row', gap: 0 },
+      structure: { type: 'list-row', gap: 0, zigzag: true },
       items: [{ type: 'simple-horizontal-arrow' }],
     },
   },
@@ -356,7 +356,7 @@ const BUILT_IN_TEMPLATES: Record<string, TemplateOptions> = {
   'list-row-horizontal-icon-line': {
     design: {
       title: 'default',
-      structure: { type: 'list-row', gap: 0 },
+      structure: { type: 'list-row', gap: 0, zigzag: true },
       items: [{ type: 'horizontal-icon-line' }],
     },
   },

From c6871302ff867b87dfc172d7279653c90593dd3a Mon Sep 17 00:00:00 2001
From: Aaron <antvaaron@gmail.com>
Date: Fri, 31 Oct 2025 15:52:46 +0800
Subject: [PATCH 3/4] refactor(infographic): structure registration add
 composites

---
 .../compare-hierarchy-left-right.tsx          |  1 +
 .../structures/compare-hierarchy-row.tsx      |  5 +-
 .../designs/structures/compare-left-right.tsx |  5 +-
 .../src/designs/structures/compare-mirror.tsx |  5 +-
 .../designs/structures/hierarchy-pyramid.tsx  |  5 +-
 .../src/designs/structures/hierarchy-tree.tsx |  5 +-
 .../src/designs/structures/list-column.tsx    |  5 +-
 .../src/designs/structures/list-grid.tsx      |  5 +-
 .../src/designs/structures/list-row.tsx       |  5 +-
 .../src/designs/structures/list-sector.tsx    |  5 +-
 .../src/designs/structures/list-waterfall.tsx |  5 +-
 .../src/designs/structures/prompt.md          | 81 +++++++++++++++++--
 .../src/designs/structures/quadrant.tsx       |  5 +-
 .../designs/structures/relation-circle.tsx    |  5 +-
 .../designs/structures/relation-network.tsx   |  5 +-
 .../structures/sequence-ascending-steps.tsx   |  1 +
 .../structures/sequence-circle-arrows.tsx     |  1 +
 .../structures/sequence-color-snake-steps.tsx |  1 +
 .../structures/sequence-horizontal-zigzag.tsx |  1 +
 .../structures/sequence-roadmap-vertical.tsx  |  1 +
 .../structures/sequence-snake-steps.tsx       |  5 +-
 .../src/designs/structures/sequence-steps.tsx |  5 +-
 .../designs/structures/sequence-timeline.tsx  |  5 +-
 .../structures/sequence-zigzag-steps.tsx      |  5 +-
 .../src/designs/structures/types.ts           |  1 +
 25 files changed, 151 insertions(+), 22 deletions(-)

diff --git a/packages/infographic/src/designs/structures/compare-hierarchy-left-right.tsx b/packages/infographic/src/designs/structures/compare-hierarchy-left-right.tsx
index 135449eae..f58c8b4ba 100644
--- a/packages/infographic/src/designs/structures/compare-hierarchy-left-right.tsx
+++ b/packages/infographic/src/designs/structures/compare-hierarchy-left-right.tsx
@@ -358,4 +358,5 @@ const DotLine = (props: DecorationProps) => {
 
 registerStructure('compare-hierarchy-left-right', {
   component: CompareHierarchyLeftRight,
+  composites: ['title', 'item'],
 });
diff --git a/packages/infographic/src/designs/structures/compare-hierarchy-row.tsx b/packages/infographic/src/designs/structures/compare-hierarchy-row.tsx
index 42b401977..ce8abf0a5 100644
--- a/packages/infographic/src/designs/structures/compare-hierarchy-row.tsx
+++ b/packages/infographic/src/designs/structures/compare-hierarchy-row.tsx
@@ -214,4 +214,7 @@ export const CompareHierarchyRow: ComponentType<CompareHierarchyRowProps> = (
   );
 };
 
-registerStructure('compare-hierarchy-row', { component: CompareHierarchyRow });
+registerStructure('compare-hierarchy-row', {
+  component: CompareHierarchyRow,
+  composites: ['title', 'item'],
+});
diff --git a/packages/infographic/src/designs/structures/compare-left-right.tsx b/packages/infographic/src/designs/structures/compare-left-right.tsx
index 0c785b0c3..13f3989c2 100644
--- a/packages/infographic/src/designs/structures/compare-left-right.tsx
+++ b/packages/infographic/src/designs/structures/compare-left-right.tsx
@@ -150,4 +150,7 @@ export const CompareLeftRight: ComponentType<CompareLeftRightProps> = (
   );
 };
 
-registerStructure('compare-left-right', { component: CompareLeftRight });
+registerStructure('compare-left-right', {
+  component: CompareLeftRight,
+  composites: ['title', 'item'],
+});
diff --git a/packages/infographic/src/designs/structures/compare-mirror.tsx b/packages/infographic/src/designs/structures/compare-mirror.tsx
index 0df8df11b..80a7b48c7 100644
--- a/packages/infographic/src/designs/structures/compare-mirror.tsx
+++ b/packages/infographic/src/designs/structures/compare-mirror.tsx
@@ -181,4 +181,7 @@ export const CompareMirror: ComponentType<CompareMirrorProps> = (props) => {
   );
 };
 
-registerStructure('compare-mirror', { component: CompareMirror });
+registerStructure('compare-mirror', {
+  component: CompareMirror,
+  composites: ['title', 'item'],
+});
diff --git a/packages/infographic/src/designs/structures/hierarchy-pyramid.tsx b/packages/infographic/src/designs/structures/hierarchy-pyramid.tsx
index 1e0ad754b..be16ce252 100644
--- a/packages/infographic/src/designs/structures/hierarchy-pyramid.tsx
+++ b/packages/infographic/src/designs/structures/hierarchy-pyramid.tsx
@@ -128,4 +128,7 @@ export const HierarchyPyramid: ComponentType<HierarchyPyramidProps> = (
   );
 };
 
-registerStructure('hierarchy-pyramid', { component: HierarchyPyramid });
+registerStructure('hierarchy-pyramid', {
+  component: HierarchyPyramid,
+  composites: ['title', 'item'],
+});
diff --git a/packages/infographic/src/designs/structures/hierarchy-tree.tsx b/packages/infographic/src/designs/structures/hierarchy-tree.tsx
index 4f2d22216..f0196ba03 100644
--- a/packages/infographic/src/designs/structures/hierarchy-tree.tsx
+++ b/packages/infographic/src/designs/structures/hierarchy-tree.tsx
@@ -285,4 +285,7 @@ export const HierarchyTree: ComponentType<HierarchyTreeProps> = (props) => {
   );
 };
 
-registerStructure('hierarchy-tree', { component: HierarchyTree });
+registerStructure('hierarchy-tree', {
+  component: HierarchyTree,
+  composites: ['title', 'item'],
+});
diff --git a/packages/infographic/src/designs/structures/list-column.tsx b/packages/infographic/src/designs/structures/list-column.tsx
index b2fe3a217..0951bb6bc 100644
--- a/packages/infographic/src/designs/structures/list-column.tsx
+++ b/packages/infographic/src/designs/structures/list-column.tsx
@@ -83,4 +83,7 @@ export const ListColumn: ComponentType<ListColumnProps> = (props) => {
   );
 };
 
-registerStructure('list-column', { component: ListColumn });
+registerStructure('list-column', {
+  component: ListColumn,
+  composites: ['title', 'item'],
+});
diff --git a/packages/infographic/src/designs/structures/list-grid.tsx b/packages/infographic/src/designs/structures/list-grid.tsx
index b4ae0e067..8373df177 100644
--- a/packages/infographic/src/designs/structures/list-grid.tsx
+++ b/packages/infographic/src/designs/structures/list-grid.tsx
@@ -112,4 +112,7 @@ export const ListGrid: ComponentType<ListGridProps> = (props) => {
   );
 };
 
-registerStructure('list-grid', { component: ListGrid });
+registerStructure('list-grid', {
+  component: ListGrid,
+  composites: ['title', 'item'],
+});
diff --git a/packages/infographic/src/designs/structures/list-row.tsx b/packages/infographic/src/designs/structures/list-row.tsx
index 578e0741e..1c5b539ae 100644
--- a/packages/infographic/src/designs/structures/list-row.tsx
+++ b/packages/infographic/src/designs/structures/list-row.tsx
@@ -84,4 +84,7 @@ export const ListRow: ComponentType<ListRowProps> = (props) => {
   );
 };
 
-registerStructure('list-row', { component: ListRow });
+registerStructure('list-row', {
+  component: ListRow,
+  composites: ['title', 'item'],
+});
diff --git a/packages/infographic/src/designs/structures/list-sector.tsx b/packages/infographic/src/designs/structures/list-sector.tsx
index 77da9ac6d..abc6deeb8 100644
--- a/packages/infographic/src/designs/structures/list-sector.tsx
+++ b/packages/infographic/src/designs/structures/list-sector.tsx
@@ -287,4 +287,7 @@ export const ListSector: ComponentType<ListSectorProps> = (props) => {
   );
 };
 
-registerStructure('list-sector', { component: ListSector });
+registerStructure('list-sector', {
+  component: ListSector,
+  composites: ['title', 'item'],
+});
diff --git a/packages/infographic/src/designs/structures/list-waterfall.tsx b/packages/infographic/src/designs/structures/list-waterfall.tsx
index a7345dde5..c1c62ba71 100644
--- a/packages/infographic/src/designs/structures/list-waterfall.tsx
+++ b/packages/infographic/src/designs/structures/list-waterfall.tsx
@@ -134,4 +134,7 @@ export const ListWaterfall: ComponentType<ListWaterfallProps> = (props) => {
   );
 };
 
-registerStructure('list-waterfall', { component: ListWaterfall });
+registerStructure('list-waterfall', {
+  component: ListWaterfall,
+  composites: ['title', 'item'],
+});
diff --git a/packages/infographic/src/designs/structures/prompt.md b/packages/infographic/src/designs/structures/prompt.md
index 97dd56dd1..74cf67c31 100644
--- a/packages/infographic/src/designs/structures/prompt.md
+++ b/packages/infographic/src/designs/structures/prompt.md
@@ -505,7 +505,10 @@ export const [StructureName]: ComponentType<[StructureName]Props> = (props) => {
   );
 };
 
-registerStructure('[structure-name]', { component: [StructureName] });
+registerStructure('[structure-name]', {
+  component: [StructureName],
+  composites: ['title', 'item'], // 根据实际使用的组件填写
+});
 ```
 
 **层级结构模板** (使用 Items 数组):
@@ -579,10 +582,72 @@ export const [StructureName]: ComponentType<[StructureName]Props> = (props) => {
   );
 };
 
-registerStructure('[structure-name]', { component: [StructureName] });
+registerStructure('[structure-name]', {
+  component: [StructureName],
+  composites: ['title', 'item'], // 根据实际使用的组件填写
+});
 ```
 
-### 5. 关键约束
+### 5. 组件声明 (composites)
+
+**composites 字段说明**：
+
+在调用 `registerStructure` 时，必须提供 `composites` 数组，用于声明该结构使用了哪些核心组件。这有助于系统了解结构的组成和依赖关系。
+
+**composites 的取值规则**：
+
+composites 数组中的值应该是小写字符串，包括以下几种：
+
+1. **'title'** - 当满足以下任一条件时包含：
+   - 使用了 `Title` prop 组件（来自 `props.Title`）
+   - 直接访问并渲染了 `data.title`（例如使用 `<Text>{title}</Text>` 或 `<Text>{data.title}</Text>`）
+   - 在代码中以任何方式将 title 数据渲染为 UI 元素
+
+2. **'item'** - 当满足以下任一条件时包含：
+   - 使用了 `Item` prop 组件（来自 `props.Item`）
+   - 使用了 `Items` prop 组件数组（来自 `props.Items`）
+   - 注意：即使使用的是 `Items`（复数），在 composites 中也应该填写 `'item'`（单数）
+
+3. **'illus'** - 当满足以下任一条件时包含：
+   - 使用了 `Illus` 组件（从 `../components` 导入）
+   - 直接访问并渲染了 `data.illus`（例如通过图片或 SVG 元素）
+   - 访问了 `data.illus.xxx` 并渲染为 UI
+
+**示例**：
+
+```typescript
+// 示例 1: 使用了 Title 和 Item props
+registerStructure('list-row', {
+  component: ListRow,
+  composites: ['title', 'item'],
+});
+
+// 示例 2: 直接在代码中渲染 title，使用 Item prop
+registerStructure('list-sector', {
+  component: ListSector,
+  composites: ['title', 'item'], // 虽然没有使用 Title prop，但渲染了 data.title
+});
+
+// 示例 3: 使用了 Items 数组（层级结构）
+registerStructure('hierarchy-tree', {
+  component: HierarchyTree,
+  composites: ['title', 'item'], // 注意是 'item' 不是 'items'
+});
+
+// 示例 4: 使用了 Title, Item 和 Illus
+registerStructure('some-structure', {
+  component: SomeStructure,
+  composites: ['title', 'item', 'illus'],
+});
+```
+
+**重要提示**：
+- composites 数组中的值必须是小写
+- 即使使用 `Items`（复数），也要填写 `'item'`（单数）
+- 如果结构直接渲染了某个数据字段（如 `data.title`），即使没有使用对应的 prop 组件，也应该在 composites 中声明
+- composites 数组不能为空，至少要包含 `['item']`
+
+### 6. 关键约束
 
 **严格遵守以下规则:**
 
@@ -678,6 +743,7 @@ registerStructure('[structure-name]', { component: [StructureName] });
    - 生成完整可运行的代码，包含所有必需的导入、类型定义和注册语句
    - JSX 导入指令必须在文件首行：`/** @jsxImportSource @antv/infographic-jsx */`
    - 只导入实际使用的组件和函数
+   - **必须在 registerStructure 调用中包含 composites 数组**，正确声明使用的组件
 
 2. **正确性**:
    - 确保 indexes 数组正确传递给所有需要的组件
@@ -685,6 +751,7 @@ registerStructure('[structure-name]', { component: [StructureName] });
    - 边界情况处理（如 items 为空数组时提供友好的空状态）
    - 使用 `getElementBounds` 获取准确的元素尺寸
    - Text 组件的文本通过 children 传递，不是 text 属性
+   - **composites 数组必须准确反映实际使用的组件**（参见"组件声明 (composites)"部分）
 
 3. **简洁性**:
    - 使用有意义但简洁的变量名
@@ -735,13 +802,14 @@ registerStructure('[structure-name]', { component: [StructureName] });
    - 导入所需的组件和函数
    - 定义 Props 接口
    - 实现组件逻辑
-   - 注册结构
+   - **注册结构（包含 composites 数组）**
 
 5. **验证输出**:
    - 检查代码完整性和正确性
    - 确认所有导入都正确
    - 确认 indexes 正确传递
    - 确认坐标计算无误
+   - **确认 composites 数组准确反映使用的组件**
 
 ## 参考示例
 
@@ -893,7 +961,10 @@ export const Example: ComponentType<ExampleProps> = (props) => {
   // 组件实现
 };
 
-registerStructure('example', { component: Example });
+registerStructure('example', {
+  component: Example,
+  composites: ['title', 'item'], // 根据实际使用的组件填写
+});
 ```
 
 ---
diff --git a/packages/infographic/src/designs/structures/quadrant.tsx b/packages/infographic/src/designs/structures/quadrant.tsx
index ca6ec074d..d829a3212 100644
--- a/packages/infographic/src/designs/structures/quadrant.tsx
+++ b/packages/infographic/src/designs/structures/quadrant.tsx
@@ -248,4 +248,7 @@ function calculateQuadrantPositions(
   ];
 }
 
-registerStructure('quadrant', { component: Quadrant });
+registerStructure('quadrant', {
+  component: Quadrant,
+  composites: ['title', 'item'],
+});
diff --git a/packages/infographic/src/designs/structures/relation-circle.tsx b/packages/infographic/src/designs/structures/relation-circle.tsx
index 1b070a1b0..d7a26523b 100644
--- a/packages/infographic/src/designs/structures/relation-circle.tsx
+++ b/packages/infographic/src/designs/structures/relation-circle.tsx
@@ -144,4 +144,7 @@ export const RelationCircle: ComponentType<RelationCircleProps> = (props) => {
   );
 };
 
-registerStructure('relation-circle', { component: RelationCircle });
+registerStructure('relation-circle', {
+  component: RelationCircle,
+  composites: ['title', 'item'],
+});
diff --git a/packages/infographic/src/designs/structures/relation-network.tsx b/packages/infographic/src/designs/structures/relation-network.tsx
index 4eb9f0580..4f5344c3f 100644
--- a/packages/infographic/src/designs/structures/relation-network.tsx
+++ b/packages/infographic/src/designs/structures/relation-network.tsx
@@ -185,4 +185,7 @@ export const RelationNetwork: ComponentType<RelationNetworkProps> = (props) => {
   );
 };
 
-registerStructure('relation-network', { component: RelationNetwork });
+registerStructure('relation-network', {
+  component: RelationNetwork,
+  composites: ['title', 'item'],
+});
diff --git a/packages/infographic/src/designs/structures/sequence-ascending-steps.tsx b/packages/infographic/src/designs/structures/sequence-ascending-steps.tsx
index 26b3a144b..87d938894 100644
--- a/packages/infographic/src/designs/structures/sequence-ascending-steps.tsx
+++ b/packages/infographic/src/designs/structures/sequence-ascending-steps.tsx
@@ -77,4 +77,5 @@ export const SequenceAscendingSteps: ComponentType<
 
 registerStructure('sequence-ascending-steps', {
   component: SequenceAscendingSteps,
+  composites: ['title', 'item'],
 });
diff --git a/packages/infographic/src/designs/structures/sequence-circle-arrows.tsx b/packages/infographic/src/designs/structures/sequence-circle-arrows.tsx
index 5ea1be665..c2b9641fe 100644
--- a/packages/infographic/src/designs/structures/sequence-circle-arrows.tsx
+++ b/packages/infographic/src/designs/structures/sequence-circle-arrows.tsx
@@ -396,4 +396,5 @@ export const SequenceCircleArrows: ComponentType<SequenceCircleArrowsProps> = (
 
 registerStructure('sequence-circle-arrows', {
   component: SequenceCircleArrows,
+  composites: ['title', 'item'],
 });
diff --git a/packages/infographic/src/designs/structures/sequence-color-snake-steps.tsx b/packages/infographic/src/designs/structures/sequence-color-snake-steps.tsx
index 0dec4c2ed..be64fe137 100644
--- a/packages/infographic/src/designs/structures/sequence-color-snake-steps.tsx
+++ b/packages/infographic/src/designs/structures/sequence-color-snake-steps.tsx
@@ -219,4 +219,5 @@ export const SequenceColorSnakeSteps: ComponentType<
 
 registerStructure('sequence-color-snake-steps', {
   component: SequenceColorSnakeSteps,
+  composites: ['title', 'item'],
 });
diff --git a/packages/infographic/src/designs/structures/sequence-horizontal-zigzag.tsx b/packages/infographic/src/designs/structures/sequence-horizontal-zigzag.tsx
index c43b33076..37944cba5 100644
--- a/packages/infographic/src/designs/structures/sequence-horizontal-zigzag.tsx
+++ b/packages/infographic/src/designs/structures/sequence-horizontal-zigzag.tsx
@@ -309,4 +309,5 @@ export const SequenceHorizontalZigzag: ComponentType<
 
 registerStructure('sequence-horizontal-zigzag', {
   component: SequenceHorizontalZigzag,
+  composites: ['title', 'item'],
 });
diff --git a/packages/infographic/src/designs/structures/sequence-roadmap-vertical.tsx b/packages/infographic/src/designs/structures/sequence-roadmap-vertical.tsx
index bc4c8de6d..cbf52082e 100644
--- a/packages/infographic/src/designs/structures/sequence-roadmap-vertical.tsx
+++ b/packages/infographic/src/designs/structures/sequence-roadmap-vertical.tsx
@@ -313,4 +313,5 @@ export const SequenceRoadmapVertical: ComponentType<
 
 registerStructure('sequence-roadmap-vertical', {
   component: SequenceRoadmapVertical,
+  composites: ['title', 'item'],
 });
diff --git a/packages/infographic/src/designs/structures/sequence-snake-steps.tsx b/packages/infographic/src/designs/structures/sequence-snake-steps.tsx
index 1df4f4c37..1d2461525 100644
--- a/packages/infographic/src/designs/structures/sequence-snake-steps.tsx
+++ b/packages/infographic/src/designs/structures/sequence-snake-steps.tsx
@@ -185,4 +185,7 @@ export const SequenceSnakeSteps: ComponentType<SequenceSnakeStepsProps> = (
   );
 };
 
-registerStructure('sequence-snake-steps', { component: SequenceSnakeSteps });
+registerStructure('sequence-snake-steps', {
+  component: SequenceSnakeSteps,
+  composites: ['title', 'item'],
+});
diff --git a/packages/infographic/src/designs/structures/sequence-steps.tsx b/packages/infographic/src/designs/structures/sequence-steps.tsx
index 741151dd8..239588193 100644
--- a/packages/infographic/src/designs/structures/sequence-steps.tsx
+++ b/packages/infographic/src/designs/structures/sequence-steps.tsx
@@ -116,4 +116,7 @@ export const SequenceSteps: ComponentType<SequenceStepsProps> = (props) => {
   );
 };
 
-registerStructure('sequence-steps', { component: SequenceSteps });
+registerStructure('sequence-steps', {
+  component: SequenceSteps,
+  composites: ['title', 'item'],
+});
diff --git a/packages/infographic/src/designs/structures/sequence-timeline.tsx b/packages/infographic/src/designs/structures/sequence-timeline.tsx
index 6eb7dd4bd..4b3ca2877 100644
--- a/packages/infographic/src/designs/structures/sequence-timeline.tsx
+++ b/packages/infographic/src/designs/structures/sequence-timeline.tsx
@@ -183,4 +183,7 @@ export const SequenceTimeline: ComponentType<SequenceTimelineProps> = (
   );
 };
 
-registerStructure('sequence-timeline', { component: SequenceTimeline });
+registerStructure('sequence-timeline', {
+  component: SequenceTimeline,
+  composites: ['title', 'item'],
+});
diff --git a/packages/infographic/src/designs/structures/sequence-zigzag-steps.tsx b/packages/infographic/src/designs/structures/sequence-zigzag-steps.tsx
index 068813555..36c134b08 100644
--- a/packages/infographic/src/designs/structures/sequence-zigzag-steps.tsx
+++ b/packages/infographic/src/designs/structures/sequence-zigzag-steps.tsx
@@ -275,4 +275,7 @@ export const SequenceZigzagSteps: ComponentType<SequenceZigzagStepsProps> = (
   );
 };
 
-registerStructure('sequence-zigzag-steps', { component: SequenceZigzagSteps });
+registerStructure('sequence-zigzag-steps', {
+  component: SequenceZigzagSteps,
+  composites: ['title', 'item'],
+});
diff --git a/packages/infographic/src/designs/structures/types.ts b/packages/infographic/src/designs/structures/types.ts
index a48ddf3f5..02f1cac72 100644
--- a/packages/infographic/src/designs/structures/types.ts
+++ b/packages/infographic/src/designs/structures/types.ts
@@ -17,6 +17,7 @@ export interface BaseStructureProps {
 
 export interface Structure {
   component: ComponentType<BaseStructureProps>;
+  composites: string[];
 }
 
 export interface StructureOptions {

From 29d09ddb44bc500c424f682d62262cdea9db7bc6 Mon Sep 17 00:00:00 2001
From: Aaron <antvaaron@gmail.com>
Date: Fri, 31 Oct 2025 16:16:12 +0800
Subject: [PATCH 4/4] refactor(infographic): add api to get types

---
 packages/infographic/src/options/parser.ts    |  6 +-
 .../infographic/src/runtime/Infographic.tsx   |  9 ++-
 packages/infographic/src/utils/get-types.ts   | 67 +++++++++++++++++++
 packages/infographic/src/utils/index.ts       |  1 +
 4 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 packages/infographic/src/utils/get-types.ts

diff --git a/packages/infographic/src/options/parser.ts b/packages/infographic/src/options/parser.ts
index 948c19a4b..d972241e5 100644
--- a/packages/infographic/src/options/parser.ts
+++ b/packages/infographic/src/options/parser.ts
@@ -78,7 +78,10 @@ function parseDesignStructure(
   const structure = getStructure(type);
   if (!structure) throw new Error(`Structure ${type} not found`);
   const { component } = structure;
-  return { component: (props) => component({ ...props, ...userProps }) };
+  return {
+    ...structure,
+    component: (props) => component({ ...props, ...userProps }),
+  };
 }
 
 function parseDesignTitle(
@@ -108,6 +111,7 @@ function parseDesignItem(
   if (!item) throw new Error(`Item ${type} not found`);
   const { component, options: itemOptions } = item;
   return {
+    ...item,
     component: (props) => {
       const { indexes } = props;
       const { data, themeConfig } = options;
diff --git a/packages/infographic/src/runtime/Infographic.tsx b/packages/infographic/src/runtime/Infographic.tsx
index c5224a520..149734717 100644
--- a/packages/infographic/src/runtime/Infographic.tsx
+++ b/packages/infographic/src/runtime/Infographic.tsx
@@ -6,7 +6,7 @@ import {
   parseOptions,
 } from '../options';
 import { Renderer } from '../renderer';
-import { parseSVG } from '../utils';
+import { getTypes, parseSVG } from '../utils';
 
 export class Infographic {
   private parsedOptions: ParsedInfographicOptions;
@@ -57,6 +57,13 @@ export class Infographic {
     return template;
   }
 
+  getTypes() {
+    const design = this.parsedOptions.design;
+    const structure = design.structure.composites || [];
+    const items = design.items.map((it) => it.composites || []);
+    return getTypes({ structure, items });
+  }
+
   private setView() {
     const { container, width, height } = this.parsedOptions;
     if (!container) return;
diff --git a/packages/infographic/src/utils/get-types.ts b/packages/infographic/src/utils/get-types.ts
new file mode 100644
index 000000000..3ed3cf94c
--- /dev/null
+++ b/packages/infographic/src/utils/get-types.ts
@@ -0,0 +1,67 @@
+/**
+ * 根据结构配置生成 TypeScript 类型字符串
+ */
+export function getTypes(
+  composites: { structure: string[]; items: string[][] },
+  commentsMap: Record<string, string> = {
+    title: '信息图标题',
+    desc: '信息图描述',
+    items: '信息图的内容项',
+    label: '项目标签文本',
+    value: '项目数值内容',
+    icon: '项目图标',
+    illus: '项目插图',
+    children: '子级项目（多层结构）',
+  },
+): string {
+  const { structure, items } = composites;
+
+  const lines: string[] = [];
+  const indent = (level: number) => '  '.repeat(level);
+
+  function fieldLine(name: string, type: string, level: number) {
+    const comment = commentsMap[name];
+    return comment
+      ? `${indent(level)}/** ${comment} */\n${indent(level)}${name}: ${type};`
+      : `${indent(level)}${name}: ${type};`;
+  }
+
+  function buildItemType(level: number, indentLevel: number): string {
+    const fields = items[level];
+    const fieldLines: string[] = [];
+
+    for (const field of fields) {
+      const type = field === 'value' ? 'number' : 'string';
+      fieldLines.push(fieldLine(field, type, indentLevel + 1));
+    }
+
+    if (items[level + 1]) {
+      fieldLines.push(
+        fieldLine(
+          'children',
+          `Array<${buildItemType(level + 1, indentLevel + 1)}>`,
+          indentLevel + 1,
+        ),
+      );
+    }
+
+    return `{\n${fieldLines.join('\n')}\n${indent(indentLevel)}}`;
+  }
+
+  lines.push('type InfographicType = {');
+
+  // title / desc
+  if (structure.includes('title')) {
+    lines.push(fieldLine('title', 'string', 1));
+    lines.push(fieldLine('desc', 'string', 1));
+  }
+
+  // items
+  if (structure.includes('item') && items.length > 0) {
+    lines.push(fieldLine('items', `Array<${buildItemType(0, 1)}>`, 1));
+  }
+
+  lines.push('}');
+
+  return lines.join('\n');
+}
diff --git a/packages/infographic/src/utils/index.ts b/packages/infographic/src/utils/index.ts
index b77783a7d..380af1c24 100644
--- a/packages/infographic/src/utils/index.ts
+++ b/packages/infographic/src/utils/index.ts
@@ -1,5 +1,6 @@
 export * from './color';
 export * from './data';
+export * from './get-types';
 export * from './icon';
 export * from './item';
 export * from './join';