@beppla/tapas-ui 1.2.36 → 1.4.0

package/package/module/StatisticsTable/StatisticsTable.js

@@ -1,10 +1,85 @@
 "use strict";
 
-import React, { useMemo, useCallback, useState, useRef } from 'react';
-import { View, ScrollView, StyleSheet, Platform, TouchableOpacity } from 'react-native';
-import Text from '../Text/Text';
+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,
@@ -27,20 +102,164 @@ export function StatisticsTable({
   getRowHeight,
   getColumnWidth,
   enableScrollShadow = true,
-  scrollShadowColor = 'rgba(0, 0, 0, 0.1)',
-  scrollShadowSize = 8
+  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 [horizontalScrollState, setHorizontalScrollState] = useState({
-    isAtStart: true,
-    isAtEnd: false
-  });
-  const [verticalScrollState, setVerticalScrollState] = useState({
+  const [scrollState, setScrollState] = useState({
+    left: 0,
+    top: 0,
     isAtStart: true,
-    isAtEnd: false
+    isAtEnd: false,
+    isAtTop: true,
+    isAtBottom: false
   });
-  const horizontalScrollRef = useRef(null);
-  const verticalScrollRef = useRef(null);
+
+  // 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(() => {
@@ -60,34 +279,30 @@ export function StatisticsTable({
     return data;
   }, [rows, columns, cells]);
 
-  // 计算行统计（每行的总和和平均值）
+  // 计算行统计
   const rowStats = useMemo(() => {
     if (!showRowStats) return null;
     return rows.map(row => {
-      const rowCells = columns.filter(col => !col.isAction) // 排除 action 列
-      .map(col => matrix[row.key]?.[col.key] || {
+      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;
-      const meanQuantity = sumQuantity / count;
-      const meanAmount = sumAmount / count;
       return {
         sumQuantity,
         sumAmount,
-        meanQuantity,
-        meanAmount
+        meanQuantity: sumQuantity / count,
+        meanAmount: sumAmount / count
       };
     });
   }, [rows, columns, matrix, showRowStats]);
 
-  // 计算列统计（每列的总和和平均值）
+  // 计算列统计
   const columnStats = useMemo(() => {
     if (!showColumnStats) return null;
-    return columns.filter(col => !col.isAction) // 排除 action 列
-    .map(col => {
+    return columns.filter(col => !col.isAction).map(col => {
       const colCells = rows.map(row => matrix[row.key]?.[col.key] || {
         quantity: 0,
         amount: 0
@@ -95,116 +310,157 @@ export function StatisticsTable({
       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;
-      const meanQuantity = sumQuantity / count;
-      const meanAmount = sumAmount / count;
       return {
         sumQuantity,
         sumAmount,
-        meanQuantity,
-        meanAmount
+        meanQuantity: sumQuantity / count,
+        meanAmount: sumAmount / count
       };
     });
   }, [rows, columns, matrix, showColumnStats]);
-
-  // 获取列宽
   const getColWidth = useCallback(column => {
-    if (getColumnWidth) {
-      return getColumnWidth(column.key, 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);
-    }
+    if (getRowHeight) return getRowHeight(row.key, row.data);
     return rowHeight;
   }, [rowHeight, getRowHeight]);
 
-  // 处理水平滚动
-  const handleHorizontalScroll = useCallback(event => {
+  // 处理滚动
+  const handleScroll = useCallback(event => {
     const {
       contentOffset,
       contentSize,
       layoutMeasurement
     } = event.nativeEvent;
-    const isAtStart = contentOffset.x <= 0;
-    const isAtEnd = contentOffset.x + layoutMeasurement.width >= contentSize.width - 1;
-    setHorizontalScrollState({
-      isAtStart,
-      isAtEnd
+    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
     });
   }, []);
 
-  // 处理垂直滚动
-  const handleVerticalScroll = useCallback(event => {
+  // 同步 Row Stats 滚动
+  const handleBodyScroll = useCallback(event => {
     const {
-      contentOffset,
-      contentSize,
-      layoutMeasurement
+      contentOffset
     } = event.nativeEvent;
-    const isAtStart = contentOffset.y <= 0;
-    const isAtEnd = contentOffset.y + layoutMeasurement.height >= contentSize.height - 1;
-    setVerticalScrollState({
-      isAtStart,
-      isAtEnd
+    rowStatsScrollRef.current?.scrollTo({
+      y: contentOffset.y,
+      animated: false
     });
-  }, []);
+    handleScroll(event);
+  }, [handleScroll]);
 
-  // 获取单元格对齐方式
-  const getCellAlignment = useCallback((column, isHeader = false) => {
-    if (column.align) return column.align;
-    if (isHeader) return 'center';
-    // 默认：数字右对齐，文本左对齐
-    if (column.dataType === 'number' || column.dataType === 'currency') {
-      return 'right';
+  // 处理单元格 hover
+  const handleCellHover = useCallback((rowKey, columnKey, isHovered) => {
+    if (isHovered) {
+      setHoveredCell({
+        rowKey,
+        columnKey
+      });
+    } else {
+      setHoveredCell(null);
     }
-    return 'left';
-  }, []);
+    onCellHover?.(rowKey, columnKey, isHovered);
+  }, [onCellHover]);
 
-  // 渲染单元格内容
-  const renderCellContent = useCallback((column, cell, rowData) => {
-    // 自定义渲染
-    if (column.render) {
-      return column.render(cell, rowData);
+  // 获取单元格 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]);
 
-    // Action 列
+  // 获取列统计 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,
+          style: [styles.actionButton, {
+            backgroundColor: colors.colorTextAccent
+          }],
           onPress: () => action.onPress(cell.rowKey, rowData),
           activeOpacity: 0.7,
           children: /*#__PURE__*/_jsx(Text, {
-            style: styles.actionButtonText,
+            style: [styles.actionButtonText, {
+              color: colors.colorTextInvert
+            }],
             children: action.label
           })
         }, index))
       });
     }
-
-    // 默认渲染
-    const align = getCellAlignment(column);
     return /*#__PURE__*/_jsxs(View, {
-      style: [styles.cellContentContainer, {
-        alignItems: align === 'left' ? 'flex-start' : align === 'right' ? 'flex-end' : 'center'
-      }],
+      style: styles.cellContentContainer,
       children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.cellQuantity, align === 'right' && styles.cellQuantityRight],
+        style: [styles.cellQuantity, themedStyles.cellQuantity],
         children: formatQuantity(cell.quantity)
       }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.cellAmount, align === 'right' && styles.cellAmountRight],
+        style: [styles.cellAmount, themedStyles.cellAmount],
         children: formatAmount(cell.amount)
       })]
     });
-  }, [rowActions, getCellAlignment, formatQuantity, formatAmount]);
+  }, [rowActions, formatQuantity, formatAmount, colors, themedStyles]);
+
+  // 计算统计列宽度
+  const statsColumnsWidth = actualShowRowStats ? statsColumnWidth * 2 : 0;
   if (loading) {
     return /*#__PURE__*/_jsx(View, {
-      style: [styles.container, style],
+      style: [styles.container, themedStyles.container, style],
       children: /*#__PURE__*/_jsx(View, {
         style: styles.loadingRow,
         children: /*#__PURE__*/_jsx(Text, {
@@ -215,282 +471,361 @@ export function StatisticsTable({
   }
   if (rows.length === 0 || columns.length === 0) {
     return /*#__PURE__*/_jsx(View, {
-      style: [styles.container, style],
+      style: [styles.container, themedStyles.container, style],
       children: /*#__PURE__*/_jsx(View, {
         style: styles.emptyRow,
         children: /*#__PURE__*/_jsx(Text, {
-          style: styles.emptyText,
+          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, style],
-    children: [enableScrollShadow && !horizontalScrollState.isAtStart && /*#__PURE__*/_jsx(View, {
-      style: [styles.shadowLeft, {
-        width: scrollShadowSize,
-        backgroundColor: 'transparent',
-        shadowColor: scrollShadowColor
-      }]
-    }), enableScrollShadow && !horizontalScrollState.isAtEnd && /*#__PURE__*/_jsx(View, {
-      style: [styles.shadowRight, {
-        width: scrollShadowSize,
-        backgroundColor: 'transparent',
-        shadowColor: scrollShadowColor
-      }]
-    }), /*#__PURE__*/_jsx(ScrollView, {
-      ref: horizontalScrollRef,
-      horizontal: true,
-      showsHorizontalScrollIndicator: Platform.OS === 'web',
-      onScroll: handleHorizontalScroll,
-      scrollEventThrottle: 16,
-      children: /*#__PURE__*/_jsxs(View, {
-        children: [enableScrollShadow && !verticalScrollState.isAtStart && /*#__PURE__*/_jsx(View, {
-          style: [styles.shadowTop, {
-            height: scrollShadowSize,
-            backgroundColor: 'transparent',
-            shadowColor: scrollShadowColor
-          }]
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.header,
-          children: [/*#__PURE__*/_jsx(View, {
-            style: [styles.headerCell, {
-              width: rowLabelWidth
-            }],
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.headerText
-            })
-          }), columns.map(column => {
-            const align = getCellAlignment(column, true);
-            const colWidth = getColWidth(column);
-            return /*#__PURE__*/_jsx(View, {
-              style: [styles.headerCell, {
-                width: colWidth,
-                minWidth: column.minWidth,
-                maxWidth: column.maxWidth
-              }, align === 'right' && styles.headerCellRight, align === 'left' && styles.headerCellLeft],
-              children: /*#__PURE__*/_jsx(Text, {
-                style: [styles.headerText, align === 'right' && styles.headerTextRight, align === 'left' && styles.headerTextLeft],
-                children: column.title
-              })
-            }, column.key);
-          }), showRowStats && /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx(View, {
-              style: [styles.headerCell, {
-                width: 120
-              }],
-              children: /*#__PURE__*/_jsx(Text, {
-                style: styles.headerText,
-                children: "Sum"
-              })
-            }), /*#__PURE__*/_jsx(View, {
-              style: [styles.headerCell, {
-                width: 120
-              }],
-              children: /*#__PURE__*/_jsx(Text, {
-                style: styles.headerText,
-                children: "Mean"
-              })
-            })]
-          })]
-        }), /*#__PURE__*/_jsxs(ScrollView, {
-          ref: verticalScrollRef,
-          style: {
-            maxHeight
-          },
-          showsVerticalScrollIndicator: Platform.OS === 'web',
-          removeClippedSubviews: enableVirtualization,
-          onScroll: handleVerticalScroll,
+    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,
-          children: [visibleRows.map((row, rowIndex) => {
-            const rowStat = rowStats?.[rowIndex];
-            const isClickable = !!onRowPress;
-            const currentRowHeight = getRowHeightValue(row);
-            return /*#__PURE__*/_jsxs(TouchableOpacity, {
-              style: [styles.row, {
-                minHeight: currentRowHeight
-              }],
-              onPress: isClickable ? () => onRowPress(row.key, row.data) : undefined,
-              activeOpacity: isClickable ? 0.7 : 1,
-              disabled: !isClickable,
+          style: hideScrollbarStyle,
+          children: /*#__PURE__*/_jsxs(View, {
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: [styles.header, themedStyles.header],
               children: [/*#__PURE__*/_jsx(View, {
-                style: [styles.cell, {
-                  width: rowLabelWidth,
-                  minHeight: currentRowHeight
+                style: [styles.headerCell, themedStyles.headerCell, {
+                  width: rowLabelWidth
                 }],
                 children: /*#__PURE__*/_jsx(Text, {
-                  style: styles.rowLabel,
-                  children: row.label
+                  style: [styles.headerText, themedStyles.headerText]
                 })
               }), columns.map(column => {
-                const cell = matrix[row.key]?.[column.key] || {
-                  quantity: 0,
-                  amount: 0,
-                  rowKey: row.key,
-                  columnKey: column.key
-                };
-                const align = getCellAlignment(column);
                 const colWidth = getColWidth(column);
                 return /*#__PURE__*/_jsx(View, {
-                  style: [styles.cell, {
-                    width: colWidth,
-                    minWidth: column.minWidth,
-                    maxWidth: column.maxWidth,
-                    minHeight: currentRowHeight
-                  }, align === 'right' && styles.cellRight, align === 'left' && styles.cellLeft],
-                  children: renderCellContent(column, cell, row.data)
+                  style: [styles.headerCell, themedStyles.headerCell, {
+                    width: colWidth
+                  }],
+                  children: /*#__PURE__*/_jsx(Text, {
+                    style: [styles.headerText, themedStyles.headerText],
+                    children: column.title
+                  })
                 }, column.key);
-              }), showRowStats && rowStat && /*#__PURE__*/_jsxs(_Fragment, {
+              })]
+            }), /*#__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, styles.cellRight, {
-                    width: 120
+                  style: [styles.cell, themedStyles.cell, {
+                    width: rowLabelWidth
                   }],
-                  children: /*#__PURE__*/_jsxs(View, {
-                    style: styles.cellContentContainer,
-                    children: [/*#__PURE__*/_jsx(Text, {
-                      style: [styles.cellQuantity, styles.cellQuantityRight],
-                      children: formatQuantity(rowStat.sumQuantity)
-                    }), /*#__PURE__*/_jsx(Text, {
-                      style: [styles.cellAmount, styles.cellAmountRight],
-                      children: formatAmount(rowStat.sumAmount)
-                    })]
+                  children: /*#__PURE__*/_jsx(Text, {
+                    style: [styles.statsLabel, themedStyles.statsLabel],
+                    children: columnStatsLabels.sum
                   })
-                }), /*#__PURE__*/_jsx(View, {
-                  style: [styles.cell, styles.cellRight, {
-                    width: 120
+                }), 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__*/_jsxs(View, {
-                    style: styles.cellContentContainer,
-                    children: [/*#__PURE__*/_jsx(Text, {
-                      style: [styles.cellQuantity, styles.cellQuantityRight],
-                      children: formatQuantity(Math.round(rowStat.meanQuantity * 10) / 10)
-                    }), /*#__PURE__*/_jsx(Text, {
-                      style: [styles.cellAmount, styles.cellAmountRight],
-                      children: formatAmount(rowStat.meanAmount)
-                    })]
+                  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);
                 })]
               })]
-            }, row.key);
-          }), showColumnStats && columnStats && /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsxs(View, {
-              style: [styles.row, styles.statsRow],
-              children: [/*#__PURE__*/_jsx(View, {
-                style: [styles.cell, {
-                  width: rowLabelWidth
-                }],
-                children: /*#__PURE__*/_jsx(Text, {
-                  style: styles.statsLabel,
-                  children: "Sum"
-                })
-              }), columns.map(column => {
-                const colWidth = getColWidth(column);
-                if (column.isAction) {
-                  return /*#__PURE__*/_jsx(View, {
-                    style: [styles.cell, {
-                      width: colWidth,
-                      minWidth: column.minWidth,
-                      maxWidth: column.maxWidth
-                    }]
-                  }, column.key);
-                }
-                const stat = columnStats[columns.filter(c => !c.isAction).indexOf(column)];
-                const align = getCellAlignment(column);
-                return /*#__PURE__*/_jsx(View, {
-                  style: [styles.cell, {
-                    width: colWidth,
-                    minWidth: column.minWidth,
-                    maxWidth: column.maxWidth
-                  }, align === 'right' && styles.cellRight, align === 'left' && styles.cellLeft],
-                  children: /*#__PURE__*/_jsxs(View, {
+            })]
+          })
+        })
+      }), 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, align === 'right' && styles.cellQuantityRight],
-                      children: formatQuantity(stat?.sumQuantity || 0)
+                      style: [styles.cellQuantity, themedStyles.cellQuantity],
+                      children: formatQuantity(rowStat?.sumQuantity || 0)
                     }), /*#__PURE__*/_jsx(Text, {
-                      style: [styles.cellAmount, align === 'right' && styles.cellAmountRight],
-                      children: formatAmount(stat?.sumAmount || 0)
+                      style: [styles.cellAmount, themedStyles.cellAmount],
+                      children: formatAmount(rowStat?.sumAmount || 0)
                     })]
-                  })
-                }, column.key);
-              }), showRowStats && /*#__PURE__*/_jsxs(_Fragment, {
-                children: [/*#__PURE__*/_jsx(View, {
-                  style: [styles.cell, {
-                    width: 120
-                  }]
-                }), /*#__PURE__*/_jsx(View, {
-                  style: [styles.cell, {
-                    width: 120
-                  }]
-                })]
-              })]
-            }), /*#__PURE__*/_jsxs(View, {
-              style: [styles.row, styles.statsRow],
-              children: [/*#__PURE__*/_jsx(View, {
-                style: [styles.cell, {
-                  width: rowLabelWidth
+                  }), /*#__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__*/_jsx(Text, {
-                  style: styles.statsLabel,
-                  children: "Mean"
+                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)
+                  })]
                 })
-              }), columns.map(column => {
-                const colWidth = getColWidth(column);
-                if (column.isAction) {
-                  return /*#__PURE__*/_jsx(View, {
-                    style: [styles.cell, {
-                      width: colWidth,
-                      minWidth: column.minWidth,
-                      maxWidth: column.maxWidth
-                    }]
-                  }, column.key);
-                }
-                const stat = columnStats[columns.filter(c => !c.isAction).indexOf(column)];
-                const align = getCellAlignment(column);
-                return /*#__PURE__*/_jsx(View, {
-                  style: [styles.cell, {
-                    width: colWidth,
-                    minWidth: column.minWidth,
-                    maxWidth: column.maxWidth
-                  }, align === 'right' && styles.cellRight, align === 'left' && styles.cellLeft],
-                  children: /*#__PURE__*/_jsxs(View, {
-                    style: styles.cellContentContainer,
-                    children: [/*#__PURE__*/_jsx(Text, {
-                      style: [styles.cellQuantity, align === 'right' && styles.cellQuantityRight],
-                      children: formatQuantity(Math.round((stat?.meanQuantity || 0) * 10) / 10)
-                    }), /*#__PURE__*/_jsx(Text, {
-                      style: [styles.cellAmount, align === 'right' && styles.cellAmountRight],
-                      children: formatAmount(stat?.meanAmount || 0)
-                    })]
-                  })
-                }, column.key);
-              }), showRowStats && /*#__PURE__*/_jsxs(_Fragment, {
-                children: [/*#__PURE__*/_jsx(View, {
-                  style: [styles.cell, {
-                    width: 120
-                  }]
-                }), /*#__PURE__*/_jsx(View, {
-                  style: [styles.cell, {
-                    width: 120
-                  }]
-                })]
               })]
-            })]
-          })]
-        }), enableScrollShadow && !verticalScrollState.isAtEnd && /*#__PURE__*/_jsx(View, {
-          style: [styles.shadowBottom, {
-            height: scrollShadowSize,
-            backgroundColor: 'transparent',
-            shadowColor: scrollShadowColor
-          }]
+            }, row.key);
+          })
         })]
