feat(template): Cylinders 3d (#6)

* feat: add cylinder-3d structure

* feat: add alternating item

* feat: new built-in template

* refactor: simplify structure

* feat: update SimpleItem to support usePaletteColor and adjust built-in templates

Author: yvonneyx

packages/infographic/src/designs/items/SimpleItem.tsx

@@ -11,6 +11,7 @@ export interface SimpleItemProps extends BaseItemProps {
   gap?: number;
   showIcon?: boolean;
   iconSize?: number;
+  usePaletteColor?: boolean;
 }
 
 export const SimpleItem: ComponentType<SimpleItemProps> = (props) => {
@@ -24,10 +25,17 @@ export const SimpleItem: ComponentType<SimpleItemProps> = (props) => {
       iconSize = 30,
       positionH = 'normal',
       positionV = 'normal',
+      usePaletteColor = false,
       themeColors,
     },
     restProps,
-  ] = getItemProps(props, ['width', 'gap', 'showIcon', 'iconSize']);
+  ] = getItemProps(props, [
+    'width',
+    'gap',
+    'showIcon',
+    'iconSize',
+    'usePaletteColor',
+  ]);
 
   const { label, desc, icon } = datum;
 
@@ -40,14 +48,17 @@ export const SimpleItem: ComponentType<SimpleItemProps> = (props) => {
   };
 
   const textAlign = getTextAlign(positionH);
+  const labelColor = usePaletteColor
+    ? themeColors.colorPrimary
+    : themeColors.colorText;
 
   const labelContent = (
     <ItemLabel
       indexes={indexes}
       width={width}
       alignHorizontal="center"
       alignVertical="center"
-      fill={themeColors.colorText}
+      fill={labelColor}
     >
       {label}
     </ItemLabel>
@@ -69,7 +80,7 @@ export const SimpleItem: ComponentType<SimpleItemProps> = (props) => {
           width={width}
           alignHorizontal={textAlign}
           alignVertical="center"
-          fill={themeColors.colorText}
+          fill={labelColor}
         >
           {label}
         </ItemLabel>
@@ -152,7 +163,7 @@ export const SimpleItem: ComponentType<SimpleItemProps> = (props) => {
               width={textWidth}
               alignHorizontal="right"
               alignVertical="center"
-              fill={themeColors.colorText}
+              fill={labelColor}
             >
               {label}
             </ItemLabel>
@@ -178,7 +189,7 @@ export const SimpleItem: ComponentType<SimpleItemProps> = (props) => {
               width={textWidth}
               alignHorizontal="left"
               alignVertical="center"
-              fill={themeColors.colorText}
+              fill={labelColor}
             >
               {label}
             </ItemLabel>

packages/infographic/src/designs/structures/index.ts

@@ -16,6 +16,7 @@ export * from './relation-network';
 export * from './sequence-ascending-steps';
 export * from './sequence-circle-arrows';
 export * from './sequence-color-snake-steps';
+export * from './sequence-cylinders-3d';
 export * from './sequence-horizontal-zigzag';
 export * from './sequence-roadmap-vertical';
 export * from './sequence-snake-steps';