@agions/taroviz 1.7.0 → 1.10.0

package/src/core/themes/ThemeManager.ts

@@ -578,6 +578,39 @@ class ThemeManager {
     return this.currentTheme.isDark || this.currentTheme.type === 'dark';
   }
 
+  /**
+   * 检测系统 prefers-color-scheme 是否为暗色
+   */
+  public getSystemPrefersDark(): boolean {
+    if (typeof window === 'undefined') return false;
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+  }
+
+  /**
+   * 订阅系统主题变化，自动切换匹配的主题
+   * @returns 取消订阅的函数
+   */
+  public watchSystemTheme(): () => void {
+    if (typeof window === 'undefined') return () => {};
+
+    const mq = window.matchMedia('(prefers-color-scheme: dark)');
+    const handler = (e: MediaQueryListEvent) => {
+      // 当系统主题切换时，自动应用对应主题
+      this.setTheme(e.matches ? 'dark' : 'default');
+    };
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }
+
+  /**
+   * 应用初始主题（根据系统偏好自动选择 dark/default）
+   * 必须在 DOM 加载后调用
+   */
+  public applyInitialTheme(): void {
+    const prefersDark = this.getSystemPrefersDark();
+    this.setTheme(prefersDark ? 'dark' : 'default');
+  }
+
   /**
    * 注册主题变更监听器
    */

package/src/core/types/common.ts

@@ -1,12 +1,31 @@
 /**
  * ECharts 类型定义
  */
-export type EChartsOption = any;
+export type { EChartsOption } from 'echarts';
+
+/**
+ * 图表事件参数类型
+ * 使用 ECharts 内的事件参数接口
+ */
+export interface ChartEventParams {
+  componentType?: string;
+  seriesType?: string;
+  seriesIndex?: number;
+  seriesName?: string;
+  name?: string;
+  dataIndex?: number;
+  data?: unknown;
+  value?: unknown;
+  color?: string;
+  borderColor?: string;
+  borderWidth?: number;
+  target?: unknown;
+}
 
 /**
  * 图表事件监听器
  */
-export type ChartEventListener = Record<string, (params: any) => void>;
+export type ChartEventListener = Record<string, (params: ChartEventParams) => void>;
 
 /**
  * 图表渲染器类型
@@ -17,24 +36,9 @@ export type ChartRenderer = 'canvas' | 'svg';
  * DataURL选项
  */
 export interface DataURLOption {
-  /**
-   * 导出的图片类型
-   */
   type?: 'png' | 'jpeg';
-
-  /**
-   * 设备像素比
-   */
   pixelRatio?: number;
-
-  /**
-   * 背景色
-   */
   backgroundColor?: string;
-
-  /**
-   * 排除的组件列表
-   */
   excludeComponents?: string[];
 }
 
