@agions/taroviz 1.10.0 → 1.11.5

package/src/adapters/harmony/index.ts

@@ -1,274 +1,52 @@
 /**
  * TaroViz HarmonyOS适配器
  * 基于HarmonyOS Canvas实现图表渲染
+ * 继承 MiniAppAdapter，复用通用逻辑
  */
 import * as React from 'react';
 
-import { Adapter, AdapterOptions } from '../types';
-
-// 扩展 AdapterOptions 类型
-interface ExtendedHarmonyAdapterOptions extends AdapterOptions {
-  /**
-   * HarmonyOS组件实例
-   */
-  component?: any;
-  /**
-   * 画布ID
-   */
-  canvasId?: string;
-  /**
-   * 宽度
-   */
-  width?: number | string;
-  /**
-   * 高度
-   */
-  height?: number | string;
-  /**
-   * 主题
-   */
-  theme?: string | object;
-  /**
-   * 图表选项
-   */
-  option?: any;
-  /**
-   * 初始化回调
-   */
-  onInit?: (instance: any) => void;
-}
+import type { EChartsType } from 'echarts';
+import { MiniAppAdapter, createMiniAppAdapter } from '../MiniAppAdapter';
 
 /**
  * HarmonyOS环境下的图表适配器
  */
-class HarmonyAdapter implements Adapter {
-  /**
-   * 配置项
-   */
-  private config: ExtendedHarmonyAdapterOptions;
-
-  /**
-   * 图表实例
-   */
-  private chartInstance: any | null = null;
-
-  /**
-   * 组件实例
-   */
-  private component: any | null = null;
-
-  /**
-   * 构造函数
-   * @param config 适配器配置
-   */
-  constructor(config: ExtendedHarmonyAdapterOptions) {
-    this.config = config;
-    this.component = config.component;
-  }
-
-  /**
-   * 创建HarmonyOS适配器实例
-   * @param options 适配器选项
-   * @returns 适配器实例
-   */
-  static create(options: ExtendedHarmonyAdapterOptions): HarmonyAdapter {
-    return new HarmonyAdapter(options);
-  }
-
-  /**
-   * 获取图表实例
-   */
-  getInstance(): any {
-    return this.chartInstance;
-  }
-
-  /**
-   * 初始化图表
-   */
-  init(): any {
-    const { canvasId, width, height, theme, option } = this.config;
-
-    if (!this.component) {
-      console.error('[TaroViz] HarmonyAdapter: component is required');
-      return null;
-    }
-
-    if (!canvasId) {
-      console.error('[TaroViz] HarmonyAdapter: canvasId is required');
-      return null;
-    }
-
-    // 创建图表实例
-    const chart = this.component.createChart({
-      id: canvasId,
-      width: width,
-      height: height,
-      theme: theme,
-    });
-
-    // 设置图表选项
-    if (option) {
-      chart.setOption(option);
-    }
-
-    // 存储图表实例
-    this.chartInstance = chart;
-
-    // 初始化回调
-    if (this.config.onInit) {
-      this.config.onInit(chart);
-    }
-
-    return chart;
-  }
-
-  /**
-   * 设置图表选项
-   */
-  setOption(option: any, opts?: any): void {
-    if (this.chartInstance) {
-      this.chartInstance.setOption(option, opts);
-    } else {
-      this.config.option = option;
-    }
-  }
-
-  /**
-   * 设置主题
-   */
-  setTheme(theme: string | object): void {
-    this.config.theme = theme;
-    if (this.chartInstance) {
-      this.chartInstance.setTheme?.(theme);
-    }
-  }
-
-  /**
-   * 获取图表宽度
-   */
-  getWidth(): number {
-    return 0;
-  }
-
-  /**
-   * 获取图表高度
-   */
-  getHeight(): number {
-    return 0;
-  }
-
-  /**
-   * 获取DOM元素
-   */
-  getDom(): HTMLElement | null {
-    return null;
-  }
-
-  /**
-   * 转换为DataURL
-   */
-  convertToDataURL(opts?: any): string | undefined {
-    return this.chartInstance?.getDataURL(opts);
-  }
-
-  /**
-   * 清空图表
-   */
-  clear(): void {
-    if (this.chartInstance) {
-      this.chartInstance.clear();
-    }
-  }
-
+class HarmonyAdapter extends MiniAppAdapter {
   /**
-   * 绑定事件
+   * 平台名称
    */
-  on(event: string, handler: (params: any) => void): void {
-    if (this.chartInstance) {
-      this.chartInstance.on(event, handler);
-    }
+  protected get platformName(): string {
+    return 'Harmony';
   }
 
   /**
-   * 解绑事件
+   * 初始化图表（覆盖父类方法，返回 EChartsType）
    */
-  off(event: string, handler?: (params: any) => void): void {
-    if (this.chartInstance) {
-      this.chartInstance.off(event, handler);
-    }
-  }
-
-  /**
-   * 显示加载动画
-   */
-  showLoading(opts?: object): void {
-    if (this.chartInstance) {
-      this.chartInstance.showLoading(opts);
-    }
-  }
-
-  /**
-   * 隐藏加载动画
-   */
-  hideLoading(): void {
-    if (this.chartInstance) {
-      this.chartInstance.hideLoading();
-    }
-  }
-
-  /**
-   * 销毁图表
-   */
-  dispose(): void {
-    if (this.chartInstance) {
-      this.chartInstance.dispose();
-      this.chartInstance = null;
-    }
-  }
-
-  /**
-   * 处理图表大小变化
-   */
-  resize(opts?: any): void {
-    if (this.chartInstance) {
-      this.chartInstance.resize(opts);
-    }
-  }
-
-  /**
-   * 设置组件实例
-   */
-  setComponent(component: any): void {
-    this.component = component;
+  init(): EChartsType {
+    const result = super.init();
+    return result as EChartsType;
   }
 
   /**
    * 渲染图表组件
    */
-  render(): JSX.Element {
-    const { canvasId = 'ec-canvas', width = '100%', height = '300px', style = {} } = this.config;
-    // 注意：这里需要根据实际使用的Taro版本和组件库来调整
+  render(): React.ReactElement {
+    const config = this.config;
+    const canvasId = (config.canvasId as string) || 'ec-canvas';
+    const width = (config.width as string) || '100%';
+    const height = (config.height as string) || '300px';
+    const style = (config.style as React.CSSProperties) || {};
+
     return React.createElement('view', {
       id: canvasId,
       style: { width, height, ...style },
     });
   }
-
-  /**
-   * 触发图表行为
-   */
-  dispatchAction(payload: any): void {
-    if (this.chartInstance) {
-      this.chartInstance.dispatchAction(payload);
-    }
-  }
-
-  /**
-   * 获取DataURL
-   */
-  getDataURL(opts?: any): string | undefined {
-    return this.chartInstance?.getDataURL(opts);
-  }
 }
 
+/**
+ * 创建 Harmony 适配器
+ */
+export const createHarmonyAdapter = createMiniAppAdapter(HarmonyAdapter);
+
 export default HarmonyAdapter;

package/src/adapters/index.ts

@@ -114,34 +114,39 @@ export async function getAdapter(options: AdapterOptions): Promise<Adapter> {
       case PlatformType.LARK:
       case PlatformType.KWAI: {
         const { default: h5Adapter } = await import('./h5');
-        return h5Adapter.create(options);
+
+        return h5Adapter.create(options as any);
       }
       case PlatformType.WEAPP: {
-        const { default: weappAdapter } = await import('./weapp');
-        return weappAdapter.create(options);
+        const { createWeappAdapter } = await import('./weapp');
+        return createWeappAdapter(options as any);
       }
       case PlatformType.SWAN: {
-        const { default: swanAdapter } = await import('./swan');
-        return swanAdapter.create(options);
+        const { createSwanAdapter } = await import('./swan');
+        return createSwanAdapter(options as any);
       }
       case PlatformType.TT: {
-        const { default: ttAdapter } = await import('./tt');
-        return ttAdapter.create(options);
+        const { createTTAdapter } = await import('./tt');
+        return createTTAdapter(options as any);
       }
       case PlatformType.HARMONY: {
-        const { default: harmonyAdapter } = await import('./harmony');
-        return harmonyAdapter.create(options);
+        const { HarmonyAdapter } = (await import('./harmony')) as unknown as {
+          HarmonyAdapter: { create: (opts: object) => Adapter };
+        };
+        return HarmonyAdapter.create(options);
       }
       default: {
         const { default: h5Adapter } = await import('./h5');
-        return h5Adapter.create(options);
+
+        return h5Adapter.create(options as any);
       }
     }
   } catch (error) {
     console.error(`[TaroViz] Failed to load adapter for platform '${platform}':`, error);
     // 降级到 H5 适配器
     const { default: h5Adapter } = await import('./h5');
-    return h5Adapter.create(options);
+
+    return h5Adapter.create(options as any);
   }
 }
 
@@ -155,7 +160,8 @@ export { default as HarmonyAdapter } from './harmony';
 /**
  * 版本信息
  */
-export const version = '1.2.0';
+// 导出版本信息
+export { VERSION as version } from '../core/version';
 
 export * from './types';
 

package/src/adapters/swan/index.ts

@@ -1,77 +1,14 @@
 /**
  * TaroViz 百度小程序适配器
- * 基于百度小程序canvas组件实现图表渲染
  */
+import { MiniAppAdapter, createMiniAppAdapter } from '../MiniAppAdapter';
+import type { SwanAdapterOptions } from '../types';
 
-import { BaseAdapter } from '../BaseAdapter';
-import type { Adapter, SwanAdapterOptions } from '../types';
-
-export class SwanAdapter extends BaseAdapter {
-  private component: unknown = null;
-
-  constructor(config: SwanAdapterOptions) {
-    super(config);
-    this.component = config.component;
-  }
-
-  static create(options: SwanAdapterOptions): Adapter {
-    return new SwanAdapter(options) as unknown as Adapter;
-  }
-
-  init(): unknown {
-    const config = this.config as SwanAdapterOptions & { canvasId?: string };
-    const { canvasId, width, height, theme, option } = config;
-
-    if (!this.component) {
-      console.error('[TaroViz] SwanAdapter: component is required');
-      return null;
-    }
-
-    if (!canvasId) {
-      console.error('[TaroViz] SwanAdapter: canvasId is required');
-      return null;
-    }
-
-    const chart = (this.component as { createChart: (config: unknown) => unknown }).createChart({
-      id: canvasId,
-      width,
-      height,
-      theme,
-    });
-
-    if (option) {
-      (chart as { setOption: (o: unknown) => void }).setOption(option);
-    }
-
-    this.chartInstance = chart;
-
-    const onInit = this.config['onInit'] as ((instance: unknown) => void) | undefined;
-    if (onInit) {
-      onInit(chart);
-    }
-
-    return chart;
-  }
-
-  getWidth(): number {
-    return this.parseSize((this.config as SwanAdapterOptions).width, 300);
-  }
-
-  getHeight(): number {
-    return this.parseSize((this.config as SwanAdapterOptions).height, 300);
-  }
-
-  setComponent(component: unknown): void {
-    this.component = component;
-  }
-
-  dispatchAction(action: unknown): void {
-    (this.chartInstance as { dispatchAction?: (a: unknown) => void })?.dispatchAction?.(action);
-  }
-
-  getDataURL(opts?: unknown): string | undefined {
-    return (this.chartInstance as { getDataURL?: (o?: unknown) => string })?.getDataURL?.(opts);
+export class SwanAdapter extends MiniAppAdapter {
+  protected get platformName(): string {
+    return 'Swan';
   }
 }
 
+export const createSwanAdapter = createMiniAppAdapter(SwanAdapter);
 export default SwanAdapter;

package/src/adapters/tt/index.ts

@@ -1,77 +1,14 @@
 /**
- * TaroViz 抖音小程序适配器
- * 基于抖音小程序canvas组件实现图表渲染
+ * TaroViz 字节跳动小程序适配器
  */
+import { MiniAppAdapter, createMiniAppAdapter } from '../MiniAppAdapter';
+import type { TTAdapterOptions } from '../types';
 
-import { BaseAdapter } from '../BaseAdapter';
-import type { Adapter, TTAdapterOptions } from '../types';
-
-export class TTAdapter extends BaseAdapter {
-  private component: unknown = null;
-
-  constructor(config: TTAdapterOptions) {
-    super(config);
-    this.component = config.component;
-  }
-
-  static create(options: TTAdapterOptions): Adapter {
-    return new TTAdapter(options) as unknown as Adapter;
-  }
-
-  init(): unknown {
-    const config = this.config as TTAdapterOptions & { canvasId?: string };
-    const { canvasId, width, height, theme, option } = config;
-
-    if (!this.component) {
-      console.error('[TaroViz] TTAdapter: component is required');
-      return null;
-    }
-
-    if (!canvasId) {
-      console.error('[TaroViz] TTAdapter: canvasId is required');
-      return null;
-    }
-
-    const chart = (this.component as { createChart: (config: unknown) => unknown }).createChart({
-      id: canvasId,
-      width,
-      height,
-      theme,
-    });
-
-    if (option) {
-      (chart as { setOption: (o: unknown) => void }).setOption(option);
-    }
-
-    this.chartInstance = chart;
-
-    const onInit = this.config['onInit'] as ((instance: unknown) => void) | undefined;
-    if (onInit) {
-      onInit(chart);
-    }
-
-    return chart;
-  }
-
-  getWidth(): number {
-    return this.parseSize((this.config as TTAdapterOptions).width, 300);
-  }
-
-  getHeight(): number {
-    return this.parseSize((this.config as TTAdapterOptions).height, 300);
-  }
-
-  setComponent(component: unknown): void {
-    this.component = component;
-  }
-
-  dispatchAction(action: unknown): void {
-    (this.chartInstance as { dispatchAction?: (a: unknown) => void })?.dispatchAction?.(action);
-  }
-
-  getDataURL(opts?: unknown): string | undefined {
-    return (this.chartInstance as { getDataURL?: (o?: unknown) => string })?.getDataURL?.(opts);
+export class TTAdapter extends MiniAppAdapter {
+  protected get platformName(): string {
+    return 'TT';
   }
 }
 
+export const createTTAdapter = createMiniAppAdapter(TTAdapter);
 export default TTAdapter;

package/src/adapters/types.ts

@@ -20,10 +20,9 @@ export interface AdapterOptions {
   width?: number | string;
   height?: number | string;
   theme?: string | object;
-  /** 初始化完成回调 */
+  option?: unknown;
+
   onInit?: (instance: EChartsType) => void;
-  /** 图表配置 */
-  option?: EChartsOption;
   style?: CSSProperties;
   autoResize?: boolean;
   devicePixelRatio?: number;

package/src/adapters/weapp/index.ts

@@ -1,77 +1,14 @@
 /**
  * TaroViz 微信小程序适配器
- * 基于微信小程序canvas组件实现图表渲染
  */
+import { MiniAppAdapter, createMiniAppAdapter } from '../MiniAppAdapter';
+import type { WeappAdapterOptions } from '../types';
 
-import { BaseAdapter } from '../BaseAdapter';
-import type { Adapter, WeappAdapterOptions } from '../types';
-
-export class WeappAdapter extends BaseAdapter {
-  private component: unknown = null;
-
-  constructor(config: WeappAdapterOptions) {
-    super(config);
-    this.component = config.component;
-  }
-
-  static create(options: WeappAdapterOptions): Adapter {
-    return new WeappAdapter(options) as unknown as Adapter;
-  }
-
-  init(): unknown {
-    const config = this.config as WeappAdapterOptions & { canvasId?: string };
-    const { canvasId, width, height, theme, option } = config;
-
-    if (!this.component) {
-      console.error('[TaroViz] WeappAdapter: component is required');
-      return null;
-    }
-
-    if (!canvasId) {
-      console.error('[TaroViz] WeappAdapter: canvasId is required');
-      return null;
-    }
-
-    const chart = (this.component as { createChart: (config: unknown) => unknown }).createChart({
-      id: canvasId,
-      width,
-      height,
-      theme,
-    });
-
-    if (option) {
-      (chart as { setOption: (o: unknown) => void }).setOption(option);
-    }
-
-    this.chartInstance = chart;
-
-    const onInit = this.config['onInit'] as ((instance: unknown) => void) | undefined;
-    if (onInit) {
-      onInit(chart);
-    }
-
-    return chart;
-  }
-
-  getWidth(): number {
-    return this.parseSize((this.config as WeappAdapterOptions).width, 300);
-  }
-
-  getHeight(): number {
-    return this.parseSize((this.config as WeappAdapterOptions).height, 300);
-  }
-
-  setComponent(component: unknown): void {
-    this.component = component;
-  }
-
-  dispatchAction(action: unknown): void {
-    (this.chartInstance as { dispatchAction?: (a: unknown) => void })?.dispatchAction?.(action);
-  }
-
-  getDataURL(opts?: unknown): string | undefined {
-    return (this.chartInstance as { getDataURL?: (o?: unknown) => string })?.getDataURL?.(opts);
+export class WeappAdapter extends MiniAppAdapter {
+  protected get platformName(): string {
+    return 'Weapp';
   }
 }
 
+export const createWeappAdapter = createMiniAppAdapter(WeappAdapter);
 export default WeappAdapter;