refactor(infographic): add api to get types

Author: Aarebecca

packages/infographic/src/options/parser.ts

@@ -78,7 +78,10 @@ function parseDesignStructure(
   const structure = getStructure(type);
   if (!structure) throw new Error(`Structure ${type} not found`);
   const { component } = structure;
-  return { component: (props) => component({ ...props, ...userProps }) };
+  return {
+    ...structure,
+    component: (props) => component({ ...props, ...userProps }),
+  };
 }
 
 function parseDesignTitle(
@@ -108,6 +111,7 @@ function parseDesignItem(
   if (!item) throw new Error(`Item ${type} not found`);
   const { component, options: itemOptions } = item;
   return {
+    ...item,
     component: (props) => {
       const { indexes } = props;
       const { data, themeConfig } = options;

packages/infographic/src/runtime/Infographic.tsx

@@ -6,7 +6,7 @@ import {
   parseOptions,
 } from '../options';
 import { Renderer } from '../renderer';
-import { parseSVG } from '../utils';
+import { getTypes, parseSVG } from '../utils';
 
 export class Infographic {
   private parsedOptions: ParsedInfographicOptions;
@@ -57,6 +57,13 @@ export class Infographic {
     return template;
   }
 
+  getTypes() {
+    const design = this.parsedOptions.design;
+    const structure = design.structure.composites || [];
+    const items = design.items.map((it) => it.composites || []);
+    return getTypes({ structure, items });
+  }
+
   private setView() {
     const { container, width, height } = this.parsedOptions;
     if (!container) return;

packages/infographic/src/utils/get-types.ts

@@ -0,0 +1,67 @@
+/**
+ * 根据结构配置生成 TypeScript 类型字符串
+ */
+export function getTypes(
+  composites: { structure: string[]; items: string[][] },
+  commentsMap: Record<string, string> = {
+    title: '信息图标题',
+    desc: '信息图描述',
+    items: '信息图的内容项',
+    label: '项目标签文本',
+    value: '项目数值内容',
+    icon: '项目图标',
+    illus: '项目插图',
+    children: '子级项目（多层结构）',
+  },
+): string {
+  const { structure, items } = composites;
+
+  const lines: string[] = [];
+  const indent = (level: number) => '  '.repeat(level);
+
+  function fieldLine(name: string, type: string, level: number) {
+    const comment = commentsMap[name];
+    return comment
+      ? `${indent(level)}/** ${comment} */\n${indent(level)}${name}: ${type};`
+      : `${indent(level)}${name}: ${type};`;
+  }
+
+  function buildItemType(level: number, indentLevel: number): string {
+    const fields = items[level];
+    const fieldLines: string[] = [];
+
+    for (const field of fields) {
+      const type = field === 'value' ? 'number' : 'string';
+      fieldLines.push(fieldLine(field, type, indentLevel + 1));
+    }
+
+    if (items[level + 1]) {
+      fieldLines.push(
+        fieldLine(
+          'children',
+          `Array<${buildItemType(level + 1, indentLevel + 1)}>`,
+          indentLevel + 1,
+        ),
+      );
+    }
+
+    return `{\n${fieldLines.join('\n')}\n${indent(indentLevel)}}`;
+  }
+
+  lines.push('type InfographicType = {');
+
+  // title / desc
+  if (structure.includes('title')) {
+    lines.push(fieldLine('title', 'string', 1));
+    lines.push(fieldLine('desc', 'string', 1));
+  }
+
+  // items
+  if (structure.includes('item') && items.length > 0) {
+    lines.push(fieldLine('items', `Array<${buildItemType(0, 1)}>`, 1));
+  }
+
+  lines.push('}');
+
+  return lines.join('\n');
+}

packages/infographic/src/utils/index.ts

@@ -1,5 +1,6 @@
 export * from './color';
 export * from './data';
+export * from './get-types';
 export * from './icon';
 export * from './item';
 export * from './join';