@beppla/tapas-ui 1.5.11 → 1.5.13

package/components/StatisticsTable/StatisticsTable.tsx

@@ -1,1304 +0,0 @@
-import React, { useMemo, useCallback, useState, useRef, useEffect } from 'react';
-import { View, ScrollView, StyleSheet, Platform, TouchableOpacity, NativeScrollEvent, NativeSyntheticEvent, Text, Animated } from 'react-native';
-import { useTheme } from '@rneui/themed';
-import Hoverable from '../Hoverable/Hoverable';
-
-export type CellAlignment = 'left' | 'center' | 'right';
-export type CellDataType = 'text' | 'number' | 'currency' | 'custom';
-
-export interface StatisticsTableColumn {
-  key: string;
-  title: string;
-  width?: number;
-  minWidth?: number;
-  maxWidth?: number;
-  align?: CellAlignment;
-  dataType?: CellDataType;
-  isAction?: boolean;
-  render?: (cell: StatisticsTableCell, rowData: any) => React.ReactNode;
-  renderHeader?: (column: StatisticsTableColumn) => React.ReactNode;
-  sortable?: boolean;
-  sortDirection?: 'asc' | 'desc' | null;
-  onSort?: (columnKey: string) => void;
-}
-
-export interface StatisticsTableCell {
-  rowKey: string;
-  columnKey: string;
-  quantity: number;
-  amount: number;
-  data?: any;
-}
-
-export interface StatisticsTableAction {
-  label: string;
-  onPress: (rowKey: string, data?: any) => void;
-  icon?: string;
-}
-
-// Tooltip 内容类型
-export interface TooltipContent {
-  title?: string;
-  subtitle?: string;
-  items?: Array<{ label: string; value: string }>;
-  customContent?: React.ReactNode;
-}
-
-export interface StatisticsTableProps {
-  rows: Array<{ key: string; label: string; data?: any; height?: number }>;
-  columns: StatisticsTableColumn[];
-  cells: StatisticsTableCell[];
-  showRowStats?: boolean;
-  showColumnStats?: boolean;
-  loading?: boolean;
-  loadingText?: string;
-  emptyText?: string;
-  maxHeight?: number;
-  rowLabelWidth?: number;
-  style?: any;
-  formatQuantity?: (quantity: number) => string;
-  formatAmount?: (amount: number) => string;
-  enableVirtualization?: boolean;
-  virtualRowHeight?: number;
-  onRowPress?: (rowKey: string, data?: any) => void;
-  rowActions?: StatisticsTableAction[];
-  rowHeight?: number;
-  getRowHeight?: (rowKey: string, rowData?: any) => number;
-  getColumnWidth?: (columnKey: string, column: StatisticsTableColumn) => number;
-  enableScrollShadow?: boolean;
-  showScrollIndicator?: boolean;
-  statsColumnWidth?: number;
-  onCellHover?: (rowKey: string, columnKey: string, isHovered: boolean) => void;
-  renderCellTooltip?: (rowKey: string, columnKey: string, cell: StatisticsTableCell, column: StatisticsTableColumn) => TooltipContent | null;
-  renderRowStatsTooltip?: (rowKey: string, stats: { sumQuantity: number; sumAmount: number; meanQuantity: number; meanAmount: number }, storeCount: number) => TooltipContent | null;
-  renderColumnStatsTooltip?: (columnKey: string, column: StatisticsTableColumn, stats: { sumQuantity: number; sumAmount: number; meanQuantity: number; meanAmount: number }) => TooltipContent | null;
-  // 点击事件
-  onCellClick?: (rowKey: string, columnKey: string, cell: StatisticsTableCell, column: StatisticsTableColumn) => void;
-  onRowStatsCellClick?: (rowKey: string, statsType: 'sum' | 'mean', stats: { sumQuantity: number; sumAmount: number; meanQuantity: number; meanAmount: number }) => void;
-  onColumnStatsCellClick?: (columnKey: string, statsType: 'sum' | 'mean', stats: { sumQuantity: number; sumAmount: number; meanQuantity: number; meanAmount: number }, column: StatisticsTableColumn) => void;
-  // 统计列/行表头配置
-  rowStatsHeaders?: {
-    sum: string;
-    mean: string;
-  };
-  columnStatsLabels?: {
-    sum: string;
-    mean: string;
-  };
-  // 表头样式定制
-  headerStyle?: {
-    backgroundColor?: string;
-    textColor?: string;
-    fontSize?: number;
-    fontWeight?: 'normal' | 'bold' | '500' | '600' | '700';
-  };
-  // Row Stats 表头样式定制
-  rowStatsHeaderStyle?: {
-    backgroundColor?: string;
-    textColor?: string;
-    fontSize?: number;
-    fontWeight?: 'normal' | 'bold' | '500' | '600' | '700';
-  };
-  // Column Stats 标签样式定制
-  columnStatsLabelStyle?: {
-    textColor?: string;
-    fontSize?: number;
-    fontWeight?: 'normal' | 'bold' | '500' | '600' | '700';
-  };
-  // 动画配置
-  enableStatsAnimation?: boolean;
-  statsAnimationDuration?: number; // 动画持续时间（毫秒）
-  // 占位行列配置
-  enablePlaceholder?: boolean; // 是否启用占位功能
-  minRows?: number; // 最小行数（包括占位行）
-  minColumns?: number; // 最小列数（包括占位列）
-  placeholderRowHeight?: number; // 占位行的高度（默认使用 rowHeight）
-  placeholderColumnWidth?: number | number[]; // 占位列的宽度（默认 150），可以是数字或数组为每列单独设置
-  /** Test ID for E2E testing */
-  testID?: string;
-}
-
-// Tooltip 组件
-const CellTooltip = ({ visible, content, style }: {
-  visible: boolean;
-  content: TooltipContent | null;
-  style?: any;
-}) => {
-  if (!visible || !content) return null;
-  
-  return (
-    <View style={[tooltipStyles.container, style]}>
-      {content.customContent ? (
-        content.customContent
-      ) : (
-        <>
-          {content.title && <Text style={tooltipStyles.title}>{content.title}</Text>}
-          {content.subtitle && <Text style={tooltipStyles.subtitle}>{content.subtitle}</Text>}
-          {content.items?.map((item, index) => (
-            <View key={index} style={tooltipStyles.row}>
-              <Text style={tooltipStyles.label}>{item.label}</Text>
-              <Text style={tooltipStyles.value}>{item.value}</Text>
-            </View>
-          ))}
-        </>
-      )}
-    </View>
-  );
-};
-
-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,
-  testID,
-}: StatisticsTableProps) {
-  const { theme } = useTheme();
-  const colors = theme.colors as unknown as Record<string, string>;
-  
-  // 动画值
-  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<{
-    rowKey: string;
-    columnKey: string;
-  } | null>(null);
-  
-  const scrollViewRef = useRef<ScrollView>(null);
-  const bodyScrollViewRef = useRef<ScrollView>(null);
-  const rowStatsScrollRef = useRef<ScrollView>(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: Record<string, Record<string, { quantity: number; amount: number; data?: any }>> = {};
-    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: StatisticsTableColumn) => {
-    if (getColumnWidth) return getColumnWidth(column.key, column);
-    return column.width || 150;
-  }, [getColumnWidth]);
-
-  const getRowHeightValue = useCallback((row: { key: string; label: string; data?: any; height?: number }) => {
-    if (row.height) return row.height;
-    if (getRowHeight) return getRowHeight(row.key, row.data);
-    return rowHeight;
-  }, [rowHeight, getRowHeight]);
-
-  // 处理滚动
-  const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
-    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: NativeSyntheticEvent<NativeScrollEvent>) => {
-    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: string, columnKey: string, isHovered: boolean) => {
-    if (isHovered) {
-      setHoveredCell({ rowKey, columnKey });
-    } else {
-      setHoveredCell(null);
-    }
-    onCellHover?.(rowKey, columnKey, isHovered);
-  }, [onCellHover]);
-
-  // 获取单元格 tooltip 内容
-  const getCellTooltipContent = useCallback((rowKey: string, columnKey: string, cell: StatisticsTableCell, column: StatisticsTableColumn): TooltipContent | null => {
-    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: string, stats: { sumQuantity: number; sumAmount: number; meanQuantity: number; meanAmount: number }, storeCount: number): TooltipContent | null => {
-    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: string, column: StatisticsTableColumn, stats: { sumQuantity: number; sumAmount: number; meanQuantity: number; meanAmount: number }): TooltipContent | null => {
-    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: StatisticsTableColumn, cell: any, rowData?: any) => {
-    if (column.render) return column.render(cell, rowData);
-
-    if (column.isAction && rowActions) {
-      return (
-        <View style={styles.actionContainer}>
-          {rowActions.map((action, index) => (
-            <TouchableOpacity
-              key={index}
-              style={[styles.actionButton, { backgroundColor: colors.colorTextAccent }]}
-              onPress={() => action.onPress(cell.rowKey, rowData)}
-              activeOpacity={0.7}
-            >
-              <Text style={[styles.actionButtonText, { color: colors.colorTextInvert }]}>{action.label}</Text>
-            </TouchableOpacity>
-          ))}
-        </View>
-      );
-    }
-
-    return (
-      <View style={styles.cellContentContainer}>
-        <Text style={[styles.cellQuantity, themedStyles.cellQuantity]}>
-          {formatQuantity(cell.quantity)}
-        </Text>
-        <Text style={[styles.cellAmount, themedStyles.cellAmount]}>
-          {formatAmount(cell.amount)}
-        </Text>
-      </View>
-    );
-  }, [rowActions, formatQuantity, formatAmount, colors, themedStyles]);
-
-  // 计算统计列宽度
-  const statsColumnsWidth = actualShowRowStats ? statsColumnWidth * 2 : 0;
-
-  if (loading) {
-    return (
-      <View testID={testID} style={[styles.container, themedStyles.container, style]}>
-        <View style={styles.loadingRow}>
-          <Text style={{ color: colors.colorTextPlaceholder }}>{loadingText}</Text>
-        </View>
-      </View>
-    );
-  }
-
-  if (rows.length === 0 || columns.length === 0) {
-    return (
-      <View testID={testID} style={[styles.container, themedStyles.container, style]}>
-        <View style={styles.emptyRow}>
-          <Text style={[styles.emptyText, { color: colors.colorTextPlaceholder }]}>{emptyText}</Text>
-        </View>
-      </View>
-    );
-  }
-
-  // 虚拟滚动计算
-  const virtualScrollData = useMemo(() => {
-    if (!enableVirtualization) {
-      return {
-        visibleRows: displayRows,
-        startIndex: 0,
-        endIndex: displayRows.length,
-        offsetTop: 0,
-        offsetBottom: 0,
-        totalHeight: 0,
-      };
-    }
-
-    // 计算每行的累积高度
-    const rowHeights: number[] = [];
-    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)' } as Record<string, string>,
-    rightShadow: { boxShadow: '-2px 0 6px 4px rgba(0, 0, 0, 0.08)' } as Record<string, string>,
-    topShadow: { boxShadow: '0 2px 6px 4px rgba(0, 0, 0, 0.08)' } as Record<string, string>,
-    bottomShadow: { boxShadow: '0 -2px 6px 4px rgba(0, 0, 0, 0.08)' } as Record<string, string>,
-  } : {};
-
-  // 隐藏滚动条的样式
-  const hideScrollbarStyle = Platform.OS === 'web' ? {
-    scrollbarWidth: 'none',
-    msOverflowStyle: 'none',
-  } as Record<string, string> : {};
-
-  const columnStatsHeight = actualShowColumnStats ? 120 : 0;
-  const storeCount = columns.filter(c => !c.isAction).length;
-
-  return (
-    <View testID={testID} style={[styles.container, themedStyles.container, style]}>
-      {/* 左边阴影 */}
-      {enableScrollShadow && !scrollState.isAtStart && (
-        <View style={[
-          styles.shadowBar,
-          styles.shadowLeft,
-          Platform.OS === 'web' && webShadowStyle.leftShadow,
-        ]} />
-      )}
-      
-      {/* 右边阴影 */}
-      {enableScrollShadow && !scrollState.isAtEnd && (
-        <View style={[
-          styles.shadowBar,
-          styles.shadowRight,
-          { right: actualShowRowStats ? statsColumnsWidth : 0 },
-          Platform.OS === 'web' && webShadowStyle.rightShadow,
-        ]} />
-      )}
-
-      {/* 顶部阴影 */}
-      {enableScrollShadow && !scrollState.isAtTop && (
-        <View style={[
-          styles.shadowBarHorizontal,
-          styles.shadowTop,
-          Platform.OS === 'web' && webShadowStyle.topShadow,
-        ]} />
-      )}
-
-      {/* 底部阴影 */}
-      {enableScrollShadow && !scrollState.isAtBottom && (
-        <View style={[
-          styles.shadowBarHorizontal,
-          styles.shadowBottom,
-          { bottom: actualShowColumnStats ? columnStatsHeight : 0 },
-          Platform.OS === 'web' && webShadowStyle.bottomShadow,
-        ]} />
-      )}
-
-      <View style={styles.tableContainer}>
-        {/* 主表格区域 */}
-        <View style={{ flex: 1 }}>
-          <ScrollView
-            ref={scrollViewRef}
-            horizontal
-            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);
-              }
-            }}
-          >
-            <View>
-              {/* 表头 */}
-              <View style={[styles.header, themedStyles.header]}>
-                <View style={[styles.headerCell, themedStyles.headerCell, { width: rowLabelWidth }]}>
-                  <Text style={[styles.headerText, themedStyles.headerText]}></Text>
-                </View>
-                {displayColumns.map((column) => {
-                  const colWidth = getColWidth(column);
-                  const isPlaceholder = column.key.startsWith('_placeholder_col_');
-                  
-                  // 如果提供了自定义 header 渲染函数
-                  if (column.renderHeader && !isPlaceholder) {
-                    return (
-                      <View 
-                        key={column.key} 
-                        style={[
-                          styles.headerCell, 
-                          themedStyles.headerCell, 
-                          { width: colWidth }
-                        ]}
-                      >
-                        {column.renderHeader(column)}
-                      </View>
-                    );
-                  }
-                  
-                  // 默认渲染（带排序支持）
-                  const isSortable = column.sortable && column.onSort;
-                  const HeaderContent = (
-                    <View style={styles.headerContent}>
-                      <Text style={[styles.headerText, themedStyles.headerText]}>
-                        {column.title}
-                      </Text>
-                      {isSortable && (
-                        <View style={styles.sortIndicator}>
-                          <Text style={[
-                            styles.sortArrow, 
-                            column.sortDirection === 'asc' && styles.sortArrowActive
-                          ]}>▲</Text>
-                          <Text style={[
-                            styles.sortArrow, 
-                            column.sortDirection === 'desc' && styles.sortArrowActive
-                          ]}>▼</Text>
-                        </View>
-                      )}
-                    </View>
-                  );
-                  
-                  return (
-                    <TouchableOpacity
-                      key={column.key}
-                      style={[
-                        styles.headerCell,
-                        themedStyles.headerCell,
-                        { width: colWidth }
-                      ]}
-                      onPress={isSortable ? () => column.onSort!(column.key) : undefined}
-                      activeOpacity={isSortable ? 0.7 : 1}
-                      disabled={!isSortable}
-                    >
-                      {HeaderContent}
-                    </TouchableOpacity>
-                  );
-                })}
-              </View>
-
-              {/* 表体 */}
-              <ScrollView
-                ref={bodyScrollViewRef}
-                style={{ maxHeight: maxHeight - columnStatsHeight }}
-                showsVerticalScrollIndicator={showScrollIndicator}
-                onScroll={handleBodyScroll}
-                scrollEventThrottle={16}
-              >
-                {/* 虚拟滚动上方占位空间 */}
-                {enableVirtualization && virtualScrollData.offsetTop > 0 && (
-                  <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 (
-                    <TouchableOpacity
-                      key={row.key}
-                      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}
-                    >
-                      <View style={[
-                        styles.cell, 
-                        themedStyles.cell, 
-                        { width: rowLabelWidth },
-                      ]}>
-                        <Text style={[styles.rowLabel, themedStyles.rowLabel]}>{row.label}</Text>
-                      </View>
-                      {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 as StatisticsTableCell, column) : null;
-                        const isColPlaceholder = column.key.startsWith('_placeholder_col_');
-                        const isRowPlaceholder = row.key.startsWith('_placeholder_row_');
-                        
-                        const isCellClickable = !!onCellClick && !isRowPlaceholder && !isColPlaceholder;
-                        
-                        return (
-                          <Hoverable
-                            key={column.key}
-                            onHoverIn={() => !isRowPlaceholder && !isColPlaceholder && handleCellHover(row.key, column.key, true)}
-                            onHoverOut={() => !isRowPlaceholder && !isColPlaceholder && handleCellHover(row.key, column.key, false)}
-                          >
-                            <TouchableOpacity
-                              style={[
-                                styles.cell, 
-                                themedStyles.cell, 
-                                { width: colWidth },
-                                isHovered && !isRowPlaceholder && !isColPlaceholder && themedStyles.cellHovered,
-                              ]}
-                              onPress={isCellClickable ? () => onCellClick(row.key, column.key, cell as StatisticsTableCell, column) : undefined}
-                              activeOpacity={isCellClickable ? 0.7 : 1}
-                              disabled={!isCellClickable}
-                            >
-                              {!isColPlaceholder && !isRowPlaceholder && renderCellContent(column, cell, row.data)}
-                              {!isRowPlaceholder && !isColPlaceholder && (
-                                <CellTooltip
-                                  visible={isHovered}
-                                  content={tooltipContent}
-                                  style={{ bottom: '100%', left: 0, marginBottom: 8 }}
-                                />
-                              )}
-                            </TouchableOpacity>
-                          </Hoverable>
-                        );
-                      })}
-                    </TouchableOpacity>
-                  );
-                })}
-                
-                {/* 虚拟滚动下方占位空间 */}
-                {enableVirtualization && virtualScrollData.offsetBottom > 0 && (
-                  <View style={{ height: virtualScrollData.offsetBottom }} />
-                )}
-              </ScrollView>
-
-              {/* Column Stats - 底部统计行 */}
-              {actualShowColumnStats && columnStats && (
-                <Animated.View style={[
-                  styles.columnStatsContainer, 
-                  themedStyles.columnStatsDivider,
-                  enableStatsAnimation && {
-                    opacity: columnStatsAnimation,
-                    transform: [{
-                      translateY: columnStatsAnimation.interpolate({
-                        inputRange: [0, 1],
-                        outputRange: [60, 0],
-                      }),
-                    }],
-                  },
-                ]}>
-                  {/* Sum 行 */}
-                  <View style={[styles.row, themedStyles.columnStatsRow]}>
-                    <View style={[styles.cell, themedStyles.cell, { width: rowLabelWidth }]}>
-                      <Text style={[styles.statsLabel, themedStyles.statsLabel]}>{columnStatsLabels.sum}</Text>
-                    </View>
-                    {displayColumns.map((column) => {
-                      const colWidth = getColWidth(column);
-                      const isPlaceholder = column.key.startsWith('_placeholder_col_');
-                      if (column.isAction || isPlaceholder) {
-                        return <View key={column.key} style={[styles.cell, { width: colWidth }]} />;
-                      }
-                      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 (
-                        <Hoverable
-                          key={column.key}
-                          onHoverIn={() => handleCellHover('__column_sum__', column.key, true)}
-                          onHoverOut={() => handleCellHover('__column_sum__', column.key, false)}
-                        >
-                          <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}
-                          >
-                            <View style={styles.cellContentContainer}>
-                              <Text style={[styles.cellQuantity, themedStyles.cellQuantity]}>
-                                {formatQuantity(stat?.sumQuantity || 0)}
-                              </Text>
-                              <Text style={[styles.cellAmount, themedStyles.cellAmount]}>
-                                {formatAmount(stat?.sumAmount || 0)}
-                              </Text>
-                            </View>
-                            <CellTooltip
-                              visible={isHovered}
-                              content={tooltipContent}
-                              style={{ bottom: '100%', left: 0, marginBottom: 8 }}
-                            />
-                          </TouchableOpacity>
-                        </Hoverable>
-                      );
-                    })}
-                  </View>
-                  {/* Mean 行 */}
-                  <View style={[styles.row, themedStyles.columnStatsRow]}>
-                    <View style={[styles.cell, themedStyles.cell, { width: rowLabelWidth }]}>
-                      <Text style={[styles.statsLabel, themedStyles.statsLabel]}>{columnStatsLabels.mean}</Text>
-                    </View>
-                    {displayColumns.map((column) => {
-                      const colWidth = getColWidth(column);
-                      const isPlaceholder = column.key.startsWith('_placeholder_col_');
-                      if (column.isAction || isPlaceholder) {
-                        return <View key={column.key} style={[styles.cell, { width: colWidth }]} />;
-                      }
-                      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 (
-                        <Hoverable
-                          key={column.key}
-                          onHoverIn={() => handleCellHover('__column_mean__', column.key, true)}
-                          onHoverOut={() => handleCellHover('__column_mean__', column.key, false)}
-                        >
-                          <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}
-                          >
-                            <View style={styles.cellContentContainer}>
-                              <Text style={[styles.cellQuantity, themedStyles.cellQuantity]}>
-                                {formatQuantity(Math.round((stat?.meanQuantity || 0) * 10) / 10)}
-                              </Text>
-                              <Text style={[styles.cellAmount, themedStyles.cellAmount]}>
-                                {formatAmount(stat?.meanAmount || 0)}
-                              </Text>
-                            </View>
-                            <CellTooltip
-                              visible={isHovered}
-                              content={tooltipContent}
-                              style={{ bottom: '100%', left: 0, marginBottom: 8 }}
-                            />
-                          </TouchableOpacity>
-                        </Hoverable>
-                      );
-                    })}
-                  </View>
-                </Animated.View>
-              )}
-            </View>
-          </ScrollView>
-        </View>
-
-        {/* Row Stats - 右侧统计列 */}
-        {actualShowRowStats && (
-          <Animated.View style={[
-            styles.rowStatsContainer,
-            { width: statsColumnsWidth },
-            Platform.OS === 'web' && { boxShadow: '-2px 0 6px rgba(0, 0, 0, 0.08)' } as Record<string, string>,
-            enableStatsAnimation && {
-              opacity: rowStatsAnimation,
-              transform: [{
-                translateX: rowStatsAnimation.interpolate({
-                  inputRange: [0, 1],
-                  outputRange: [statsColumnsWidth, 0],
-                }),
-              }],
-            },
-          ]}>
-            {/* 统计列表头 */}
-            <View style={[styles.header, themedStyles.header]}>
-              <View style={[styles.headerCell, themedStyles.statsHeaderCell, { width: statsColumnWidth }]}>
-                <Text style={[styles.headerText, themedStyles.statsHeaderText]}>{rowStatsHeaders.sum}</Text>
-              </View>
-              <View style={[styles.headerCell, themedStyles.statsHeaderCell, { width: statsColumnWidth }]}>
-                <Text style={[styles.headerText, themedStyles.statsHeaderText]}>{rowStatsHeaders.mean}</Text>
-              </View>
-            </View>
-
-            {/* 统计列数据 */}
-            <ScrollView
-              ref={rowStatsScrollRef}
-              style={{ maxHeight: maxHeight - columnStatsHeight }}
-              showsVerticalScrollIndicator={false}
-              scrollEnabled={false}
-            >
-              {/* 虚拟滚动上方占位空间 */}
-              {enableVirtualization && virtualScrollData.offsetTop > 0 && (
-                <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 (
-                  <View key={row.key} style={[
-                    styles.row, 
-                    themedStyles.rowStatsCell, 
-                    { minHeight: currentRowHeight },
-                    isRowHovered && themedStyles.rowHovered,
-                  ]}>
-                    <Hoverable
-                      onHoverIn={() => handleCellHover(row.key, '__row_sum__', true)}
-                      onHoverOut={() => handleCellHover(row.key, '__row_sum__', false)}
-                    >
-                      <TouchableOpacity
-                        style={[styles.cell, themedStyles.cell, { width: statsColumnWidth }]}
-                        onPress={isClickable && rowStat ? () => onRowStatsCellClick(row.key, 'sum', rowStat) : undefined}
-                        activeOpacity={isClickable ? 0.7 : 1}
-                        disabled={!isClickable}
-                      >
-                        <View style={styles.cellContentContainer}>
-                          <Text style={[styles.cellQuantity, themedStyles.cellQuantity]}>
-                            {formatQuantity(rowStat?.sumQuantity || 0)}
-                          </Text>
-                          <Text style={[styles.cellAmount, themedStyles.cellAmount]}>
-                            {formatAmount(rowStat?.sumAmount || 0)}
-                          </Text>
-                        </View>
-                        <CellTooltip
-                          visible={isSumHovered}
-                          content={sumTooltipContent}
-                          style={{ bottom: '100%', right: 0, marginBottom: 8 }}
-                        />
-                      </TouchableOpacity>
-                    </Hoverable>
-                    <Hoverable
-                      onHoverIn={() => handleCellHover(row.key, '__row_mean__', true)}
-                      onHoverOut={() => handleCellHover(row.key, '__row_mean__', false)}
-                    >
-                      <TouchableOpacity
-                        style={[styles.cell, themedStyles.cell, { width: statsColumnWidth }]}
-                        onPress={isClickable && rowStat ? () => onRowStatsCellClick(row.key, 'mean', rowStat) : undefined}
-                        activeOpacity={isClickable ? 0.7 : 1}
-                        disabled={!isClickable}
-                      >
-                        <View style={styles.cellContentContainer}>
-                          <Text style={[styles.cellQuantity, themedStyles.cellQuantity]}>
-                            {formatQuantity(Math.round((rowStat?.meanQuantity || 0) * 10) / 10)}
-                          </Text>
-                          <Text style={[styles.cellAmount, themedStyles.cellAmount]}>
-                            {formatAmount(rowStat?.meanAmount || 0)}
-                          </Text>
-                        </View>
-                        <CellTooltip
-                          visible={isMeanHovered}
-                          content={meanTooltipContent}
-                          style={{ bottom: '100%', right: 0, marginBottom: 8 }}
-                        />
-                      </TouchableOpacity>
-                    </Hoverable>
-                  </View>
-                );
-              })}
-              
-              {/* 虚拟滚动下方占位空间 */}
-              {enableVirtualization && virtualScrollData.offsetBottom > 0 && (
-                <View style={{ height: virtualScrollData.offsetBottom }} />
-              )}
-            </ScrollView>
-
-            {/* 由于 column stats 和 row stats 互斥，这里不需要底部占位 */}
-          </Animated.View>
-        )}
-      </View>
-    </View>
-  );
-}
-
-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 由动态样式设置
-  },
-});