@axiom-lattice/gateway 2.1.39 → 2.1.41

package/public/sdk/data-query-sdk.js

@@ -0,0 +1,970 @@
+/**
+ * Data Query SDK for Axiom Lattice Gateway
+ * 
+ * 用于在浏览器中调用 /api/data/query 接口进行数据查询
+ * 支持语义查询和 SQL 查询，返回原始数据格式
+ * 
+ * @version 3.0.0 - 支持状态机版本
+ * @author Axiom Lattice
+ */
+
+(function (global, factory) {
+  var result;
+  if (typeof exports === 'object' && typeof module !== 'undefined') {
+    result = factory();
+    module.exports = result.DataQuerySDK;
+    module.exports.DashboardEngine = result.DashboardEngine;
+    module.exports.StateManager = result.StateManager;
+    module.exports.validateDashboardConfig = result.validateDashboardConfig;
+    module.exports.globalState = result.globalState;
+  } else if (typeof define === 'function' && define.amd) {
+    define(factory);
+  } else {
+    global = typeof globalThis !== 'undefined' ? globalThis : global || self;
+    result = factory();
+    global.DataQuerySDK = result.DataQuerySDK;
+    global.DashboardEngine = result.DashboardEngine;
+    global.StateManager = result.StateManager;
+    global.validateDashboardConfig = result.validateDashboardConfig;
+    global.globalState = result.globalState;
+  }
+}(this, function () {
+  'use strict';
+
+  // ============================================
+  // StateManager - 全局状态管理器
+  // ============================================
+  class StateManager {
+    constructor() {
+      this.state = new Map();
+      this.listeners = new Map();
+    }
+
+    set(key, value) {
+      const oldValue = this.state.get(key);
+      this.state.set(key, value);
+      
+      if (this.listeners.has(key)) {
+        this.listeners.get(key).forEach(callback => {
+          try {
+            callback(value, oldValue);
+          } catch (error) {
+            console.error(`StateManager: Error in listener for ${key}:`, error);
+          }
+        });
+      }
+    }
+
+    get(key) {
+      return this.state.get(key);
+    }
+
+    subscribe(key, callback) {
+      if (!this.listeners.has(key)) {
+        this.listeners.set(key, new Set());
+      }
+      this.listeners.get(key).add(callback);
+      
+      return () => {
+        if (this.listeners.has(key)) {
+          this.listeners.get(key).delete(callback);
+        }
+      };
+    }
+
+    clear() {
+      this.state.clear();
+      this.listeners.clear();
+    }
+  }
+
+  const globalState = new StateManager();
+
+  // ============================================
+  // ConfigValidator - 配置验证器
+  // ============================================
+  const VALID_WIDGET_TYPES = ['bar', 'line', 'pie', 'scatter', 'kpi', 'table'];
+  const VALID_OPERATORS = ['EQ', 'NE', 'GT', 'LT', 'GTE', 'LTE', 'BETWEEN', 'IN'];
+
+  function validateDashboardConfig(config) {
+    const errors = [];
+
+    if (!config || typeof config !== 'object') {
+      return { valid: false, errors: ['配置必须是对象'] };
+    }
+
+    if (config.filters) {
+      if (!Array.isArray(config.filters)) {
+        errors.push('filters 必须是数组');
+      } else {
+        config.filters.forEach((filter, index) => {
+          validateFilter(filter, index, errors);
+        });
+      }
+    }
+
+    if (!Array.isArray(config.widgets)) {
+      errors.push('widgets 必须是数组');
+    } else if (config.widgets.length === 0) {
+      errors.push('widgets 数组不能为空');
+    } else {
+      config.widgets.forEach((widget, index) => {
+        validateWidget(widget, index, errors, config);
+      });
+    }
+
+    if (config.widgets) {
+      validateStateLoop(config.widgets, errors);
+    }
+
+    return { valid: errors.length === 0, errors };
+  }
+
+  function validateFilter(filter, index, errors) {
+    const prefix = `filters[${index}]`;
+    if (!filter.id) errors.push(`${prefix} 缺少 id`);
+    if (!filter.dimension) errors.push(`${prefix} 缺少 dimension`);
+    if (!filter.operator) {
+      errors.push(`${prefix} 缺少 operator`);
+    } else if (!VALID_OPERATORS.includes(filter.operator)) {
+      errors.push(`${prefix} operator "${filter.operator}" 无效，可选: ${VALID_OPERATORS.join(', ')}`);
+    }
+    if (!filter.emitsToState) errors.push(`${prefix} 缺少 emitsToState`);
+    if (!filter.options || !Array.isArray(filter.options)) {
+      errors.push(`${prefix} 缺少 options 数组`);
+    }
+  }
+
+  function validateWidget(widget, index, errors, config) {
+    const prefix = `widgets[${index}]`;
+    if (!widget.id) errors.push(`${prefix} 缺少 id`);
+    if (!widget.type) {
+      errors.push(`${prefix} 缺少 type`);
+    } else if (!VALID_WIDGET_TYPES.includes(widget.type)) {
+      errors.push(`${prefix} type "${widget.type}" 无效，可选: ${VALID_WIDGET_TYPES.join(', ')}`);
+    }
+    if (!widget.title) errors.push(`${prefix} 缺少 title`);
+
+    if (!widget.query) {
+      errors.push(`${prefix} 缺少 query`);
+    } else {
+      // serverKey 和 datasourceId 可以从 config 或 widget.query 获取，不在 widget.query 层强制要求
+      if (!widget.query.metrics || !Array.isArray(widget.query.metrics)) {
+        errors.push(`${prefix}.query.metrics 必须是数组`);
+      }
+    }
+
+    // table 类型不需要 mapping，其他类型需要
+    if (widget.type !== 'table') {
+      if (!widget.mapping) {
+        errors.push(`${prefix} 缺少 mapping`);
+      } else {
+        validateMapping(widget.mapping, widget.type, prefix, errors);
+      }
+    }
+
+    if (widget.receiveFilters) {
+      if (!Array.isArray(widget.receiveFilters)) {
+        errors.push(`${prefix}.receiveFilters 必须是数组`);
+      } else {
+        widget.receiveFilters.forEach((rf, rfIndex) => {
+          validateReceiveFilter(rf, `${prefix}.receiveFilters[${rfIndex}]`, errors);
+        });
+      }
+    }
+
+    if (widget.emit) {
+      if (!Array.isArray(widget.emit)) {
+        errors.push(`${prefix}.emit 必须是数组`);
+      } else {
+        widget.emit.forEach((em, emIndex) => {
+          validateEmit(em, `${prefix}.emit[${emIndex}]`, errors);
+        });
+      }
+    }
+  }
+
+  function validateMapping(mapping, type, prefix, errors) {
+    if (type === 'pie') {
+      if (!mapping.name) errors.push(`${prefix}.mapping 缺少 name`);
+      if (!mapping.value) errors.push(`${prefix}.mapping 缺少 value`);
+    } else if (type === 'kpi') {
+      if (!mapping.value) errors.push(`${prefix}.mapping 缺少 value`);
+    } else if (type === 'table') {
+      // table 类型不需要特定的 mapping 字段
+      return;
+    } else {
+      if (!mapping.xAxis) errors.push(`${prefix}.mapping 缺少 xAxis`);
+      if (!mapping.yAxis || !Array.isArray(mapping.yAxis)) {
+        errors.push(`${prefix}.mapping.yAxis 必须是数组`);
+      }
+    }
+  }
+
+  function validateReceiveFilter(rf, prefix, errors) {
+    if (!rf.fromState) errors.push(`${prefix} 缺少 fromState`);
+    if (!rf.mapToDimension) errors.push(`${prefix} 缺少 mapToDimension`);
+    if (!rf.operator) {
+      errors.push(`${prefix} 缺少 operator`);
+    } else if (!VALID_OPERATORS.includes(rf.operator)) {
+      errors.push(`${prefix} operator "${rf.operator}" 无效`);
+    }
+  }
+
+  function validateEmit(em, prefix, errors) {
+    if (!em.event) errors.push(`${prefix} 缺少 event`);
+    if (!em.extractValueFrom) errors.push(`${prefix} 缺少 extractValueFrom`);
+    if (!em.updateState) errors.push(`${prefix} 缺少 updateState`);
+  }
+
+  function validateStateLoop(widgets, errors) {
+    const emittedStates = new Set();
+    const receivedStates = new Set();
+
+    widgets.forEach(widget => {
+      if (widget.emit) {
+        widget.emit.forEach(em => {
+          if (em.updateState) emittedStates.add(em.updateState);
+        });
+      }
+      if (widget.receiveFilters) {
+        widget.receiveFilters.forEach(rf => {
+          if (rf.fromState) receivedStates.add(rf.fromState);
+        });
+      }
+    });
+
+    emittedStates.forEach(state => {
+      if (!receivedStates.has(state)) {
+        errors.push(`闭环校验失败: emit 状态 "${state}" 没有对应的 receiveFilters 消费`);
+      }
+    });
+  }
+
+  // ============================================
+  // DataQuerySDK
+  // ============================================
+  class DataQuerySDK {
+    constructor(config = {}) {
+      if (!config.baseURL) {
+        throw new Error('DataQuerySDK: baseURL is required');
+      }
+
+      this.baseURL = config.baseURL.replace(/\/$/, '');
+      this.defaultServerKey = config.serverKey || null;
+      this.defaultDatasourceId = config.datasourceId || null;
+
+      const globalContext = typeof window !== 'undefined' && window.__AI2APP_CONTEXT__;
+      this.tenantId = config.tenantId || (globalContext && globalContext.tenantId) || null;
+      this.workspaceId = config.workspaceId || (globalContext && globalContext.workspaceId) || null;
+      this.projectId = config.projectId || (globalContext && globalContext.projectId) || null;
+
+      this.headers = config.headers || {};
+      this.timeout = config.timeout || 30000;
+    }
+
+    async query(params) {
+      const serverKey = params.serverKey || this.defaultServerKey;
+      const datasourceId = params.datasourceId || this.defaultDatasourceId;
+
+      if (!serverKey) {
+        throw new Error('DataQuerySDK: serverKey is required');
+      }
+      if (!datasourceId) {
+        throw new Error('DataQuerySDK: datasourceId is required');
+      }
+
+      const body = {
+        ...params,
+        serverKey: serverKey,
+        datasourceId: datasourceId,
+        limit: params.limit || 1000
+      };
+
+      const headers = {
+        'Content-Type': 'application/json',
+        ...this.headers
+      };
+
+      if (this.tenantId) {
+        headers['x-tenant-id'] = this.tenantId;
+      }
+
+      try {
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), this.timeout);
+
+        const response = await fetch(`${this.baseURL}/api/data/query`, {
+          method: 'POST',
+          headers,
+          body: JSON.stringify(body),
+          signal: controller.signal
+        });
+
+        clearTimeout(timeoutId);
+        const result = await response.json();
+
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${result.message || 'Request failed'}`);
+        }
+
+        if (!result.success) {
+          throw new Error(result.message || 'Query failed');
+        }
+
+        // Add rowsObject for easier data access
+        if (result.data && result.data.columns && result.data.rows) {
+          const columns = result.data.columns;
+          result.data.rowsObject = result.data.rows.map(row => {
+            const obj = {};
+            columns.forEach((col, index) => {
+              obj[col.name] = row[index];
+            });
+            return obj;
+          });
+        }
+
+        return result;
+      } catch (error) {
+        if (error.name === 'AbortError') {
+          throw new Error('Request timeout');
+        }
+        throw error;
+      }
+    }
+
+    async semanticQuery(params) {
+      if (!params.metrics || !Array.isArray(params.metrics) || params.metrics.length === 0) {
+        throw new Error('DataQuerySDK: metrics array is required for semantic query');
+      }
+      return this.query(params);
+    }
+
+    async sqlQuery(params) {
+      if (!params.sql) {
+        throw new Error('DataQuerySDK: sql is required for SQL query');
+      }
+      return this.query({ ...params, customSql: params.sql });
+    }
+  }
+
+  // ============================================
+  // DashboardEngine - 状态机版本
+  // ============================================
+  class DashboardEngine {
+    constructor(sdk, config, stateManager) {
+      if (!sdk || typeof sdk.query !== 'function') {
+        throw new Error('DashboardEngine: sdk instance is required');
+      }
+
+      const validation = validateDashboardConfig(config);
+      if (!validation.valid) {
+        throw new Error('配置错误:\n' + validation.errors.map(e => '  - ' + e).join('\n'));
+      }
+
+      this.sdk = sdk;
+      this.config = config;
+      this.stateManager = stateManager || globalState;
+      this.widgetConfigs = config.widgets || [];
+      this.filterConfigs = config.filters || [];
+      this.instances = new Map();
+      this.unsubscribers = new Map();
+      this.resizeObservers = new Map();
+      this.eventListeners = new Map();
+    }
+
+    on(event, callback) {
+      if (!this.eventListeners.has(event)) {
+        this.eventListeners.set(event, new Set());
+      }
+      this.eventListeners.get(event).add(callback);
+      return () => {
+        this.eventListeners.get(event).delete(callback);
+      };
+    }
+
+    emit(event, data) {
+      if (this.eventListeners.has(event)) {
+        this.eventListeners.get(event).forEach(callback => {
+          try {
+            callback(data);
+          } catch (error) {
+            console.error(`DashboardEngine: Error in event listener for ${event}:`, error);
+          }
+        });
+      }
+    }
+
+    async init() {
+      this.renderFilters();
+      this.renderLayout();
+      this.setupStateSubscriptions();
+      await this.refreshAll();
+    }
+
+    renderFilters() {
+      const container = document.getElementById('filters-container');
+      if (!container || this.filterConfigs.length === 0) return;
+
+      container.innerHTML = '';
+
+      this.filterConfigs.forEach(filterConfig => {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'inline-block mr-4 mb-2';
+
+        const label = document.createElement('label');
+        label.className = 'block text-sm font-medium text-gray-700 mb-1';
+        label.textContent = filterConfig.label;
+
+        const select = document.createElement('select');
+        select.id = `filter-${filterConfig.id}`;
+        select.className = 'block w-48 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm';
+
+        filterConfig.options.forEach(opt => {
+          const option = document.createElement('option');
+          option.value = opt.value;
+          option.textContent = opt.text;
+          if (opt.value === filterConfig.defaultValue) {
+            option.selected = true;
+          }
+          select.appendChild(option);
+        });
+
+        select.addEventListener('change', (e) => {
+          const value = e.target.value;
+          if (filterConfig.emitsToState) {
+            this.stateManager.set(filterConfig.emitsToState, value);
+          }
+        });
+
+        if (filterConfig.emitsToState) {
+          this.stateManager.set(filterConfig.emitsToState, filterConfig.defaultValue);
+        }
+
+        wrapper.appendChild(label);
+        wrapper.appendChild(select);
+        container.appendChild(wrapper);
+      });
+    }
+
+    renderLayout() {
+      // Priority 1: Use external container if specified and exists
+      if (this.config.containerId) {
+        const externalContainer = document.getElementById(this.config.containerId);
+        if (externalContainer) {
+          this.renderToContainer(externalContainer);
+          return;
+        }
+      }
+      
+      // Priority 2: Use dashboard-grid if exists
+      const grid = document.getElementById('dashboard-grid');
+      if (grid) {
+        this.renderToGrid(grid);
+        return;
+      }
+      
+      // Priority 3: Auto-create container in body
+      console.log('DashboardEngine: No container found, auto-creating dashboard container');
+      this.autoCreateContainer();
+    }
+
+    autoCreateContainer() {
+      // Create a default container
+      const container = document.createElement('div');
+      container.id = 'dashboard-auto-container';
+      container.className = 'max-w-7xl mx-auto px-4 py-8';
+      
+      // Add title if specified in config
+      if (this.config.title) {
+        const title = document.createElement('h1');
+        title.className = 'text-3xl font-bold text-gray-900 mb-8';
+        title.textContent = this.config.title;
+        container.appendChild(title);
+      }
+      
+      // Add filters container
+      const filtersContainer = document.createElement('div');
+      filtersContainer.id = 'filters-container';
+      filtersContainer.className = 'mb-4';
+      container.appendChild(filtersContainer);
+      
+      // Add grid container
+      const grid = document.createElement('div');
+      grid.id = 'dashboard-grid';
+      grid.className = 'grid grid-cols-12 gap-4';
+      container.appendChild(grid);
+      
+      // Append to body
+      document.body.appendChild(container);
+      
+      // Now render to the grid
+      this.renderToGrid(grid);
+    }
+
+    renderToContainer(container) {
+      // Render widgets to a specific external container
+      // Each widget should have containerId pointing to existing DOM elements
+      this.widgetConfigs.forEach(config => {
+        const widgetContainer = document.getElementById(config.containerId);
+        if (!widgetContainer) {
+          console.warn(`DashboardEngine: Container "${config.containerId}" not found for widget "${config.id}"`);
+          return;
+        }
+        
+        // Initialize echarts for this widget
+        if (config.type !== 'kpi' && config.type !== 'table' && typeof echarts !== 'undefined') {
+          const chart = echarts.init(widgetContainer);
+          this.instances.set(config.id, chart);
+          
+          if (config.emit) {
+            chart.on('click', (params) => {
+              this.handleChartClick(config, params);
+            });
+          }
+
+          const resizeObserver = new ResizeObserver(() => chart.resize());
+          resizeObserver.observe(widgetContainer);
+          this.resizeObservers.set(config.id, resizeObserver);
+        }
+      });
+    }
+
+    renderToGrid(grid) {
+      grid.innerHTML = '';
+
+      this.widgetConfigs.forEach(config => {
+        const wrapper = document.createElement('div');
+        wrapper.className = config.gridClass || 'col-span-12';
+
+        const card = document.createElement('div');
+        card.className = 'bg-white p-5 rounded-xl shadow-sm border border-gray-100';
+
+        const title = document.createElement('h3');
+        title.className = 'text-sm font-bold text-gray-700 mb-4 flex items-center gap-2';
+        title.innerHTML = `
+          <span class="w-1 h-4 bg-indigo-500 rounded-full"></span>
+          ${config.title}
+        `;
+
+        const chartContainer = document.createElement('div');
+        chartContainer.id = `chart-${config.id}`;
+
+        if (config.type === 'kpi') {
+          chartContainer.className = 'flex items-center justify-center py-8';
+          chartContainer.innerHTML = '<div class="text-4xl font-black text-indigo-600">-</div>';
+        } else if (config.type === 'table') {
+          chartContainer.className = 'overflow-auto';
+          chartContainer.style.height = '320px';
+          chartContainer.style.width = '100%';
+        } else {
+          chartContainer.className = 'h-80';
+          chartContainer.style.height = '320px';
+          chartContainer.style.width = '100%';
+        }
+
+        card.appendChild(title);
+        card.appendChild(chartContainer);
+        wrapper.appendChild(card);
+        grid.appendChild(wrapper);
+
+        if (config.type !== 'kpi' && config.type !== 'table' && typeof echarts !== 'undefined') {
+          const chart = echarts.init(chartContainer);
+          this.instances.set(config.id, chart);
+          
+          if (config.emit) {
+            chart.on('click', (params) => {
+              this.handleChartClick(config, params);
+            });
+          }
+
+          const resizeObserver = new ResizeObserver(() => chart.resize());
+          resizeObserver.observe(chartContainer);
+          this.resizeObservers.set(config.id, resizeObserver);
+        }
+      });
+    }
+
+    setupStateSubscriptions() {
+      this.widgetConfigs.forEach(config => {
+        if (!config.receiveFilters) return;
+
+        const unsubscribes = [];
+        config.receiveFilters.forEach(rf => {
+          const unsubscribe = this.stateManager.subscribe(rf.fromState, () => {
+            this.refreshWidget(config);
+          });
+          unsubscribes.push(unsubscribe);
+        });
+
+        this.unsubscribers.set(config.id, unsubscribes);
+      });
+    }
+
+    handleChartClick(config, params) {
+      if (!config.emit) return;
+
+      config.emit.forEach(em => {
+        if (em.event === 'click') {
+          const value = params.data[em.extractValueFrom];
+          if (value !== undefined) {
+            this.stateManager.set(em.updateState, value);
+          }
+        }
+      });
+    }
+
+    buildQueryFilters(config) {
+      const baseFilters = [...(config.query.filters || [])];
+      const filters = [];
+      const processedDimensions = new Set();
+
+      // 先处理 receiveFilters（global filter），优先级更高
+      if (config.receiveFilters) {
+        config.receiveFilters.forEach(rf => {
+          const stateValue = this.stateManager.get(rf.fromState);
+          
+          if (rf.ignoreIfEmpty && (!stateValue || stateValue === 'ALL')) {
+            return;
+          }
+
+          if (stateValue !== undefined) {
+            let values;
+            if (rf.operator === 'BETWEEN' && typeof stateValue === 'string' && stateValue.includes(',')) {
+              // BETWEEN 操作符，值是逗号分隔的字符串，需要拆分成数组
+              values = stateValue.split(',').map(v => v.trim());
+            } else {
+              values = [stateValue];
+            }
+            filters.push({
+              dimension: rf.mapToDimension,
+              operator: rf.operator,
+              values: values
+            });
+            processedDimensions.add(rf.mapToDimension);
+          }
+        });
+      }
+
+      // 再添加 baseFilters 中未被覆盖的 dimension
+      baseFilters.forEach(f => {
+        if (!processedDimensions.has(f.dimension)) {
+          filters.push(f);
+        }
+      });
+
+      return filters;
+    }
+
+    async refreshWidget(config) {
+      const instance = this.instances.get(config.id);
+      if (instance) instance.showLoading();
+
+      try {
+        const filters = this.buildQueryFilters(config);
+
+        const result = await this.sdk.semanticQuery({
+          serverKey: config.query.serverKey || this.config.serverKey,
+          datasourceId: config.query.datasourceId || this.config.datasourceId,
+          metrics: config.query.metrics,
+          filters
+        });
+
+        const columns = result.data?.columns || [];
+        const rows = result.data?.rows || [];
+        const rowsObject = rows.map(row => {
+          const obj = {};
+          columns.forEach((col, index) => {
+            obj[col.name] = row[index];
+          });
+          return obj;
+        });
+
+        // Emit data event for external listeners
+        this.emit(`widget:${config.id}:data`, rowsObject);
+
+        if (config.type === 'kpi') {
+          this.renderKPI(config, rowsObject);
+        } else if (config.type === 'table') {
+          this.renderTable(config, columns, rows);
+        } else if (instance) {
+          const option = this.generateOption(config, rowsObject);
+          if (option) instance.setOption(option, true);
+          instance.hideLoading();
+        }
+      } catch (error) {
+        console.error(`DashboardEngine: Failed to refresh widget "${config.id}":`, error);
+        if (instance) instance.hideLoading();
+      }
+    }
+
+    renderKPI(config, rowsObject) {
+      const value = rowsObject[0]?.[config.mapping?.value] || 0;
+      const container = document.getElementById(config.containerId || `chart-${config.id}`);
+      if (container) {
+        const formattedValue = this.formatValue(value, config.mapping?.valueFormat);
+        container.innerHTML = `<div class="text-4xl font-black text-indigo-600">${formattedValue}</div>`;
+      }
+    }
+
+    renderTable(config, columns, rows) {
+      const container = document.getElementById(config.containerId || `chart-${config.id}`);
+      if (!container) return;
+
+      const tableConfig = config.tableConfig || {};
+      const pageSize = tableConfig.pageSize || 10;
+      const showPagination = rows.length > pageSize;
+
+      // 生成表头
+      const headerHtml = columns.map(col => {
+        const align = tableConfig.align || 'left';
+        return `<th class="px-4 py-2 text-${align} text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50 border-b">${col.name}</th>`;
+      }).join('');
+
+      // 生成表格行
+      const rowsHtml = rows.map((row, rowIndex) => {
+        const cellsHtml = row.map((cell, cellIndex) => {
+          const col = columns[cellIndex];
+          const align = tableConfig.align || 'left';
+          const formattedValue = this.formatTableCell(cell, col.type, tableConfig);
+          return `<td class="px-4 py-2 text-${align} text-sm text-gray-900 border-b">${formattedValue}</td>`;
+        }).join('');
+        return `<tr class="hover:bg-gray-50 ${rowIndex >= pageSize ? 'hidden' : ''}" data-page="${Math.floor(rowIndex / pageSize)}">${cellsHtml}</tr>`;
+      }).join('');
+
+      // 生成分页控件
+      let paginationHtml = '';
+      if (showPagination) {
+        const totalPages = Math.ceil(rows.length / pageSize);
+        paginationHtml = `
+          <div class="flex items-center justify-between px-4 py-3 bg-white border-t">
+            <div class="text-sm text-gray-500">
+              共 ${rows.length} 条记录
+            </div>
+            <div class="flex space-x-1" id="pagination-${config.id}">
+              ${Array.from({ length: totalPages }, (_, i) => `
+                <button class="px-3 py-1 text-sm rounded ${i === 0 ? 'bg-indigo-600 text-white' : 'bg-gray-200 text-gray-700 hover:bg-gray-300'}" data-page="${i}">
+                  ${i + 1}
+                </button>
+              `).join('')}
+            </div>
+          </div>
+        `;
+      }
+
+      container.innerHTML = `
+        <div class="w-full">
+          <table class="min-w-full divide-y divide-gray-200" id="table-${config.id}">
+            <thead>
+              <tr>${headerHtml}</tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-200">
+              ${rowsHtml}
+            </tbody>
+          </table>
+          ${paginationHtml}
+        </div>
+      `;
+
+      // 绑定分页事件
+      if (showPagination) {
+        const paginationEl = document.getElementById(`pagination-${config.id}`);
+        if (paginationEl) {
+          paginationEl.addEventListener('click', (e) => {
+            if (e.target.tagName === 'BUTTON') {
+              const page = parseInt(e.target.dataset.page);
+              this.switchTablePage(config.id, page, pageSize);
+              
+              // 更新按钮样式
+              paginationEl.querySelectorAll('button').forEach(btn => {
+                btn.className = 'px-3 py-1 text-sm rounded bg-gray-200 text-gray-700 hover:bg-gray-300';
+              });
+              e.target.className = 'px-3 py-1 text-sm rounded bg-indigo-600 text-white';
+            }
+          });
+        }
+      }
+
+      // 绑定行点击事件（用于 emit）
+      if (config.emit) {
+        const tableEl = document.getElementById(`table-${config.id}`);
+        if (tableEl) {
+          tableEl.addEventListener('click', (e) => {
+            const row = e.target.closest('tr');
+            if (row && row.parentElement.tagName === 'TBODY') {
+              const rowIndex = Array.from(row.parentElement.children).indexOf(row);
+              const rowData = rows[rowIndex];
+              const rowObject = {};
+              columns.forEach((col, index) => {
+                rowObject[col.name] = rowData[index];
+              });
+              this.handleTableRowClick(config, rowObject);
+            }
+          });
+        }
+      }
+    }
+
+    switchTablePage(widgetId, page, pageSize) {
+      const tableEl = document.getElementById(`table-${widgetId}`);
+      if (!tableEl) return;
+
+      const rows = tableEl.querySelectorAll('tbody tr');
+      rows.forEach(row => {
+        const rowPage = parseInt(row.dataset.page);
+        row.classList.toggle('hidden', rowPage !== page);
+      });
+    }
+
+    handleTableRowClick(config, rowData) {
+      if (!config.emit) return;
+
+      config.emit.forEach(em => {
+        if (em.event === 'click') {
+          const value = rowData[em.extractValueFrom];
+          if (value !== undefined) {
+            this.stateManager.set(em.updateState, value);
+          }
+        }
+      });
+    }
+
+    formatTableCell(value, type, tableConfig) {
+      if (value === null || value === undefined) return '-';
+      
+      // 使用列特定的格式化配置
+      const format = tableConfig?.columnFormats?.[type] || tableConfig?.defaultFormat;
+      
+      if (format) {
+        return this.formatValue(value, format);
+      }
+      
+      // 默认格式化
+      if (typeof value === 'number') {
+        return value.toLocaleString();
+      }
+      
+      return String(value);
+    }
+
+    formatValue(value, format) {
+      const num = Number(value);
+      if (isNaN(num)) return value;
+
+      switch (format) {
+        case 'currency_cny':
+          return '¥' + num.toLocaleString('zh-CN');
+        case 'currency_usd':
+          return '$' + num.toLocaleString('en-US');
+        case 'percent':
+          return (num * 100).toFixed(2) + '%';
+        case 'compact_number':
+          return new Intl.NumberFormat('zh-CN', { notation: 'compact' }).format(num);
+        default:
+          return num.toLocaleString();
+      }
+    }
+
+    generateOption(config, rows) {
+      const mapping = config.mapping || {};
+      const type = config.type;
+
+      const baseOption = {
+        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+        legend: { bottom: 0 },
+        grid: { top: 40, right: 40, bottom: 60, left: 60 },
+        color: ['#6366f1', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899']
+      };
+
+      switch (type) {
+        case 'pie':
+          return this.generatePieOption(config, rows, baseOption);
+        case 'scatter':
+          return this.generateScatterOption(config, rows, baseOption);
+        default:
+          return this.generateStandardOption(config, rows, baseOption);
+      }
+    }
+
+    generateStandardOption(config, rows, baseOption) {
+      const mapping = config.mapping || {};
+      const yAxisFields = mapping.yAxis || [];
+
+      return {
+        ...baseOption,
+        dataset: { source: rows },
+        xAxis: { type: 'category', name: mapping.xAxisName || '' },
+        yAxis: { type: 'value' },
+        series: yAxisFields.map(field => ({
+          name: field,
+          type: config.type || 'bar',
+          encode: { x: mapping.xAxis, y: field },
+          smooth: config.type === 'line'
+        }))
+      };
+    }
+
+    generatePieOption(config, rows, baseOption) {
+      const mapping = config.mapping || {};
+      const data = rows.map(row => ({
+        name: row[mapping.name],
+        value: row[mapping.value]
+      }));
+
+      return {
+        ...baseOption,
+        tooltip: { trigger: 'item' },
+        series: [{
+          type: 'pie',
+          radius: ['40%', '70%'],
+          data
+        }]
+      };
+    }
+
+    generateScatterOption(config, rows, baseOption) {
+      const mapping = config.mapping || {};
+
+      return {
+        ...baseOption,
+        dataset: { source: rows },
+        xAxis: { type: 'value', name: mapping.xAxis },
+        yAxis: { type: 'value', name: mapping.yAxis?.[0] },
+        series: [{
+          type: 'scatter',
+          encode: { x: mapping.xAxis, y: mapping.yAxis?.[0] }
+        }]
+      };
+    }
+
+    async refreshAll() {
+      await Promise.all(this.widgetConfigs.map(config => this.refreshWidget(config)));
+    }
+
+    destroy() {
+      this.unsubscribers.forEach(unsubscribes => {
+        unsubscribes.forEach(unsubscribe => unsubscribe());
+      });
+      this.unsubscribers.clear();
+
+      this.resizeObservers.forEach(observer => observer.disconnect());
+      this.resizeObservers.clear();
+
+      this.instances.forEach(chart => chart.dispose());
+      this.instances.clear();
+    }
+  }
+
+  // ============================================
+  // 导出
+  // ============================================
+  return {
+    DataQuerySDK,
+    DashboardEngine,
+    StateManager,
+    validateDashboardConfig,
+    globalState,
+    VALID_WIDGET_TYPES,
+    VALID_OPERATORS
+  };
+}));