@beppla/tapas-ui 1.2.35 → 1.3.0

package/module/StatisticsTable/StatisticsTable.js

@@ -0,0 +1,970 @@
+"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 Pagination from '../Pagination/Pagination';
+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,
+  pagination,
+  loading = false,
+  emptyText = 'No data',
+  maxHeight = 500,
+  rowLabelWidth = 150,
+  style,
+  formatQuantity = q => q.toLocaleString(),
+  formatAmount = a => `€${a.toFixed(2)}`,
+  enableVirtualization = false,
+  virtualRowHeight = 60,
+  onRowPress,
+  rowActions,
+  rowHeight = 60,
+  getRowHeight,
+  getColumnWidth,
+  enableScrollShadow = true,
+  showScrollIndicator = false,
+  statsColumnWidth = 100,
+  onCellHover,
+  renderCellTooltip,
+  renderRowStatsTooltip,
+  renderColumnStatsTooltip,
+  rowStatsHeaders = {
+    sum: 'Sum (€)',
+    mean: 'Mean (€)'
+  },
+  columnStatsLabels = {
+    sum: 'Sum',
+    mean: 'Mean'
+  },
+  headerStyle,
+  rowStatsHeaderStyle,
+  columnStatsLabelStyle,
+  enableStatsAnimation = true,
+  statsAnimationDuration = 300
+}) {
+  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
+  });
+
+  // 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.colorSurface,
+      // 米色
+      borderBottomColor: colors.colorTableBorder
+    },
+    headerCell: {
+      borderRightColor: colors.colorTableBorder
+    },
+    headerText: {
+      color: headerStyle?.textColor || colors.colorTextPrimary,
+      fontSize: headerStyle?.fontSize || 14,
+      fontWeight: headerStyle?.fontWeight || '500'
+    },
+    // Row Stats 表头样式
+    statsHeaderCell: {
+      backgroundColor: rowStatsHeaderStyle?.backgroundColor || 'rgba(0, 0, 0, 0.08)',
+      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.colorSurface1 // 白色
+    },
+    // Hover 单元格 - rgba(0, 0, 0, 0.08)
+    cellHovered: {
+      backgroundColor: 'rgba(0, 0, 0, 0.08)'
+    },
+    // 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'
+    },
+    paginationContainer: {
+      borderTopColor: colors.colorTableBorder,
+      backgroundColor: colors.colorSurface
+    },
+    // 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 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
+    });
+    handleScroll(event);
+  }, [handleScroll]);
+
+  // 处理单元格 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, {
+          children: "Loading..."
+        })
+      })
+    });
+  }
+  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 visibleRows = enableVirtualization ? rows.slice(0, Math.ceil(maxHeight / virtualRowHeight)) : rows;
+
+  // 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,
+          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]
+                })
+              }), columns.map(column => {
+                const colWidth = getColWidth(column);
+                return /*#__PURE__*/_jsx(View, {
+                  style: [styles.headerCell, themedStyles.headerCell, {
+                    width: colWidth
+                  }],
+                  children: /*#__PURE__*/_jsx(Text, {
+                    style: [styles.headerText, themedStyles.headerText],
+                    children: column.title
+                  })
+                }, column.key);
+              })]
+            }), /*#__PURE__*/_jsx(ScrollView, {
+              ref: bodyScrollViewRef,
+              style: {
+                maxHeight: maxHeight - columnStatsHeight
+              },
+              showsVerticalScrollIndicator: showScrollIndicator,
+              onScroll: handleBodyScroll,
+              scrollEventThrottle: 16,
+              children: visibleRows.map(row => {
+                const currentRowHeight = getRowHeightValue(row);
+                const isClickable = !!onRowPress;
+                const isRowHovered = hoveredCell?.rowKey === row.key;
+                return /*#__PURE__*/_jsxs(TouchableOpacity, {
+                  style: [styles.row, themedStyles.row, {
+                    minHeight: currentRowHeight
+                  }, isRowHovered && themedStyles.rowHovered],
+                  onPress: isClickable ? () => onRowPress(row.key, row.data) : undefined,
+                  activeOpacity: isClickable ? 0.7 : 1,
+                  disabled: !isClickable,
+                  children: [/*#__PURE__*/_jsx(View, {
+                    style: [styles.cell, themedStyles.cell, {
+                      width: rowLabelWidth
+                    }],
+                    children: /*#__PURE__*/_jsx(Text, {
+                      style: [styles.rowLabel, themedStyles.rowLabel],
+                      children: row.label
+                    })
+                  }), columns.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;
+                    return /*#__PURE__*/_jsx(Hoverable, {
+                      onHoverIn: () => handleCellHover(row.key, column.key, true),
+                      onHoverOut: () => handleCellHover(row.key, column.key, false),
+                      children: /*#__PURE__*/_jsxs(View, {
+                        style: [styles.cell, themedStyles.cell, {
+                          width: colWidth
+                        }, isHovered && themedStyles.cellHovered],
+                        children: [renderCellContent(column, cell, row.data), /*#__PURE__*/_jsx(CellTooltip, {
+                          visible: isHovered,
+                          content: tooltipContent,
+                          style: {
+                            bottom: '100%',
+                            left: 0,
+                            marginBottom: 8
+                          }
+                        })]
+                      })
+                    }, column.key);
+                  })]
+                }, row.key);
+              })
+            }), 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
+                  })
+                }), columns.map(column => {
+                  const colWidth = getColWidth(column);
+                  if (column.isAction) {
+                    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;
+                  return /*#__PURE__*/_jsx(Hoverable, {
+                    onHoverIn: () => handleCellHover('__column_sum__', column.key, true),
+                    onHoverOut: () => handleCellHover('__column_sum__', column.key, false),
+                    children: /*#__PURE__*/_jsxs(View, {
+                      style: [styles.cell, themedStyles.cell, {
+                        width: colWidth
+                      }, isHovered && themedStyles.cellHovered],
+                      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
+                  })
+                }), columns.map(column => {
+                  const colWidth = getColWidth(column);
+                  if (column.isAction) {
+                    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;
+                  return /*#__PURE__*/_jsx(Hoverable, {
+                    onHoverIn: () => handleCellHover('__column_mean__', column.key, true),
+                    onHoverOut: () => handleCellHover('__column_mean__', column.key, false),
+                    children: /*#__PURE__*/_jsxs(View, {
+                      style: [styles.cell, themedStyles.cell, {
+                        width: colWidth
+                      }, isHovered && themedStyles.cellHovered],
+                      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__*/_jsx(ScrollView, {
+          ref: rowStatsScrollRef,
+          style: {
+            maxHeight: maxHeight - columnStatsHeight
+          },
+          showsVerticalScrollIndicator: false,
+          scrollEnabled: false,
+          children: visibleRows.map((row, rowIndex) => {
+            const rowStat = rowStats?.[rowIndex];
+            const currentRowHeight = getRowHeightValue(row);
+            const isRowHovered = hoveredCell?.rowKey === row.key;
+            const isSumHovered = hoveredCell?.rowKey === row.key && hoveredCell?.columnKey === '__row_sum__';
+            const sumTooltipContent = isSumHovered && rowStat ? getRowStatsTooltipContent(row.key, rowStat, storeCount) : null;
+            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(View, {
+                  style: [styles.cell, themedStyles.cell, {
+                    width: statsColumnWidth
+                  }],
+                  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(View, {
+                style: [styles.cell, themedStyles.cell, {
+                  width: statsColumnWidth
+                }],
+                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)
+                  })]
+                })
+              })]
+            }, row.key);
+          })
+        })]
+      })]
+    }), pagination !== false && pagination && /*#__PURE__*/_jsx(View, {
+      style: [styles.paginationContainer, themedStyles.paginationContainer],
+      children: /*#__PURE__*/_jsx(Pagination, {
+        totalCount: `${pagination.total} items`,
+        pageParams: {
+          page: pagination.current,
+          pageSize: pagination.pageSize,
+          totalItems: pagination.total,
+          totalPage: Math.ceil(pagination.total / pagination.pageSize)
+        },
+        onPageChange: params => {
+          pagination.onChange?.(params.page, params.pageSize);
+        }
+      })
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 12,
+    overflow: 'hidden'
+  },
+  tableContainer: {
+    flexDirection: 'row'
+  },
+  header: {
+    flexDirection: 'row',
+    borderBottomWidth: 1
+  },
+  headerCell: {
+    paddingVertical: 16,
+    paddingHorizontal: 12,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  headerText: {
+    fontSize: 14,
+    fontWeight: '500',
+    textAlign: 'center'
+  },
+  row: {
+    flexDirection: 'row',
+    borderBottomWidth: 1
+  },
+  cell: {
+    paddingVertical: 16,
+    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
+  },
+  paginationContainer: {
+    padding: 16,
+    borderTopWidth: 1
+  },
+  // Row Stats 容器
+  rowStatsContainer: {
+    position: 'relative'
+  },
+  // Column Stats 容器
+  columnStatsContainer: {
+    // 顶部边框由 themedStyles.columnStatsDivider 提供
+  },
+  // 垂直阴影条
+  shadowBar: {
+    position: 'absolute',
+    zIndex: 10,
+    width: 1,
+    backgroundColor: 'transparent'
+  },
+  shadowLeft: {
+    left: 0,
+    top: 0,
+    bottom: 0
+  },
+  shadowRight: {
+    top: 0,
+    bottom: 0
+  },
+  // 水平阴影条
+  shadowBarHorizontal: {
+    position: 'absolute',
+    zIndex: 10,
+    height: 1,
+    left: 0,
+    right: 0,
+    backgroundColor: 'transparent'
+  },
+  shadowTop: {
+    top: 56 // header height
+  },
+  shadowBottom: {
+    // bottom 由动态样式设置
+  }
+});
+//# sourceMappingURL=StatisticsTable.js.map