infographic-item-creator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Infographic Item Generator

信息图表Item生成器

Overview

概述

Generate complete Item component code for the infographic framework, following the project's item rules, layout constraints, and registration requirements.

为信息图表框架生成完整的Item组件代码，遵循项目的Item规则、布局约束和注册要求。

Workflow

工作流程

Read
```
references/item-prompt.md
```
for the full framework rules, allowed components, and output requirements.
Clarify minimal requirements if missing: desired visuals, required fields (icon/label/value/desc/illus), sizing, and alignment needs.
Use
```
getItemProps
```
to extract custom props and compute layout with
```
getElementBounds
```
.
Produce a full TypeScript file: imports, Props extends BaseItemProps, component implementation, and
```
registerItem
```
with accurate
```
composites
```
.
Self-check against the constraints in the reference (no unlisted components, indexes passed to all wrapped components, correct conditional rendering).

阅读
```
references/item-prompt.md
```
文档，了解完整的框架规则、允许使用的组件以及输出要求。
若存在缺失信息，明确最低要求：期望的视觉效果、必填字段（图标/标签/数值/描述/插图）、尺寸以及对齐需求。
使用
```
getItemProps
```
提取自定义属性，并通过
```
getElementBounds
```
计算布局。
生成完整的TypeScript文件：包含导入语句、继承自BaseItemProps的Props定义、组件实现，以及带有准确
```
composites
```
的
```
registerItem
```
注册逻辑。
根据参考文档中的约束条件进行自我检查：不得使用未列出的组件，所有包装组件都需传入索引，条件渲染逻辑正确。

Notes

注意事项

Prefer scanning
```
src/designs/items
```
for similar items to match local patterns when appropriate.
Keep output concise; avoid React-only features (keys, hooks).

如有需要，优先查看
```
src/designs/items
```
目录下的同类Item，以匹配本地代码风格。
保持输出简洁；避免使用仅React支持的特性（如keys、hooks）。