refactor(infographic): list column grid row structure support zigzag

Aarebecca · Aarebecca · commit 066085d90b73 · 2025-10-31T15:32:08.000+08:00
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