-      })
+      })]
     }), pagination !== false && pagination && /*#__PURE__*/_jsx(View, {
-      style: styles.paginationContainer,
+      style: [styles.paginationContainer, themedStyles.paginationContainer],
       children: /*#__PURE__*/_jsx(Pagination, {
         totalCount: `${pagination.total} items`,
         pageParams: {
@@ -508,93 +843,58 @@ export function StatisticsTable({
 }
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: '#FFFFFF',
-    borderRadius: 8,
+    borderRadius: 12,
     overflow: 'hidden'
   },
+  tableContainer: {
+    flexDirection: 'row'
+  },
   header: {
     flexDirection: 'row',
-    backgroundColor: '#F5F5F5',
-    borderBottomWidth: 2,
-    borderBottomColor: '#E0E0E0'
+    borderBottomWidth: 1
   },
   headerCell: {
-    padding: 12,
-    borderRightWidth: 1,
-    borderRightColor: '#E0E0E0',
+    paddingVertical: 16,
+    paddingHorizontal: 12,
     justifyContent: 'center',
     alignItems: 'center'
   },
-  headerCellLeft: {
-    alignItems: 'flex-start'
-  },
-  headerCellRight: {
-    alignItems: 'flex-end'
-  },
   headerText: {
     fontSize: 14,
-    fontWeight: '600',
-    color: '#2C3E50',
+    fontWeight: '500',
     textAlign: 'center'
   },
-  headerTextLeft: {
-    textAlign: 'left'
-  },
-  headerTextRight: {
-    textAlign: 'right'
-  },
   row: {
     flexDirection: 'row',
-    borderBottomWidth: 1,
-    borderBottomColor: '#F0F0F0',
-    backgroundColor: '#FFFFFF'
-  },
-  statsRow: {
-    backgroundColor: '#F9F9F9'
+    borderBottomWidth: 1
   },
   cell: {
-    padding: 12,
+    paddingVertical: 16,
+    paddingHorizontal: 12,
     justifyContent: 'center',
-    alignItems: 'center',
-    borderRightWidth: 1,
-    borderRightColor: '#F0F0F0'
-  },
-  cellLeft: {
-    alignItems: 'flex-start'
-  },
-  cellRight: {
-    alignItems: 'flex-end'
+    alignItems: 'center'
   },
   cellContentContainer: {
-    width: '100%'
+    width: '100%',
+    alignItems: 'center'
   },
   rowLabel: {
     fontSize: 14,
-    fontWeight: '500',
-    color: '#2C3E50'
+    fontWeight: '500'
   },
   cellQuantity: {
-    fontSize: 14,
-    fontWeight: '500',
-    color: '#2C3E50',
-    marginBottom: 4,
-    textAlign: 'left'
-  },
-  cellQuantityRight: {
-    textAlign: 'right'
+    fontSize: 16,
+    fontWeight: '600',
+    marginBottom: 2,
+    textAlign: 'center'
   },
   cellAmount: {
     fontSize: 12,
-    color: '#7F8C8D',
-    textAlign: 'left'
-  },
-  cellAmountRight: {
-    textAlign: 'right'
+    textAlign: 'center'
   },
   statsLabel: {
     fontSize: 14,
-    fontWeight: '600',
-    color: '#2C3E50'
+    fontWeight: '600'
   },
   actionContainer: {
     flexDirection: 'row',
@@ -604,13 +904,11 @@ const styles = StyleSheet.create({
   actionButton: {
     paddingHorizontal: 12,
     paddingVertical: 6,
-    backgroundColor: '#FF6B00',
     borderRadius: 4
   },
   actionButtonText: {
     fontSize: 12,
-    fontWeight: '600',
-    color: '#FFFFFF'
+    fontWeight: '600'
   },
   loadingRow: {
     padding: 40,
@@ -623,71 +921,50 @@ const styles = StyleSheet.create({
     alignItems: 'center'
   },
   emptyText: {
-    fontSize: 14,
-    color: '#999'
+    fontSize: 14
   },
   paginationContainer: {
     padding: 16,
-    borderTopWidth: 1,
-    borderTopColor: '#E0E0E0',
-    backgroundColor: '#FAFAFA'
+    borderTopWidth: 1
   },
-  // 滚动阴影
-  shadowLeft: {
+  // 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,
-    zIndex: 10,
-    shadowOffset: {
-      width: 2,
-      height: 0
-    },
-    shadowOpacity: 0.15,
-    shadowRadius: 4,
-    elevation: 4
+    bottom: 0
   },
   shadowRight: {
-    position: 'absolute',
-    right: 0,
     top: 0,
-    bottom: 0,
-    zIndex: 10,
-    shadowOffset: {
-      width: -2,
-      height: 0
-    },
-    shadowOpacity: 0.15,
-    shadowRadius: 4,
-    elevation: 4
+    bottom: 0
   },
-  shadowTop: {
+  // 水平阴影条
+  shadowBarHorizontal: {
     position: 'absolute',
+    zIndex: 10,
+    height: 1,
     left: 0,
     right: 0,
-    top: 0,
-    zIndex: 10,
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.15,
-    shadowRadius: 4,
-    elevation: 4
+    backgroundColor: 'transparent'
+  },
+  shadowTop: {
+    top: 56 // header height
   },
   shadowBottom: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 0,
-    zIndex: 10,
-    shadowOffset: {
-      width: 0,
-      height: -2
-    },
-    shadowOpacity: 0.15,
-    shadowRadius: 4,
-    elevation: 4
+    // bottom 由动态样式设置
   }
 });
 //# sourceMappingURL=StatisticsTable.js.map