infographic-structure-creator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Infographic Structure Creator

信息图结构生成器

Overview

概述

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

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

Workflow

工作流程

Read
```
references/structure-prompt.md
```
for the full framework rules, allowed components, and output requirements.
Clarify minimal requirements if missing: structure category, layout direction, hierarchy depth, and whether add/remove buttons are needed.
Choose Item vs Items, compute layout from
```
getElementBounds
```
, and plan decor elements under ItemsGroup.
Produce a full TypeScript file: imports, Props extends BaseStructureProps, component implementation, and
```
registerStructure
```
with accurate
```
composites
```
.
Self-check against the constraints in the reference (no unlisted components, no SVG cx/cy/r, correct indexes, empty-state handling).

阅读
```
references/structure-prompt.md
```
文件，了解完整的框架规则、允许使用的组件以及输出要求。
若缺少关键信息，需明确最小需求：结构类别、布局方向、层级深度，以及是否需要添加/移除按钮。
选择Item或Items组件，通过
```
getElementBounds
```
计算布局，并规划ItemsGroup下的装饰元素。
生成完整的TypeScript文件：包含导入语句、继承BaseStructureProps的Props定义、组件实现，以及带有准确
```
composites
```
的
```
registerStructure
```
注册代码。
根据参考文档中的约束条件进行自我检查：不得使用未列出的组件，不得使用SVG的cx/cy/r属性，确保索引正确，处理空状态。

Notes

注意事项

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

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