@agions/taroviz 1.11.1 → 2.0.3

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

@@ -6,6 +6,8 @@
  */
 
 import { PlatformType } from '../core';
+import { detectRuntime } from '../core/utils/runtime';
+import type { RuntimeInfo } from '../core/utils/runtime';
 import type { AdapterOptions, Adapter } from './types';
 
 /**
@@ -31,40 +33,37 @@ const PLATFORM_CONFIGS: Record<PlatformType, PlatformConfig> = {
   [PlatformType.HARMONY]: { name: 'HarmonyOS', requireComponent: true },
 };
 
+/** Map RuntimeInfo miniAppType to PlatformType */
+const MINI_APP_TO_PLATFORM: Record<string, PlatformType> = {
+  weapp: PlatformType.WEAPP,
+  alipay: PlatformType.ALIPAY,
+  swan: PlatformType.SWAN,
+  tt: PlatformType.TT,
+  qq: PlatformType.QQ,
+  jd: PlatformType.JD,
+  dd: PlatformType.DD,
+  qywx: PlatformType.QYWX,
+  lark: PlatformType.LARK,
+  kwai: PlatformType.KWAI,
+};
+
 /**
  * 检测当前运行的平台环境
+ *
+ * Delegates to the unified detectRuntime() and maps the result to PlatformType.
+ * Also checks for HarmonyOS via userAgent, which is not a mini-app.
  */
 export function detectPlatform(): PlatformType {
-  if (typeof window === 'undefined') {
-    return PlatformType.H5;
+  const runtime: RuntimeInfo = detectRuntime();
+
+  if (runtime.platform === 'miniapp' && runtime.miniAppType) {
+    return MINI_APP_TO_PLATFORM[runtime.miniAppType] ?? PlatformType.H5;
   }
 
-  const win = window as Window & {
-    wx?: { getSystemInfoSync?: unknown; qy?: unknown };
-    my?: { getSystemInfoSync?: unknown };
-    swan?: { getSystemInfoSync?: unknown };
-    tt?: { getSystemInfoSync?: unknown; env?: { appName?: string } };
-    qq?: { getSystemInfoSync?: unknown };
-    jd?: { getSystemInfoSync?: unknown };
-    dd?: { getSystemInfoSync?: unknown };
-  };
-
-  const checks: Array<{ test: () => boolean; platform: PlatformType }> = [
-    { test: () => !!win.wx?.getSystemInfoSync && !win.wx?.qy, platform: PlatformType.WEAPP },
-    { test: () => !!win.my?.getSystemInfoSync, platform: PlatformType.ALIPAY },
-    { test: () => !!win.swan?.getSystemInfoSync, platform: PlatformType.SWAN },
-    { test: () => !!win.tt?.getSystemInfoSync, platform: PlatformType.TT },
-    { test: () => !!win.qq?.getSystemInfoSync, platform: PlatformType.QQ },
-    { test: () => !!win.jd?.getSystemInfoSync, platform: PlatformType.JD },
-    { test: () => !!win.dd?.getSystemInfoSync, platform: PlatformType.DD },
-    { test: () => !!win.wx?.qy, platform: PlatformType.QYWX },
-    { test: () => win.tt?.env?.appName === 'lark', platform: PlatformType.LARK },
-    { test: () => navigator.userAgent.includes('HarmonyOS'), platform: PlatformType.HARMONY },
-  ];
-
-  for (const check of checks) {
-    if (check.test()) {
-      return check.platform;
+  // HarmonyOS: detected via userAgent in browser context
+  if (runtime.platform === 'browser' && typeof navigator !== 'undefined') {
+    if (navigator.userAgent.includes('HarmonyOS')) {
+      return PlatformType.HARMONY;
     }
   }
 
@@ -75,13 +74,12 @@ export function detectPlatform(): PlatformType {
  * 判断运行环境
  */
 export function getEnv(): 'h5' | 'weapp' | 'unknown' {
-  if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+  const runtime = detectRuntime();
+
+  if (runtime.isBrowser) {
     return 'h5';
   }
-  if (
-    typeof global !== 'undefined' &&
-    (global as Global & { wx?: { getSystemInfoSync?: unknown } })?.wx?.getSystemInfoSync
-  ) {
+  if (runtime.isMiniApp && runtime.miniAppType === 'weapp') {
     return 'weapp';
   }
   return 'unknown';
@@ -114,34 +112,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 +158,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;