feat: add hierarchy structure (#133)

* feat(designs): add hierarchy-strcture

* refactor(dev): update dev env

* refactor: update template list

* chore: optimize infographic template updater skill

* fix: fix cr issue

* refactor(designs): hierarchy-structures support layerLabelPosition

* refactor: reuse data between dev and site gallery

* fix: fix cr issues

* chore: update version to 0.2.4

Author: Aarebecca

.skills/infographic-creator/SKILL.md

@@ -177,6 +177,7 @@ interface ItemDatum {
 - hierarchy-tree-tech-style-capsule-item
 - hierarchy-tree-curved-line-rounded-rect-node
 - hierarchy-tree-tech-style-badge-card
+- hierarchy-structure
 - chart-column-simple
 - chart-bar-plain-text
 - chart-line-plain-text

.skills/infographic-template-updater/SKILL.md

@@ -12,17 +12,15 @@ Update public template lists and gallery mappings when new templates are added i
 ## Workflow
 
 1. Collect new template names from the added `src/templates/*.ts` file (object keys).
+   - If templates are composed via spreads (e.g. `...listZigzagTemplates`), also confirm the final keys in `src/templates/built-in.ts`.
 2. Update template lists:
    - `SKILL.md` in the "Available Templates" list.
    - `site/src/components/AIPlayground/Prompt.ts` in the template list.
    Keep existing ordering/grouping; add new `list-*` entries near other list templates.
-3. Update gallery mapping in `site/src/components/Gallery/templates.ts`:
-   - Add entries to `TEMPLATE_ENTRIES` with the correct dataset (most list templates use `DATASET.LIST`).
-   - If the template should be featured, add it to `PREMIUM_TEMPLATE_KEYS` in the desired order.
-4. Sanity check with `rg -n "<template-name>"` across the three files to confirm presence.
+3. Sanity check with `rg -n "<template-name>"` across the three files to confirm presence.
 
 ## Notes
 
 - Do not remove or rename existing entries.
 - Keep template names exact and lower-case.
-- If a template fits a different dataset, follow the dataset used by similar templates.
+- If a template needs example data, update or extend `site/src/components/Gallery/datasets.ts` to match its structure.

dev/src/Composite.tsx

@@ -1,9 +1,4 @@
-import {
-  Data,
-  getItems,
-  getStructures,
-  InfographicOptions,
-} from '@antv/infographic';
+import { getItems, getStructures, InfographicOptions } from '@antv/infographic';
 import Editor from '@monaco-editor/react';
 import {
   Button,
@@ -17,23 +12,9 @@ import {
 } from 'antd';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Infographic } from './Infographic';
-import {
-  COMPARE_DATA,
-  HIERARCHY_DATA,
-  LIST_DATA,
-  SWOT_DATA,
-  WORD_CLOUD_DATA,
-} from './data';
+import { DATA_KEYS, DATASET, DEFAULT_DATA_KEY, type DataKey } from './data';
 import { getStoredValues, setStoredValues } from './utils/storage';
 
-const DATA: { label: string; key: string; value: Data }[] = [
-  { label: '列表数据', key: 'list', value: LIST_DATA },
-  { label: '层级数据', key: 'hierarchy', value: HIERARCHY_DATA },
-  { label: '对比数据', key: 'compare', value: COMPARE_DATA },
-  { label: 'SWOT数据', key: 'swot', value: SWOT_DATA },
-  { label: '词云数据', key: 'wordcloud', value: WORD_CLOUD_DATA },
-];
-
 const items = getItems();
 const structures = getStructures();
 
@@ -43,7 +24,7 @@ export const Composite = () => {
   const defaultValues = {
     structure: structures[0] || 'list-grid',
     item: items[0] || 'circular-progress',
-    data: 'list',
+    data: DEFAULT_DATA_KEY,
     theme: 'light' as const,
     colorPrimary: '#FF356A',
     enablePrimary: true,
@@ -68,7 +49,7 @@ export const Composite = () => {
       }
 
       // Validate data
-      const dataKeys = DATA.map((d) => d.key);
+      const dataKeys = DATA_KEYS;
       if (stored.data && !dataKeys.includes(stored.data)) {
         fallbacks.data = dataKeys[0];
       }
@@ -85,7 +66,7 @@ export const Composite = () => {
     structure: string;
     item: string;
     item2: string;
-    data: string;
+    data: DataKey;
     theme: 'light' | 'dark';
     colorPrimary: string;
     enablePrimary: boolean;
@@ -216,7 +197,7 @@ export const Composite = () => {
         structure: structureObj,
         items: item2Obj ? [itemObj, item2Obj] : [itemObj],
       },
-      data: DATA.find((it) => it.key === data)?.value,
+      data: DATASET[data],
       themeConfig: {},
     };
 
@@ -314,8 +295,8 @@ export const Composite = () => {
               </Form.Item>
               <Form.Item label="数据" name="data">
                 <Select
-                  options={DATA.map(({ label, key }) => ({
-                    label,
+                  options={DATA_KEYS.map((key) => ({
+                    label: key,
                     value: key,
                   }))}
                 />

dev/src/Infographic.tsx

@@ -5,14 +5,90 @@ import {
   Infographic as Renderer,
 } from '@antv/infographic';
 import { useEffect, useRef } from 'react';
-import { getAsset } from './get-asset';
+
+const svgTextCache = new Map<string, string>();
+const pendingRequests = new Map<string, Promise<string | null>>();
 
 registerResourceLoader(async (config) => {
-  const { data } = config;
-  const type = data.startsWith('illus:') ? 'illustration' : 'icon';
-  const normalized = data.replace(/^illus:|^icon:/, '');
-  const str = await getAsset(type, normalized);
-  return loadSVGResource(str);
+  const { data, scene } = config;
+
+  try {
+    const key = `${scene}::${data}`;
+    let svgText: string | null;
+
+    // 1. 命中缓存
+    if (svgTextCache.has(key)) {
+      svgText = svgTextCache.get(key)!;
+    }
+    // 2. 已有请求在进行中
+    else if (pendingRequests.has(key)) {
+      svgText = await pendingRequests.get(key)!;
+    }
+    // 3. 发起新请求
+    else {
+      const fetchPromise = (async () => {
+        try {
+          let url: string | null;
+
+          if (scene === 'icon') {
+            url = `https://api.iconify.design/${data}.svg`;
+          } else if (scene === 'illus') {
+            url = `https://raw.githubusercontent.com/balazser/undraw-svg-collection/refs/heads/main/svgs/${data}.svg`;
+          } else return null;
+
+          if (!url) return null;
+
+          const response = await fetch(url);
+
+          if (!response.ok) {
+            console.error(`HTTP ${response.status}: Failed to load ${url}`);
+            return null;
+          }
+
+          const text = await response.text();
+
+          if (!text || !text.trim().startsWith('<svg')) {
+            console.error(`Invalid SVG content from ${url}`);
+            return null;
+          }
+
+          svgTextCache.set(key, text);
+          return text;
+        } catch (fetchError) {
+          console.error(`Failed to fetch resource ${key}:`, fetchError);
+          return null;
+        }
+      })();
+
+      pendingRequests.set(key, fetchPromise);
+
+      try {
+        svgText = await fetchPromise;
+      } catch (error) {
+        console.error(`Error loading resource ${key}:`, error);
+        return null;
+      } finally {
+        pendingRequests.delete(key);
+      }
+    }
+
+    if (!svgText) {
+      return null;
+    }
+
+    const resource = loadSVGResource(svgText);
+
+    if (!resource) {
+      console.error(`loadSVGResource returned null for ${key}`);
+      svgTextCache.delete(key);
+      return null;
+    }
+
+    return resource;
+  } catch (error) {
+    console.error('Unexpected error in resource loader:', error);
+    return null;
+  }
 });
 
 export const Infographic = ({

dev/src/Preview.tsx

@@ -2,48 +2,25 @@ import { getTemplate, getTemplates, ThemeConfig } from '@antv/infographic';
 import Editor from '@monaco-editor/react';
 import { Button, Card, Checkbox, ColorPicker, Form, Select } from 'antd';
 import { useEffect, useMemo, useState } from 'react';
+import { getDataByTemplate } from '../../shared/get-template-data';
 import { Infographic } from './Infographic';
-import {
-  COMPARE_DATA,
-  HIERARCHY_DATA,
-  LIST_DATA,
-  SWOT_DATA,
-  WORD_CLOUD_DATA,
-} from './data';
+import { DATA_KEYS, DATASET, DEFAULT_DATA_KEY, type DataKey } from './data';
 import { getStoredValues, setStoredValues } from './utils/storage';
 
 const templates = getTemplates();
 const STORAGE_KEY = 'preview-form-values';
 
-const DATA = {
-  list: { label: '列表数据', value: LIST_DATA },
-  hierarchy: { label: '层级数据', value: HIERARCHY_DATA },
-  compare: { label: '对比数据', value: COMPARE_DATA },
-  swot: { label: 'SWOT 数据', value: SWOT_DATA },
-  wordcloud: { label: '词云数据', value: WORD_CLOUD_DATA },
-} as const;
-const TEMPLATE_DATA_MATCHERS: Array<[string, keyof typeof DATA]> = [
-  ['hierarchy-', 'hierarchy'],
-  ['compare-', 'compare'],
-  ['swot-', 'swot'],
-  ['chart-wordcloud', 'wordcloud'],
-];
-const getDefaultDataString = (key: keyof typeof DATA) =>
-  JSON.stringify(DATA[key].value, null, 2);
-const getDataByTemplate = (nextTemplate: string): keyof typeof DATA => {
-  for (const [prefix, dataKey] of TEMPLATE_DATA_MATCHERS) {
-    if (nextTemplate.startsWith(prefix)) {
-      return dataKey;
-    }
-  }
-  return 'list';
-};
+const getDefaultDataString = (key: DataKey) =>
+  JSON.stringify(DATASET[key], null, 2);
+
+const resolvePreviewDataKey = (data: unknown) =>
+  DATA_KEYS.find((key) => DATASET[key] === data) ?? DEFAULT_DATA_KEY;
 
 export const Preview = () => {
   // Get stored values with validation
   const storedValues = getStoredValues<{
     template: string;
-    data: keyof typeof DATA;
+    data: DataKey;
     theme: 'light' | 'dark' | 'hand-drawn';
     colorPrimary: string;
     enablePrimary: boolean;
@@ -57,7 +34,7 @@ export const Preview = () => {
     }
 
     // Validate data
-    const dataKeys = Object.keys(DATA) as (keyof typeof DATA)[];
+    const dataKeys = DATA_KEYS;
     if (stored.data && !dataKeys.includes(stored.data)) {
       fallbacks.data = dataKeys[0];
     }
@@ -66,20 +43,20 @@ export const Preview = () => {
   });
 
   const initialTemplate = storedValues?.template || templates[0];
-  const initialData = storedValues?.data || 'list';
+  const initialData = storedValues?.data || DEFAULT_DATA_KEY;
   const initialTheme = storedValues?.theme || 'light';
   const initialColorPrimary = storedValues?.colorPrimary || '#FF356A';
   const initialEnablePrimary = storedValues?.enablePrimary ?? true;
   const initialEnablePalette = storedValues?.enablePalette || false;
 
   const [template, setTemplate] = useState(initialTemplate);
-  const [data, setData] = useState<keyof typeof DATA>(initialData);
+  const [data, setData] = useState<DataKey>(initialData);
   const [theme, setTheme] = useState<string>(initialTheme);
   const [colorPrimary, setColorPrimary] = useState(initialColorPrimary);
   const [enablePrimary, setEnablePrimary] = useState(initialEnablePrimary);
   const [enablePalette, setEnablePalette] = useState(initialEnablePalette);
   const [customData, setCustomData] = useState<string>(() =>
-    JSON.stringify(DATA[initialData].value, null, 2),
+    JSON.stringify(DATASET[initialData], null, 2),
   );
   const [dataError, setDataError] = useState<string>('');
 
@@ -125,10 +102,14 @@ export const Preview = () => {
 
   const applyTemplate = (nextTemplate: string) => {
     const nextData = getDataByTemplate(nextTemplate);
+    const nextSelection = {
+      key: resolvePreviewDataKey(nextData),
+      data: nextData,
+    };
     setTemplate(nextTemplate);
-    if (nextData !== data) {
-      setData(nextData);
-      setCustomData(getDefaultDataString(nextData));
+    if (nextSelection.key !== data) {
+      setData(nextSelection.key);
+      setCustomData(JSON.stringify(nextSelection.data, null, 2));
       setDataError('');
     }
   };
@@ -161,7 +142,7 @@ export const Preview = () => {
       return parsed;
     } catch (error) {
       setDataError(error instanceof Error ? error.message : 'Invalid JSON');
-      return DATA[data].value;
+      return DATASET[data];
     }
   }, [customData, data]);
 
@@ -251,8 +232,8 @@ export const Preview = () => {
               <Form.Item label="数据">
                 <Select
                   value={data}
-                  options={Object.entries(DATA).map(([key, { label }]) => ({
-                    label,
+                  options={DATA_KEYS.map((key) => ({
+                    label: key,
                     value: key,
                   }))}
                   onChange={(value) => {