@axiom-lattice/gateway 3.0.2 → 3.0.3

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

@@ -1,970 +0,0 @@
-/**
- * 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
-  };
-}));