@beppla/tapas-ui 1.5.14 → 1.5.15

package/package/module/StatisticsTable/StatisticsTable.js

@@ -0,0 +1,1215 @@
+"use strict";
+
+import React, { useMemo, useCallback, useState, useRef, useEffect } from 'react';
+import { View, ScrollView, StyleSheet, Platform, TouchableOpacity, Text, Animated } from 'react-native';
+import { useTheme } from '@rneui/themed';
+import Hoverable from '../Hoverable/Hoverable';
+
+// Tooltip 内容类型
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Tooltip 组件
+const CellTooltip = ({
+  visible,
+  content,
+  style
+}) => {
+  if (!visible || !content) return null;
+  return /*#__PURE__*/_jsx(View, {
+    style: [tooltipStyles.container, style],
+    children: content.customContent ? content.customContent : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [content.title && /*#__PURE__*/_jsx(Text, {
+        style: tooltipStyles.title,
+        children: content.title
+      }), content.subtitle && /*#__PURE__*/_jsx(Text, {
+        style: tooltipStyles.subtitle,
+        children: content.subtitle
+      }), content.items?.map((item, index) => /*#__PURE__*/_jsxs(View, {
+        style: tooltipStyles.row,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: tooltipStyles.label,
+          children: item.label
+        }), /*#__PURE__*/_jsx(Text, {
+          style: tooltipStyles.value,
+          children: item.value
+        })]
+      }, index))]
+    })
+  });
+};
+const tooltipStyles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    backgroundColor: '#FFF',
+    borderRadius: 8,
+    padding: 12,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.15,
+    shadowRadius: 8,
+    elevation: 5,
+    zIndex: 100,
+    minWidth: 150
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: 'rgba(0, 0, 0, 0.87)',
+    marginBottom: 4
+  },
+  subtitle: {
+    fontSize: 12,
+    color: 'rgba(0, 0, 0, 0.54)',
+    marginBottom: 8
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 4
+  },
+  label: {
+    fontSize: 12,
+    color: 'rgba(0, 0, 0, 0.54)'
+  },
+  value: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: 'rgba(0, 0, 0, 0.87)'
+  }
+});
+export function StatisticsTable({
+  rows,
+  columns,
+  cells,
+  showRowStats = false,
+  showColumnStats = false,
+  loading = false,
+  loadingText = 'Loading...',
+  emptyText = 'No data',
+  maxHeight = 500,
+  rowLabelWidth = 150,
+  style,
+  formatQuantity = q => q.toLocaleString(),
+  formatAmount = a => `€${a.toFixed(2)}`,
+  enableVirtualization = false,
+  virtualRowHeight = 56,
+  onRowPress,
+  rowActions,
+  rowHeight = 56,
+  getRowHeight,
+  getColumnWidth,
+  enableScrollShadow = true,
+  showScrollIndicator = false,
+  statsColumnWidth = 100,
+  onCellHover,
+  renderCellTooltip,
+  renderRowStatsTooltip,
+  renderColumnStatsTooltip,
+  onCellClick,
+  onRowStatsCellClick,
+  onColumnStatsCellClick,
+  rowStatsHeaders = {
+    sum: 'Sum (€)',
+    mean: 'Mean (€)'
+  },
+  columnStatsLabels = {
+    sum: 'Sum',
+    mean: 'Mean'
+  },
+  headerStyle,
+  rowStatsHeaderStyle,
+  columnStatsLabelStyle,
+  enableStatsAnimation = true,
+  statsAnimationDuration = 300,
+  enablePlaceholder = false,
+  minRows = 0,
+  minColumns = 0,
+  placeholderRowHeight,
+  placeholderColumnWidth = 150
+}) {
+  const {
+    theme
+  } = useTheme();
+  const colors = theme.colors;
+
+  // 动画值
+  const rowStatsAnimation = useRef(new Animated.Value(0)).current;
+  const columnStatsAnimation = useRef(new Animated.Value(0)).current;
+
+  // 滚动状态
+  const [scrollState, setScrollState] = useState({
+    left: 0,
+    top: 0,
+    isAtStart: true,
+    isAtEnd: false,
+    isAtTop: true,
+    isAtBottom: false
+  });
+
+  // 虚拟滚动状态
+  const [virtualScrollOffset, setVirtualScrollOffset] = useState(0);
+
+  // Hover 状态
+  const [hoveredCell, setHoveredCell] = useState(null);
+  const scrollViewRef = useRef(null);
+  const bodyScrollViewRef = useRef(null);
+  const rowStatsScrollRef = useRef(null);
+
+  // Column stats 和 Row stats 是互斥的，columnStats 优先
+  const actualShowColumnStats = showColumnStats;
+  const actualShowRowStats = showRowStats && !showColumnStats;
+
+  // Row Stats 动画效果
+  useEffect(() => {
+    if (enableStatsAnimation && actualShowRowStats) {
+      Animated.timing(rowStatsAnimation, {
+        toValue: 1,
+        duration: statsAnimationDuration,
+        useNativeDriver: true
+      }).start();
+    } else {
+      rowStatsAnimation.setValue(actualShowRowStats ? 1 : 0);
+    }
+  }, [actualShowRowStats, enableStatsAnimation, statsAnimationDuration, rowStatsAnimation]);
+
+  // Column Stats 动画效果
+  useEffect(() => {
+    if (enableStatsAnimation && actualShowColumnStats) {
+      Animated.timing(columnStatsAnimation, {
+        toValue: 1,
+        duration: statsAnimationDuration,
+        useNativeDriver: true
+      }).start();
+    } else {
+      columnStatsAnimation.setValue(actualShowColumnStats ? 1 : 0);
+    }
+  }, [actualShowColumnStats, enableStatsAnimation, statsAnimationDuration, columnStatsAnimation]);
+
+  // 动态样式 - 根据设计图
+  const themedStyles = useMemo(() => ({
+    container: {
+      backgroundColor: colors.colorSurface // 米色背景
+    },
+    header: {
+      backgroundColor: headerStyle?.backgroundColor || colors.colorSurface7,
+      // rgba(0, 0, 0, 0.08)
+      borderBottomColor: colors.colorTableBorder
+    },
+    headerCell: {
+      borderRightColor: colors.colorTableBorder,
+      backgroundColor: headerStyle?.backgroundColor || colors.colorSurface7
+    },
+    headerText: {
+      color: headerStyle?.textColor || colors.colorTextPrimary,
+      fontSize: headerStyle?.fontSize || 14,
+      fontWeight: headerStyle?.fontWeight || '500'
+    },
+    // Row Stats 表头样式
+    statsHeaderCell: {
+      backgroundColor: rowStatsHeaderStyle?.backgroundColor || colors.colorSurface7,
+      borderRightColor: colors.colorTableBorder,
+      borderBottomColor: colors.colorTableBorder
+    },
+    statsHeaderText: {
+      color: rowStatsHeaderStyle?.textColor || colors.colorTextPrimary,
+      fontSize: rowStatsHeaderStyle?.fontSize || 14,
+      fontWeight: rowStatsHeaderStyle?.fontWeight || '500'
+    },
+    // 数据行
+    row: {
+      borderBottomColor: colors.colorTableBorder,
+      backgroundColor: colors.colorSurface // 米色
+    },
+    // Hover 行
+    rowHovered: {
+      backgroundColor: colors.colorSurface8 // rgba(0, 0, 0, 0.04) - 更柔和
+    },
+    // Hover 单元格
+    cellHovered: {
+      backgroundColor: colors.colorSurface8 // rgba(0, 0, 0, 0.04) - 更柔和
+    },
+    // Column Stats 行（Sum/Mean）- 纯白色背景
+    columnStatsRow: {
+      backgroundColor: '#FFFFFF',
+      // 纯白色
+      borderBottomColor: colors.colorTableBorder
+    },
+    // Row Stats 列 - 白色背景
+    rowStatsCell: {
+      backgroundColor: colors.colorSurface1,
+      // 白色
+      borderBottomColor: colors.colorTableBorder,
+      borderRightColor: colors.colorTableBorder
+    },
+    cell: {
+      borderRightColor: colors.colorTableBorder
+    },
+    rowLabel: {
+      color: colors.colorTextPrimary
+    },
+    cellQuantity: {
+      color: colors.colorTextPrimary
+    },
+    cellAmount: {
+      color: colors.colorTextSecondary
+    },
+    statsLabel: {
+      color: columnStatsLabelStyle?.textColor || colors.colorTextBrand,
+      // 棕色
+      fontSize: columnStatsLabelStyle?.fontSize || 14,
+      fontWeight: columnStatsLabelStyle?.fontWeight || '600'
+    },
+    // Column Stats 分隔线
+    columnStatsDivider: {
+      borderTopWidth: 2,
+      borderTopColor: colors.colorTableBorder
+    }
+  }), [colors, headerStyle, rowStatsHeaderStyle, columnStatsLabelStyle]);
+
+  // 构建矩阵数据
+  const matrix = useMemo(() => {
+    const data = {};
+    rows.forEach(row => {
+      if (!data[row.key]) {
+        data[row.key] = {};
+      }
+      columns.forEach(col => {
+        const cell = cells.find(c => c.rowKey === row.key && c.columnKey === col.key);
+        data[row.key][col.key] = cell || {
+          quantity: 0,
+          amount: 0
+        };
+      });
+    });
+    return data;
+  }, [rows, columns, cells]);
+
+  // 计算行统计
+  const rowStats = useMemo(() => {
+    if (!showRowStats) return null;
+    return rows.map(row => {
+      const rowCells = columns.filter(col => !col.isAction).map(col => matrix[row.key]?.[col.key] || {
+        quantity: 0,
+        amount: 0
+      });
+      const sumQuantity = rowCells.reduce((sum, cell) => sum + cell.quantity, 0);
+      const sumAmount = rowCells.reduce((sum, cell) => sum + cell.amount, 0);
+      const count = rowCells.length || 1;
+      return {
+        sumQuantity,
+        sumAmount,
+        meanQuantity: sumQuantity / count,
+        meanAmount: sumAmount / count
+      };
+    });
+  }, [rows, columns, matrix, showRowStats]);
+
+  // 计算列统计
+  const columnStats = useMemo(() => {
+    if (!showColumnStats) return null;
+    return columns.filter(col => !col.isAction).map(col => {
+      const colCells = rows.map(row => matrix[row.key]?.[col.key] || {
+        quantity: 0,
+        amount: 0
+      });
+      const sumQuantity = colCells.reduce((sum, cell) => sum + cell.quantity, 0);
+      const sumAmount = colCells.reduce((sum, cell) => sum + cell.amount, 0);
+      const count = colCells.length || 1;
+      return {
+        sumQuantity,
+        sumAmount,
+        meanQuantity: sumQuantity / count,
+        meanAmount: sumAmount / count
+      };
+    });
+  }, [rows, columns, matrix, showColumnStats]);
+
+  // 生成占位行和列
+  const {
+    displayRows,
+    displayColumns
+  } = useMemo(() => {
+    if (!enablePlaceholder) {
+      return {
+        displayRows: rows,
+        displayColumns: columns
+      };
+    }
+
+    // 处理列：如果当前列数少于最小列数，添加占位列
+    let finalColumns = [...columns];
+    const currentDataColumns = columns.filter(col => !col.isAction).length;
+    if (minColumns > 0 && currentDataColumns < minColumns) {
+      const missingColumns = minColumns - currentDataColumns;
+      // 添加占位列来填充
+      const placeholderColumns = Array.from({
+        length: missingColumns
+      }, (_, i) => {
+        // 支持数组形式的宽度设置
+        const width = Array.isArray(placeholderColumnWidth) ? placeholderColumnWidth[i] || placeholderColumnWidth[placeholderColumnWidth.length - 1] || 150 : placeholderColumnWidth;
+        return {
+          key: `_placeholder_col_${i}`,
+          title: '',
+          width: width
+        };
+      });
+      finalColumns = [...columns, ...placeholderColumns];
+    }
+
+    // 处理行：如果当前行数少于最小行数，添加占位行
+    let finalRows = [...rows];
+    if (minRows > 0 && rows.length < minRows) {
+      const missingRows = minRows - rows.length;
+      // 添加占位行来填充
+      const placeholderRows = Array.from({
+        length: missingRows
+      }, (_, i) => ({
+        key: `_placeholder_row_${i}`,
+        label: '',
+        height: placeholderRowHeight || rowHeight // 使用自定义占位行高度，未设置则使用默认行高
+      }));
+      finalRows = [...rows, ...placeholderRows];
+    }
+    return {
+      displayRows: finalRows,
+      displayColumns: finalColumns
+    };
+  }, [rows, columns, enablePlaceholder, minRows, minColumns, rowHeight, placeholderRowHeight, placeholderColumnWidth]);
+  const getColWidth = useCallback(column => {
+    if (getColumnWidth) return getColumnWidth(column.key, column);
+    return column.width || 150;
+  }, [getColumnWidth]);
+  const getRowHeightValue = useCallback(row => {
+    if (row.height) return row.height;
+    if (getRowHeight) return getRowHeight(row.key, row.data);
+    return rowHeight;
+  }, [rowHeight, getRowHeight]);
+
+  // 处理滚动
+  const handleScroll = useCallback(event => {
+    const {
+      contentOffset,
+      contentSize,
+      layoutMeasurement
+    } = event.nativeEvent;
+    setScrollState({
+      left: contentOffset.x,
+      top: contentOffset.y,
+      isAtStart: contentOffset.x <= 0,
+      isAtEnd: contentOffset.x + layoutMeasurement.width >= contentSize.width - 1,
+      isAtTop: contentOffset.y <= 0,
+      isAtBottom: contentOffset.y + layoutMeasurement.height >= contentSize.height - 1
+    });
+  }, []);
+
+  // 同步 Row Stats 滚动
+  const handleBodyScroll = useCallback(event => {
+    const {
+      contentOffset
+    } = event.nativeEvent;
+    rowStatsScrollRef.current?.scrollTo({
+      y: contentOffset.y,
+      animated: false
+    });
+
+    // 更新虚拟滚动偏移量
+    if (enableVirtualization) {
+      setVirtualScrollOffset(contentOffset.y);
+    }
+    handleScroll(event);
+  }, [handleScroll, enableVirtualization]);
+
+  // 处理单元格 hover
+  const handleCellHover = useCallback((rowKey, columnKey, isHovered) => {
+    if (isHovered) {
+      setHoveredCell({
+        rowKey,
+        columnKey
+      });
+    } else {
+      setHoveredCell(null);
+    }
+    onCellHover?.(rowKey, columnKey, isHovered);
+  }, [onCellHover]);
+
+  // 获取单元格 tooltip 内容
+  const getCellTooltipContent = useCallback((rowKey, columnKey, cell, column) => {
+    if (renderCellTooltip) {
+      return renderCellTooltip(rowKey, columnKey, cell, column);
+    }
+    return {
+      title: column.title,
+      items: [{
+        label: 'Quantity',
+        value: formatQuantity(cell.quantity)
+      }, {
+        label: 'Amount',
+        value: formatAmount(cell.amount)
+      }]
+    };
+  }, [renderCellTooltip, formatQuantity, formatAmount]);
+
+  // 获取行统计 tooltip
+  const getRowStatsTooltipContent = useCallback((rowKey, stats, storeCount) => {
+    if (renderRowStatsTooltip) {
+      return renderRowStatsTooltip(rowKey, stats, storeCount);
+    }
+    const row = rows.find(r => r.key === rowKey);
+    return {
+      title: row?.label || rowKey,
+      subtitle: `${storeCount} stores`,
+      items: [{
+        label: 'Sum',
+        value: formatAmount(stats.sumAmount)
+      }, {
+        label: 'Mean',
+        value: formatAmount(stats.meanAmount)
+      }]
+    };
+  }, [renderRowStatsTooltip, formatAmount, rows]);
+
+  // 获取列统计 tooltip
+  const getColumnStatsTooltipContent = useCallback((columnKey, column, stats) => {
+    if (renderColumnStatsTooltip) {
+      return renderColumnStatsTooltip(columnKey, column, stats);
+    }
+    return {
+      title: column.title,
+      items: [{
+        label: 'Sum',
+        value: formatAmount(stats.sumAmount)
+      }, {
+        label: 'Mean',
+        value: formatAmount(stats.meanAmount)
+      }]
+    };
+  }, [renderColumnStatsTooltip, formatAmount]);
+
+  // 渲染单元格内容
+  const renderCellContent = useCallback((column, cell, rowData) => {
+    if (column.render) return column.render(cell, rowData);
+    if (column.isAction && rowActions) {
+      return /*#__PURE__*/_jsx(View, {
+        style: styles.actionContainer,
+        children: rowActions.map((action, index) => /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: [styles.actionButton, {
+            backgroundColor: colors.colorTextAccent
+          }],
+          onPress: () => action.onPress(cell.rowKey, rowData),
+          activeOpacity: 0.7,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.actionButtonText, {
+              color: colors.colorTextInvert
+            }],
+            children: action.label
+          })
+        }, index))
+      });
+    }
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.cellContentContainer,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.cellQuantity, themedStyles.cellQuantity],
+        children: formatQuantity(cell.quantity)
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.cellAmount, themedStyles.cellAmount],
+        children: formatAmount(cell.amount)
+      })]
+    });
+  }, [rowActions, formatQuantity, formatAmount, colors, themedStyles]);
+
+  // 计算统计列宽度
+  const statsColumnsWidth = actualShowRowStats ? statsColumnWidth * 2 : 0;
+  if (loading) {
+    return /*#__PURE__*/_jsx(View, {
+      style: [styles.container, themedStyles.container, style],
+      children: /*#__PURE__*/_jsx(View, {
+        style: styles.loadingRow,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: {
+            color: colors.colorTextPlaceholder
+          },
+          children: loadingText
+        })
+      })
+    });
+  }
+  if (rows.length === 0 || columns.length === 0) {
+    return /*#__PURE__*/_jsx(View, {
+      style: [styles.container, themedStyles.container, style],
+      children: /*#__PURE__*/_jsx(View, {
+        style: styles.emptyRow,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.emptyText, {
+            color: colors.colorTextPlaceholder
+          }],
+          children: emptyText
+        })
+      })
+    });
+  }
+
+  // 虚拟滚动计算
+  const virtualScrollData = useMemo(() => {
+    if (!enableVirtualization) {
+      return {
+        visibleRows: displayRows,
+        startIndex: 0,
+        endIndex: displayRows.length,
+        offsetTop: 0,
+        offsetBottom: 0,
+        totalHeight: 0
+      };
+    }
+
+    // 计算每行的累积高度
+    const rowHeights = [];
+    let totalHeight = 0;
+    displayRows.forEach(row => {
+      const height = row.height || (getRowHeight ? getRowHeight(row.key, row.data) : rowHeight || virtualRowHeight);
+      rowHeights.push(height);
+      totalHeight += height;
+    });
+
+    // 计算可视区域
+    const viewportHeight = maxHeight - (actualShowColumnStats ? 120 : 0);
+    const scrollTop = virtualScrollOffset;
+
+    // 查找起始索引
+    let startIndex = 0;
+    let accumulatedHeight = 0;
+    for (let i = 0; i < rowHeights.length; i++) {
+      const currentHeight = rowHeights[i] || virtualRowHeight;
+      if (accumulatedHeight + currentHeight > scrollTop) {
+        startIndex = i;
+        break;
+      }
+      accumulatedHeight += currentHeight;
+    }
+
+    // 添加缓冲区（上下各多渲染几行）
+    const overscan = 3;
+    startIndex = Math.max(0, startIndex - overscan);
+
+    // 查找结束索引
+    let endIndex = startIndex;
+    let visibleHeight = 0;
+    for (let i = startIndex; i < rowHeights.length; i++) {
+      const currentHeight = rowHeights[i] || virtualRowHeight;
+      visibleHeight += currentHeight;
+      endIndex = i + 1;
+      if (visibleHeight >= viewportHeight) {
+        break;
+      }
+    }
+    endIndex = Math.min(displayRows.length, endIndex + overscan);
+
+    // 计算上下占位空间
+    const offsetTop = rowHeights.slice(0, startIndex).reduce((sum, h) => sum + h, 0);
+    const offsetBottom = rowHeights.slice(endIndex).reduce((sum, h) => sum + h, 0);
+    return {
+      visibleRows: displayRows.slice(startIndex, endIndex),
+      startIndex,
+      endIndex,
+      offsetTop,
+      offsetBottom,
+      totalHeight
+    };
+  }, [enableVirtualization, displayRows, virtualScrollOffset, maxHeight, actualShowColumnStats, rowHeight, getRowHeight]);
+  const visibleRows = virtualScrollData.visibleRows;
+
+  // Web 阴影样式
+  const webShadowStyle = Platform.OS === 'web' ? {
+    leftShadow: {
+      boxShadow: '2px 0 6px 4px rgba(0, 0, 0, 0.08)'
+    },
+    rightShadow: {
+      boxShadow: '-2px 0 6px 4px rgba(0, 0, 0, 0.08)'
+    },
+    topShadow: {
+      boxShadow: '0 2px 6px 4px rgba(0, 0, 0, 0.08)'
+    },
+    bottomShadow: {
+      boxShadow: '0 -2px 6px 4px rgba(0, 0, 0, 0.08)'
+    }
+  } : {};
+
+  // 隐藏滚动条的样式
+  const hideScrollbarStyle = Platform.OS === 'web' ? {
+    scrollbarWidth: 'none',
+    msOverflowStyle: 'none'
+  } : {};
+  const columnStatsHeight = actualShowColumnStats ? 120 : 0;
+  const storeCount = columns.filter(c => !c.isAction).length;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, themedStyles.container, style],
+    children: [enableScrollShadow && !scrollState.isAtStart && /*#__PURE__*/_jsx(View, {
+      style: [styles.shadowBar, styles.shadowLeft, Platform.OS === 'web' && webShadowStyle.leftShadow]
+    }), enableScrollShadow && !scrollState.isAtEnd && /*#__PURE__*/_jsx(View, {
+      style: [styles.shadowBar, styles.shadowRight, {
+        right: actualShowRowStats ? statsColumnsWidth : 0
+      }, Platform.OS === 'web' && webShadowStyle.rightShadow]
+    }), enableScrollShadow && !scrollState.isAtTop && /*#__PURE__*/_jsx(View, {
+      style: [styles.shadowBarHorizontal, styles.shadowTop, Platform.OS === 'web' && webShadowStyle.topShadow]
+    }), enableScrollShadow && !scrollState.isAtBottom && /*#__PURE__*/_jsx(View, {
+      style: [styles.shadowBarHorizontal, styles.shadowBottom, {
+        bottom: actualShowColumnStats ? columnStatsHeight : 0
+      }, Platform.OS === 'web' && webShadowStyle.bottomShadow]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.tableContainer,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          flex: 1
+        },
+        children: /*#__PURE__*/_jsx(ScrollView, {
+          ref: scrollViewRef,
+          horizontal: true,
+          showsHorizontalScrollIndicator: showScrollIndicator,
+          onScroll: handleScroll,
+          scrollEventThrottle: 16,
+          style: hideScrollbarStyle,
+          onContentSizeChange: () => {
+            // 当内容大小变化时，检查是否需要显示滚动阴影
+            if (scrollViewRef.current && enableScrollShadow) {
+              // React Native 会在 contentSize 变化后自动触发 onScroll
+              // 但为了确保状态正确，我们手动触发一次
+              setTimeout(() => {
+                scrollViewRef.current?.scrollTo?.({
+                  x: 0,
+                  y: 0,
+                  animated: false
+                });
+              }, 0);
+            }
+          },
+          children: /*#__PURE__*/_jsxs(View, {
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: [styles.header, themedStyles.header],
+              children: [/*#__PURE__*/_jsx(View, {
+                style: [styles.headerCell, themedStyles.headerCell, {
+                  width: rowLabelWidth
+                }],
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: [styles.headerText, themedStyles.headerText]
+                })
+              }), displayColumns.map(column => {
+                const colWidth = getColWidth(column);
+                const isPlaceholder = column.key.startsWith('_placeholder_col_');
+
+                // 如果提供了自定义 header 渲染函数
+                if (column.renderHeader && !isPlaceholder) {
+                  return /*#__PURE__*/_jsx(View, {
+                    style: [styles.headerCell, themedStyles.headerCell, {
+                      width: colWidth
+                    }],
+                    children: column.renderHeader(column)
+                  }, column.key);
+                }
+
+                // 默认渲染（带排序支持）
+                const isSortable = column.sortable && column.onSort;
+                const HeaderContent = /*#__PURE__*/_jsxs(View, {
+                  style: styles.headerContent,
+                  children: [/*#__PURE__*/_jsx(Text, {
+                    style: [styles.headerText, themedStyles.headerText],
+                    children: column.title
+                  }), isSortable && /*#__PURE__*/_jsxs(View, {
+                    style: styles.sortIndicator,
+                    children: [/*#__PURE__*/_jsx(Text, {
+                      style: [styles.sortArrow, column.sortDirection === 'asc' && styles.sortArrowActive],
+                      children: "\u25B2"
+                    }), /*#__PURE__*/_jsx(Text, {
+                      style: [styles.sortArrow, column.sortDirection === 'desc' && styles.sortArrowActive],
+                      children: "\u25BC"
+                    })]
+                  })]
+                });
+                return /*#__PURE__*/_jsx(TouchableOpacity, {
+                  style: [styles.headerCell, themedStyles.headerCell, {
+                    width: colWidth
+                  }],
+                  onPress: isSortable ? () => column.onSort(column.key) : undefined,
+                  activeOpacity: isSortable ? 0.7 : 1,
+                  disabled: !isSortable,
+                  children: HeaderContent
+                }, column.key);
+              })]
+            }), /*#__PURE__*/_jsxs(ScrollView, {
+              ref: bodyScrollViewRef,
+              style: {
+                maxHeight: maxHeight - columnStatsHeight
+              },
+              showsVerticalScrollIndicator: showScrollIndicator,
+              onScroll: handleBodyScroll,
+              scrollEventThrottle: 16,
+              children: [enableVirtualization && virtualScrollData.offsetTop > 0 && /*#__PURE__*/_jsx(View, {
+                style: {
+                  height: virtualScrollData.offsetTop
+                }
+              }), visibleRows.map((row, rowIndex) => {
+                const currentRowHeight = getRowHeightValue(row);
+                const isClickable = !!onRowPress;
+                const isRowHovered = hoveredCell?.rowKey === row.key;
+                const isPlaceholder = row.key.startsWith('_placeholder_row_');
+                const isLastRow = rowIndex === visibleRows.length - 1;
+                return /*#__PURE__*/_jsxs(TouchableOpacity, {
+                  style: [styles.row, themedStyles.row, {
+                    minHeight: currentRowHeight
+                  }, isRowHovered && !isPlaceholder && themedStyles.rowHovered,
+                  // 最后一行且没有 Column Stats 时移除底部边框，避免与表格底边重合
+                  isLastRow && !actualShowColumnStats && {
+                    borderBottomWidth: 0
+                  }],
+                  onPress: isClickable && !isPlaceholder ? () => onRowPress(row.key, row.data) : undefined,
+                  activeOpacity: isClickable && !isPlaceholder ? 0.7 : 1,
+                  disabled: !isClickable || isPlaceholder,
+                  children: [/*#__PURE__*/_jsx(View, {
+                    style: [styles.cell, themedStyles.cell, {
+                      width: rowLabelWidth
+                    }],
+                    children: /*#__PURE__*/_jsx(Text, {
+                      style: [styles.rowLabel, themedStyles.rowLabel],
+                      children: row.label
+                    })
+                  }), displayColumns.map(column => {
+                    const cell = matrix[row.key]?.[column.key] || {
+                      quantity: 0,
+                      amount: 0,
+                      rowKey: row.key,
+                      columnKey: column.key
+                    };
+                    const colWidth = getColWidth(column);
+                    const isHovered = hoveredCell?.rowKey === row.key && hoveredCell?.columnKey === column.key;
+                    const tooltipContent = isHovered ? getCellTooltipContent(row.key, column.key, cell, column) : null;
+                    const isColPlaceholder = column.key.startsWith('_placeholder_col_');
+                    const isRowPlaceholder = row.key.startsWith('_placeholder_row_');
+                    const isCellClickable = !!onCellClick && !isRowPlaceholder && !isColPlaceholder;
+                    return /*#__PURE__*/_jsx(Hoverable, {
+                      onHoverIn: () => !isRowPlaceholder && !isColPlaceholder && handleCellHover(row.key, column.key, true),
+                      onHoverOut: () => !isRowPlaceholder && !isColPlaceholder && handleCellHover(row.key, column.key, false),
+                      children: /*#__PURE__*/_jsxs(TouchableOpacity, {
+                        style: [styles.cell, themedStyles.cell, {
+                          width: colWidth
+                        }, isHovered && !isRowPlaceholder && !isColPlaceholder && themedStyles.cellHovered],
+                        onPress: isCellClickable ? () => onCellClick(row.key, column.key, cell, column) : undefined,
+                        activeOpacity: isCellClickable ? 0.7 : 1,
+                        disabled: !isCellClickable,
+                        children: [!isColPlaceholder && !isRowPlaceholder && renderCellContent(column, cell, row.data), !isRowPlaceholder && !isColPlaceholder && /*#__PURE__*/_jsx(CellTooltip, {
+                          visible: isHovered,
+                          content: tooltipContent,
+                          style: {
+                            bottom: '100%',
+                            left: 0,
+                            marginBottom: 8
+                          }
+                        })]
+                      })
+                    }, column.key);
+                  })]
+                }, row.key);
+              }), enableVirtualization && virtualScrollData.offsetBottom > 0 && /*#__PURE__*/_jsx(View, {
+                style: {
+                  height: virtualScrollData.offsetBottom
+                }
+              })]
+            }), actualShowColumnStats && columnStats && /*#__PURE__*/_jsxs(Animated.View, {
+              style: [styles.columnStatsContainer, themedStyles.columnStatsDivider, enableStatsAnimation && {
+                opacity: columnStatsAnimation,
+                transform: [{
+                  translateY: columnStatsAnimation.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [60, 0]
+                  })
+                }]
+              }],
+              children: [/*#__PURE__*/_jsxs(View, {
+                style: [styles.row, themedStyles.columnStatsRow],
+                children: [/*#__PURE__*/_jsx(View, {
+                  style: [styles.cell, themedStyles.cell, {
+                    width: rowLabelWidth
+                  }],
+                  children: /*#__PURE__*/_jsx(Text, {
+                    style: [styles.statsLabel, themedStyles.statsLabel],
+                    children: columnStatsLabels.sum
+                  })
+                }), displayColumns.map(column => {
+                  const colWidth = getColWidth(column);
+                  const isPlaceholder = column.key.startsWith('_placeholder_col_');
+                  if (column.isAction || isPlaceholder) {
+                    return /*#__PURE__*/_jsx(View, {
+                      style: [styles.cell, {
+                        width: colWidth
+                      }]
+                    }, column.key);
+                  }
+                  const stat = columnStats[columns.filter(c => !c.isAction).indexOf(column)];
+                  const isHovered = hoveredCell?.rowKey === '__column_sum__' && hoveredCell?.columnKey === column.key;
+                  const tooltipContent = isHovered && stat ? getColumnStatsTooltipContent(column.key, column, stat) : null;
+                  const isClickable = !!onColumnStatsCellClick;
+                  return /*#__PURE__*/_jsx(Hoverable, {
+                    onHoverIn: () => handleCellHover('__column_sum__', column.key, true),
+                    onHoverOut: () => handleCellHover('__column_sum__', column.key, false),
+                    children: /*#__PURE__*/_jsxs(TouchableOpacity, {
+                      style: [styles.cell, themedStyles.cell, {
+                        width: colWidth
+                      }, isHovered && themedStyles.cellHovered],
+                      onPress: isClickable && stat ? () => onColumnStatsCellClick(column.key, 'sum', stat, column) : undefined,
+                      activeOpacity: isClickable ? 0.7 : 1,
+                      disabled: !isClickable,
+                      children: [/*#__PURE__*/_jsxs(View, {
+                        style: styles.cellContentContainer,
+                        children: [/*#__PURE__*/_jsx(Text, {
+                          style: [styles.cellQuantity, themedStyles.cellQuantity],
+                          children: formatQuantity(stat?.sumQuantity || 0)
+                        }), /*#__PURE__*/_jsx(Text, {
+                          style: [styles.cellAmount, themedStyles.cellAmount],
+                          children: formatAmount(stat?.sumAmount || 0)
+                        })]
+                      }), /*#__PURE__*/_jsx(CellTooltip, {
+                        visible: isHovered,
+                        content: tooltipContent,
+                        style: {
+                          bottom: '100%',
+                          left: 0,
+                          marginBottom: 8
+                        }
+                      })]
+                    })
+                  }, column.key);
+                })]
+              }), /*#__PURE__*/_jsxs(View, {
+                style: [styles.row, themedStyles.columnStatsRow],
+                children: [/*#__PURE__*/_jsx(View, {
+                  style: [styles.cell, themedStyles.cell, {
+                    width: rowLabelWidth
+                  }],
+                  children: /*#__PURE__*/_jsx(Text, {
+                    style: [styles.statsLabel, themedStyles.statsLabel],
+                    children: columnStatsLabels.mean
+                  })
+                }), displayColumns.map(column => {
+                  const colWidth = getColWidth(column);
+                  const isPlaceholder = column.key.startsWith('_placeholder_col_');
+                  if (column.isAction || isPlaceholder) {
+                    return /*#__PURE__*/_jsx(View, {
+                      style: [styles.cell, {
+                        width: colWidth
+                      }]
+                    }, column.key);
+                  }
+                  const stat = columnStats[columns.filter(c => !c.isAction).indexOf(column)];
+                  const isHovered = hoveredCell?.rowKey === '__column_mean__' && hoveredCell?.columnKey === column.key;
+                  const tooltipContent = isHovered && stat ? getColumnStatsTooltipContent(column.key, column, stat) : null;
+                  const isClickable = !!onColumnStatsCellClick;
+                  return /*#__PURE__*/_jsx(Hoverable, {
+                    onHoverIn: () => handleCellHover('__column_mean__', column.key, true),
+                    onHoverOut: () => handleCellHover('__column_mean__', column.key, false),
+                    children: /*#__PURE__*/_jsxs(TouchableOpacity, {
+                      style: [styles.cell, themedStyles.cell, {
+                        width: colWidth
+                      }, isHovered && themedStyles.cellHovered],
+                      onPress: isClickable && stat ? () => onColumnStatsCellClick(column.key, 'mean', stat, column) : undefined,
+                      activeOpacity: isClickable ? 0.7 : 1,
+                      disabled: !isClickable,
+                      children: [/*#__PURE__*/_jsxs(View, {
+                        style: styles.cellContentContainer,
+                        children: [/*#__PURE__*/_jsx(Text, {
+                          style: [styles.cellQuantity, themedStyles.cellQuantity],
+                          children: formatQuantity(Math.round((stat?.meanQuantity || 0) * 10) / 10)
+                        }), /*#__PURE__*/_jsx(Text, {
+                          style: [styles.cellAmount, themedStyles.cellAmount],
+                          children: formatAmount(stat?.meanAmount || 0)
+                        })]
+                      }), /*#__PURE__*/_jsx(CellTooltip, {
+                        visible: isHovered,
+                        content: tooltipContent,
+                        style: {
+                          bottom: '100%',
+                          left: 0,
+                          marginBottom: 8
+                        }
+                      })]
+                    })
+                  }, column.key);
+                })]
+              })]
+            })]
+          })
+        })
+      }), actualShowRowStats && /*#__PURE__*/_jsxs(Animated.View, {
+        style: [styles.rowStatsContainer, {
+          width: statsColumnsWidth
+        }, Platform.OS === 'web' && {
+          boxShadow: '-2px 0 6px rgba(0, 0, 0, 0.08)'
+        }, enableStatsAnimation && {
+          opacity: rowStatsAnimation,
+          transform: [{
+            translateX: rowStatsAnimation.interpolate({
+              inputRange: [0, 1],
+              outputRange: [statsColumnsWidth, 0]
+            })
+          }]
+        }],
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: [styles.header, themedStyles.header],
+          children: [/*#__PURE__*/_jsx(View, {
+            style: [styles.headerCell, themedStyles.statsHeaderCell, {
+              width: statsColumnWidth
+            }],
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.headerText, themedStyles.statsHeaderText],
+              children: rowStatsHeaders.sum
+            })
+          }), /*#__PURE__*/_jsx(View, {
+            style: [styles.headerCell, themedStyles.statsHeaderCell, {
+              width: statsColumnWidth
+            }],
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.headerText, themedStyles.statsHeaderText],
+              children: rowStatsHeaders.mean
+            })
+          })]
+        }), /*#__PURE__*/_jsxs(ScrollView, {
+          ref: rowStatsScrollRef,
+          style: {
+            maxHeight: maxHeight - columnStatsHeight
+          },
+          showsVerticalScrollIndicator: false,
+          scrollEnabled: false,
+          children: [enableVirtualization && virtualScrollData.offsetTop > 0 && /*#__PURE__*/_jsx(View, {
+            style: {
+              height: virtualScrollData.offsetTop
+            }
+          }), visibleRows.map((row, rowIndex) => {
+            // 计算在原始数组中的索引
+            const actualIndex = enableVirtualization ? virtualScrollData.startIndex + rowIndex : rowIndex;
+            const rowStat = rowStats?.[actualIndex];
+            const currentRowHeight = getRowHeightValue(row);
+            const isRowHovered = hoveredCell?.rowKey === row.key;
+            const isSumHovered = hoveredCell?.rowKey === row.key && hoveredCell?.columnKey === '__row_sum__';
+            const isMeanHovered = hoveredCell?.rowKey === row.key && hoveredCell?.columnKey === '__row_mean__';
+            const sumTooltipContent = isSumHovered && rowStat ? getRowStatsTooltipContent(row.key, rowStat, storeCount) : null;
+            const meanTooltipContent = isMeanHovered && rowStat ? getRowStatsTooltipContent(row.key, rowStat, storeCount) : null;
+            const isClickable = !!onRowStatsCellClick;
+            return /*#__PURE__*/_jsxs(View, {
+              style: [styles.row, themedStyles.rowStatsCell, {
+                minHeight: currentRowHeight
+              }, isRowHovered && themedStyles.rowHovered],
+              children: [/*#__PURE__*/_jsx(Hoverable, {
+                onHoverIn: () => handleCellHover(row.key, '__row_sum__', true),
+                onHoverOut: () => handleCellHover(row.key, '__row_sum__', false),
+                children: /*#__PURE__*/_jsxs(TouchableOpacity, {
+                  style: [styles.cell, themedStyles.cell, {
+                    width: statsColumnWidth
+                  }],
+                  onPress: isClickable && rowStat ? () => onRowStatsCellClick(row.key, 'sum', rowStat) : undefined,
+                  activeOpacity: isClickable ? 0.7 : 1,
+                  disabled: !isClickable,
+                  children: [/*#__PURE__*/_jsxs(View, {
+                    style: styles.cellContentContainer,
+                    children: [/*#__PURE__*/_jsx(Text, {
+                      style: [styles.cellQuantity, themedStyles.cellQuantity],
+                      children: formatQuantity(rowStat?.sumQuantity || 0)
+                    }), /*#__PURE__*/_jsx(Text, {
+                      style: [styles.cellAmount, themedStyles.cellAmount],
+                      children: formatAmount(rowStat?.sumAmount || 0)
+                    })]
+                  }), /*#__PURE__*/_jsx(CellTooltip, {
+                    visible: isSumHovered,
+                    content: sumTooltipContent,
+                    style: {
+                      bottom: '100%',
+                      right: 0,
+                      marginBottom: 8
+                    }
+                  })]
+                })
+              }), /*#__PURE__*/_jsx(Hoverable, {
+                onHoverIn: () => handleCellHover(row.key, '__row_mean__', true),
+                onHoverOut: () => handleCellHover(row.key, '__row_mean__', false),
+                children: /*#__PURE__*/_jsxs(TouchableOpacity, {
+                  style: [styles.cell, themedStyles.cell, {
+                    width: statsColumnWidth
+                  }],
+                  onPress: isClickable && rowStat ? () => onRowStatsCellClick(row.key, 'mean', rowStat) : undefined,
+                  activeOpacity: isClickable ? 0.7 : 1,
+                  disabled: !isClickable,
+                  children: [/*#__PURE__*/_jsxs(View, {
+                    style: styles.cellContentContainer,
+                    children: [/*#__PURE__*/_jsx(Text, {
+                      style: [styles.cellQuantity, themedStyles.cellQuantity],
+                      children: formatQuantity(Math.round((rowStat?.meanQuantity || 0) * 10) / 10)
+                    }), /*#__PURE__*/_jsx(Text, {
+                      style: [styles.cellAmount, themedStyles.cellAmount],
+                      children: formatAmount(rowStat?.meanAmount || 0)
+                    })]
+                  }), /*#__PURE__*/_jsx(CellTooltip, {
+                    visible: isMeanHovered,
+                    content: meanTooltipContent,
+                    style: {
+                      bottom: '100%',
+                      right: 0,
+                      marginBottom: 8
+                    }
+                  })]
+                })
+              })]
+            }, row.key);
+          }), enableVirtualization && virtualScrollData.offsetBottom > 0 && /*#__PURE__*/_jsx(View, {
+            style: {
+              height: virtualScrollData.offsetBottom
+            }
+          })]
+        })]
+      })]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    borderRadius: 12,
+    overflow: 'hidden',
+    flexDirection: 'column'
+  },
+  tableContainer: {
+    flex: 1,
+    flexDirection: 'row'
+  },
+  header: {
+    flexDirection: 'row',
+    borderBottomWidth: 1
+  },
+  headerCell: {
+    paddingVertical: 12,
+    paddingHorizontal: 12,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  headerText: {
+    fontSize: 14,
+    fontWeight: '500',
+    textAlign: 'center'
+  },
+  headerContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 6
+  },
+  sortIndicator: {
+    flexDirection: 'column',
+    gap: 2
+  },
+  sortArrow: {
+    fontSize: 8,
+    color: 'rgba(0, 0, 0, 0.26)',
+    lineHeight: 8
+  },
+  sortArrowActive: {
+    color: 'rgba(0, 0, 0, 0.87)'
+  },
+  row: {
+    flexDirection: 'row',
+    borderBottomWidth: 1
+  },
+  cell: {
+    paddingVertical: 14,
+    paddingHorizontal: 12,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  cellContentContainer: {
+    width: '100%',
+    alignItems: 'center'
+  },
+  rowLabel: {
+    fontSize: 14,
+    fontWeight: '500'
+  },
+  cellQuantity: {
+    fontSize: 16,
+    fontWeight: '600',
+    marginBottom: 2,
+    textAlign: 'center'
+  },
+  cellAmount: {
+    fontSize: 12,
+    textAlign: 'center'
+  },
+  statsLabel: {
+    fontSize: 14,
+    fontWeight: '600'
+  },
+  actionContainer: {
+    flexDirection: 'row',
+    gap: 8,
+    justifyContent: 'center'
+  },
+  actionButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 4
+  },
+  actionButtonText: {
+    fontSize: 12,
+    fontWeight: '600'
+  },
+  loadingRow: {
+    padding: 40,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  emptyRow: {
+    padding: 40,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  emptyText: {
+    fontSize: 14
+  },
+  // Row Stats 容器
+  rowStatsContainer: {
+    position: 'relative'
+  },
+  // Column Stats 容器
+  columnStatsContainer: {
+    // 顶部边框由 themedStyles.columnStatsDivider 提供
+  },
+  // 垂直阴影条
+  shadowBar: {
+    position: 'absolute',
+    zIndex: 10,
+    width: 1,
+    backgroundColor: 'transparent'
+  },
+  shadowLeft: {
+    left: 0,
+    top: 40,
+    // 从表头底部开始
+    bottom: 0
+  },
+  shadowRight: {
+    top: 40,
+    // 从表头底部开始
+    bottom: 0
+  },
+  // 水平阴影条
+  shadowBarHorizontal: {
+    position: 'absolute',
+    zIndex: 10,
+    height: 1,
+    left: 0,
+    right: 0,
+    backgroundColor: 'transparent'
+  },
+  shadowTop: {
+    top: 40 // header height (paddingVertical: 12*2 + content ~16)
+  },
+  shadowBottom: {
+    // bottom 由动态样式设置
+  }
+});
+//# sourceMappingURL=StatisticsTable.js.map