@@ -42,14 +46,7 @@ export interface DataURLOption {
  * 图表尺寸类型
  */
 export interface ChartSize {
-  /**
-   * 宽度
-   */
   width?: number | string;
-
-  /**
-   * 高度
-   */
   height?: number | string;
 }
 
@@ -57,29 +54,10 @@ export interface ChartSize {
  * 图表动画设置
  */
 export interface ChartAnimation {
-  /**
-   * 是否启用动画
-   */
   enabled?: boolean;
-
-  /**
-   * 动画时长
-   */
   duration?: number;
-
-  /**
-   * 动画缓动效果
-   */
   easing?: string;
-
-  /**
-   * 初始动画时长
-   */
   animationDuration?: number;
-
-  /**
-   * 更新动画时长
-   */
   animationDurationUpdate?: number;
 }
 
@@ -87,29 +65,10 @@ export interface ChartAnimation {
  * 图表主题设置
  */
 export interface ChartTheme {
-  /**
-   * 主题名称或配置
-   */
   theme?: string | object;
-
-  /**
-   * 背景色
-   */
   backgroundColor?: string;
-
-  /**
-   * 文本颜色
-   */
   textColor?: string;
-
-  /**
-   * 轴线颜色
-   */
   axisLineColor?: string;
-
-  /**
-   * 分割线颜色
-   */
   splitLineColor?: string;
 }
 
@@ -117,64 +76,17 @@ export interface ChartTheme {
  * 图表加载状态配置
  */
 export interface ChartLoadingOptions {
-  /**
-   * 加载提示文本
-   */
   text?: string;
-
-  /**
-   * 加载动画颜色
-   */
   color?: string;
-
-  /**
-   * 文本颜色
-   */
   textColor?: string;
-
-  /**
-   * 遮罩颜色
-   */
   maskColor?: string;
-
-  /**
-   * z层级
-   */
   zlevel?: number;
-
-  /**
-   * 字体大小
-   */
   fontSize?: number;
-
-  /**
-   * 是否显示旋转器
-   */
   showSpinner?: boolean;
-
-  /**
-   * 旋转器半径
-   */
   spinnerRadius?: number;
-
-  /**
-   * 线宽
-   */
   lineWidth?: number;
-
-  /**
-   * 字体粗细
-   */
   fontWeight?: number | string;
-
-  /**
-   * 字体样式
-   */
   fontStyle?: string;
-
-  /**
-   * 字体族
-   */
   fontFamily?: string;
 }
 
@@ -216,7 +128,6 @@ export enum ChartEventType {
   BRUSHSELECTED = 'brushselected',
   RENDERED = 'rendered',
   FINISHED = 'finished',
-  // 自定义事件
   CHART_READY = 'chartReady',
   CHART_RESIZE = 'chartResize',
   CHART_ERROR = 'chartError',

package/src/core/types/index.ts

@@ -10,14 +10,12 @@ export * from './chart';
 import type { EChartsType } from 'echarts';
 
 import { ChartOptions } from './chart';
+import { ChartEventParams } from './common';
 
 /**
  * TaroViz核心类型定义
  */
 
-/**
- * ECharts类型定义
- */
 export { EChartsType };
 
 // 导出动画相关类型
@@ -72,7 +70,7 @@ export type RendererType = 'canvas' | 'svg';
 /**
  * 图表事件回调类型
  */
-export type ChartEventCallback = (params: any) => void;
+export type ChartEventCallback = (params: ChartEventParams) => void;
 
 /**
  * 图表事件处理器映射
@@ -122,160 +120,31 @@ export interface ThemeType {
       fontSize?: number;
     };
   };
-  [key: string]: any;
+  [key: string]: unknown;
 }
 
 /**
  * 渲染性能优化配置
  */
 export interface RenderOptimizationConfig {
-  /**
-   * 是否开启渐进式渲染
-   */
   progressive?: boolean;
-
-  /**
-   * 渐进式渲染的阈值
-   */
   progressiveThreshold?: number;
-
-  /**
-   * 是否启用懒更新
-   */
   lazyUpdate?: boolean;
-
-  /**
-   * 是否启用动画
-   */
   animation?: boolean;
-
-  /**
-   * 是否启用硬件加速
-   */
   hardwareAcceleration?: boolean;
-
-  /**
-   * 帧率限制
-   */
   frameRate?: number;
 }
 
-/**
- * 适配器接口定义
- */
-export interface Adapter {
-  /**
-   * 初始化图表
-   */
-  init(options?: any): EChartsType;
-
-  /**
-   * 设置图表配置
-   */
-  setOption(option: any, notMerge?: boolean): void;
-
-  /**
-   * 获取图表实例
-   */
-  getInstance(): EChartsType | null;
-
-  /**
-   * 设置组件实例
-   */
-  setComponent?(component: any): void;
-
-  /**
-   * 绑定事件
-   */
-  on(eventName: string, handler: (params: any) => void): void;
-
-  /**
-   * 解绑事件
-   */
-  off(eventName: string, handler?: (params: any) => void): void;
-
-  /**
-   * 调整图表大小
-   */
-  resize(): void;
-
-  /**
-   * 显示加载中
-   */
-  showLoading(options?: any): void;
-
-  /**
-   * 隐藏加载中
-   */
-  hideLoading(): void;
-
-  /**
-   * 清空图表
-   */
-  clear(): void;
-
-  /**
-   * 销毁图表
-   */
-  dispose(): void;
-
-  /**
-   * 获取DataURL
-   */
-  getDataURL?(opts?: any): string | undefined;
-
-  /**
-   * 转换为DataURL
-   */
-  convertToDataURL?(opts?: any): string | undefined;
-
-  /**
-   * 渲染图表（仅 H5 环境需要，小程序适配器不需要）
-   */
-  render?(): JSX.Element | null;
-}
-
 /**
  * 适配器配置选项
  */
 export interface AdapterConfig {
-  /**
-   * 平台类型
-   */
   platformType?: string;
-
-  /**
-   * 目标canvas元素ID
-   */
   canvasId?: string;
-
-  /**
-   * 图表主题
-   */
   theme?: string;
-
-  /**
-   * 渲染器类型
-   */
   renderer?: 'canvas' | 'svg';
-
-  /**
-   * 设备像素比
-   */
   devicePixelRatio?: number;
-
-  /**
-   * 宽度
-   */
   width?: number;
-
-  /**
-   * 高度
-   */
   height?: number;
-
-  /**
-   * 额外选项
-   */
-  [key: string]: any;
+  [key: string]: unknown;
 }