refactor(infographic): items registration add values

Aarebecca · Aarebecca · commit f2cfe4acb213 · 2025-10-30T20:20:46.000+08:00
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -23,5 +23,6 @@ export interface ItemOptions extends Partial<BaseItemProps> {
 
 export interface Item<T extends BaseItemProps = BaseItemProps> {
   component: ComponentType<T>;
+  values?: string[];
   options?: ItemOptions;
 }
