feat: add chart bar/pie/donut (#66)

* refactor(designs): optimize plain text support line number

* refactor(designs): add chart bar/line/pie structures

* refactor(site): adjust site gallery dataset and templates

* refactor(dev): adjust dev page

* refactor(designs): optimize designs

* refactor(site): update ai playground prompt

* refactor(utils): move hash to global

* refactor: fix cr issues

* refactor(runtime): change infographic default options

* refactor(site): update ai template list

Author: Aarebecca

__tests__/unit/resource/utils/ref.test.ts

@@ -1,17 +1,17 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { parseDataURI } from '../../../../src/resource/utils/data-uri';
-import { getSimpleHash } from '../../../../src/resource/utils/hash';
 import {
   getResourceHref,
   getResourceId,
 } from '../../../../src/resource/utils/ref';
+import { getSimpleHash } from '../../../../src/utils';
 
 // Mock dependencies
 vi.mock('../../../../src/resource/utils/data-uri', () => ({
   parseDataURI: vi.fn(),
 }));
 
-vi.mock('../../../../src/resource/utils/hash', () => ({
+vi.mock('../../../../src/utils', () => ({
   getSimpleHash: vi.fn(),
 }));
 

__tests__/unit/runtime/utils.test.ts

@@ -0,0 +1,68 @@
+import { describe, expect, it } from 'vitest';
+import type { InfographicOptions } from '../../../src/options/types';
+import { mergeOptions } from '../../../src/runtime/utils';
+
+describe('runtime/utils', () => {
+  describe('mergeOptions', () => {
+    it('prefers source overrides while keeping unrelated base fields', () => {
+      const base: Partial<InfographicOptions> = {
+        width: 400,
+        height: 200,
+        padding: 12,
+      };
+      const overrides: Partial<InfographicOptions> = {
+        width: 800,
+        theme: 'dark',
+      };
+
+      const merged = mergeOptions(base, overrides);
+
+      expect(merged.width).toBe(800);
+      expect(merged.height).toBe(200);
+      expect(merged.padding).toBe(12);
+      expect(merged.theme).toBe('dark');
+    });
+
+    it('combines nested design, themeConfig, and svg objects', () => {
+      const base: Partial<InfographicOptions> = {
+        design: {
+          structure: { type: 'base-structure' },
+          title: 'base-title',
+        },
+        themeConfig: {
+          palette: 'light',
+        },
+        svg: {
+          attributes: {
+            viewBox: '0 0 200 200',
+          },
+        },
+      };
+      const overrides: Partial<InfographicOptions> = {
+        design: {
+          title: 'override-title',
+          items: ['override-item'],
+        },
+        themeConfig: {
+          palette: 'dark',
+        },
+        svg: {
+          style: {
+            display: 'block',
+          },
+        },
+      };
+
+      const merged = mergeOptions(base, overrides);
+
+      expect(merged.design?.structure).toEqual(base.design?.structure);
+      expect(merged.design?.title).toBe('override-title');
+      expect(merged.design?.items).toEqual(['override-item']);
+
+      expect(merged.themeConfig?.palette).toBe('dark');
+
+      expect(merged.svg?.attributes).toEqual(base.svg?.attributes);
+      expect(merged.svg?.style).toEqual(overrides.svg?.style);
+    });
+  });
+});

…tests__/unit/resource/utils/hash.test.ts __tests__/unit/utils/hash.test.ts__tests__/unit/resource/utils/hash.test.ts renamed to __tests__/unit/utils/hash.test.ts __tests__/unit/resource/utils/hash.test.ts renamed to __tests__/unit/utils/hash.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { getSimpleHash } from '../../../../src/resource/utils/hash';
+import { getSimpleHash } from '../../../src/utils';
 
 describe('hash', () => {
   describe('getSimpleHash', () => {

dev/src/Composite.tsx

@@ -198,6 +198,7 @@ export const Composite = () => {
 
     const value: InfographicOptions = {
       padding: 20,
+      editable: true,
       design: {
         title: 'default',
         structure: structureObj,

dev/src/Preview.tsx

@@ -327,7 +327,6 @@ export const Preview = () => {
             options={{
               template,
               data: parsedData,
-              padding: 20,
               theme,
               themeConfig,
               editable: true,

site/src/components/AIPlayground/Prompt.ts

@@ -30,6 +30,7 @@ export const SYSTEM_PROMPT = `
 interface InfographicOptions {
   data: Data; // 数据
   template?: string; // 模板名称
+  padding?: number; // 信息图内边距，默认 0
   theme?: string; // 主题名称，如果要深色模式，传入 'dark', 否则不传
   themeConfig?: {
     palette?: string[]; // 色板，支持 rgb/rgba/hex 颜色格式
@@ -83,10 +84,17 @@ interface ItemDatum {
 - hierarchy-tree-curved-line-rounded-rect-node
 - hierarchy-tree-tech-style-badge-card
 - chart-column-simple
+- chart-bar-plain-text
+- chart-line-plain-text
+- chart-pie-plain-text
+- chart-pie-compact-card
+- chart-pie-donut-plain-text
+- chart-pie-donut-pill-badge
 
 ## 注意事项
 - 必须严格按照 \`\`\`json 代码块的格式返回信息图配置
 - JSON 必须是有效的格式，可以被解析
 - 根据用户需求或者用户文本的语义，选择最合适的类型
 - 数据要完整、准确
+- 内边距 Padding 建议设置为 20
 `;

site/src/components/Gallery/datasets.ts

@@ -151,21 +151,25 @@ export const DATASET = {
         label: '2021年',
         value: 120,
         desc: '转型初期，稳步试水',
+        icon: 'icon:lucide/sprout',
       },
       {
         label: '2022年',
         value: 150,
         desc: '平台优化，效率显著提升',
+        icon: 'icon:lucide/zap',
       },
       {
         label: '2023年',
         value: 190,
         desc: '深化数智融合，全面增长',
+        icon: 'icon:lucide/brain-circuit',
       },
       {
         label: '2024年',
         value: 240,
         desc: '拓展生态协同，冲击新高',
+        icon: 'icon:lucide/trophy',
       },
     ],
   },