@beppla/tapas-ui 1.2.36 → 1.4.0

package/components/StatisticsTable/StatisticsTable.tsx

@@ -1,7 +1,8 @@
-import React, { useMemo, useCallback, useState, useRef } from 'react';
-import { View, ScrollView, StyleSheet, Platform, TouchableOpacity, NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
-import Text from '../Text/Text';
+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 Pagination from '../Pagination/Pagination';
+import Hoverable from '../Hoverable/Hoverable';
 
 export type CellAlignment = 'left' | 'center' | 'right';
 export type CellDataType = 'text' | 'number' | 'currency' | 'custom';
@@ -9,12 +10,12 @@ export type CellDataType = 'text' | 'number' | 'currency' | 'custom';
 export interface StatisticsTableColumn {
   key: string;
   title: string;
-  width?: number; // 动态列宽
-  minWidth?: number; // 最小列宽
-  maxWidth?: number; // 最大列宽
+  width?: number;
+  minWidth?: number;
+  maxWidth?: number;
   align?: CellAlignment;
   dataType?: CellDataType;
-  isAction?: boolean; // 是否是 action 列
+  isAction?: boolean;
   render?: (cell: StatisticsTableCell, rowData: any) => React.ReactNode;
 }
 
@@ -23,7 +24,7 @@ export interface StatisticsTableCell {
   columnKey: string;
   quantity: number;
   amount: number;
-  data?: any; // 额外数据，用于 render 函数
+  data?: any;
 }
 
 export interface StatisticsTableAction {
@@ -32,18 +33,20 @@ export interface StatisticsTableAction {
   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[];
-  // 是否显示行统计（Sum/Mean 列）
   showRowStats?: boolean;
-  // 是否显示列统计（Sum/Mean 行）
   showColumnStats?: boolean;
-  // 分页配置
   pagination?: {
     current: number;
     pageSize: number;
@@ -55,27 +58,125 @@ export interface StatisticsTableProps {
   maxHeight?: number;
   rowLabelWidth?: number;
   style?: any;
-  // 格式化函数
   formatQuantity?: (quantity: number) => string;
   formatAmount?: (amount: number) => string;
-  // 虚拟滚动（性能优化）
   enableVirtualization?: boolean;
   virtualRowHeight?: number;
-  // 行点击事件
   onRowPress?: (rowKey: string, data?: any) => void;
-  // Action 列配置
   rowActions?: StatisticsTableAction[];
-  // 动态行高
-  rowHeight?: number; // 默认行高
-  getRowHeight?: (rowKey: string, rowData?: any) => number; // 自定义每行高度
-  // 动态列宽
-  getColumnWidth?: (columnKey: string, column: StatisticsTableColumn) => number; // 自定义列宽
-  // 滚动阴影效果
-  enableScrollShadow?: boolean; // 启用滚动阴影
-  scrollShadowColor?: string; // 阴影颜色
-  scrollShadowSize?: number; // 阴影大小
+  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;
+  // 统计列/行表头配置
+  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; // 动画持续时间（毫秒）
 }
 
+// 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,
@@ -98,22 +199,156 @@ 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,
 }: StatisticsTableProps) {
+  const { theme } = useTheme();
+  const colors = theme.colors as any;
+  
+  // 动画值
+  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,
+    isAtTop: true,
+    isAtBottom: false,
   });
   
-  const horizontalScrollRef = useRef<ScrollView>(null);
-  const verticalScrollRef = useRef<ScrollView>(null);
+  // 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.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(() => {
@@ -130,126 +365,158 @@ 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 列
+        .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 };
+      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) // 排除 action 列
+      .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;
-        const meanQuantity = sumQuantity / count;
-        const meanAmount = sumAmount / count;
-        return { sumQuantity, sumAmount, meanQuantity, meanAmount };
+        return { sumQuantity, sumAmount, meanQuantity: sumQuantity / count, meanAmount: sumAmount / count };
       });
   }, [rows, columns, matrix, showColumnStats]);
 
-  // 获取列宽
   const getColWidth = useCallback((column: StatisticsTableColumn) => {
-    if (getColumnWidth) {
-      return getColumnWidth(column.key, column);
-    }
+    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);
-    }
+    if (getRowHeight) return getRowHeight(row.key, row.data);
     return rowHeight;
   }, [rowHeight, getRowHeight]);
 
-  // 处理水平滚动
-  const handleHorizontalScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+  // 处理滚动
+  const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
     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: NativeSyntheticEvent<NativeScrollEvent>) => {
-    const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
-    const isAtStart = contentOffset.y <= 0;
-    const isAtEnd = contentOffset.y + layoutMeasurement.height >= contentSize.height - 1;
-    
-    setVerticalScrollState({ isAtStart, isAtEnd });
-  }, []);
+  // 同步 Row Stats 滚动
+  const handleBodyScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const { contentOffset } = event.nativeEvent;
+    rowStatsScrollRef.current?.scrollTo({ y: contentOffset.y, animated: false });
+    handleScroll(event);
+  }, [handleScroll]);
 
-  // 获取单元格对齐方式
-  const getCellAlignment = useCallback((column: StatisticsTableColumn, isHeader: boolean = 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: string, columnKey: string, isHovered: boolean) => {
+    if (isHovered) {
+      setHoveredCell({ rowKey, columnKey });
+    } else {
+      setHoveredCell(null);
     }
-    return 'left';
-  }, []);
+    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.render) return column.render(cell, rowData);
 
-    // Action 列
     if (column.isAction && rowActions) {
       return (
         <View style={styles.actionContainer}>
           {rowActions.map((action, index) => (
             <TouchableOpacity
               key={index}
-              style={styles.actionButton}
+              style={[styles.actionButton, { backgroundColor: colors.colorTextAccent }]}
               onPress={() => action.onPress(cell.rowKey, rowData)}
               activeOpacity={0.7}
             >
-              <Text style={styles.actionButtonText}>{action.label}</Text>
+              <Text style={[styles.actionButtonText, { color: colors.colorTextInvert }]}>{action.label}</Text>
             </TouchableOpacity>
           ))}
         </View>
       );
     }
 
-    // 默认渲染
-    const align = getCellAlignment(column);
     return (
-      <View style={[styles.cellContentContainer, { alignItems: align === 'left' ? 'flex-start' : align === 'right' ? 'flex-end' : 'center' }]}>
-        <Text style={[styles.cellQuantity, align === 'right' && styles.cellQuantityRight]}>
+      <View style={styles.cellContentContainer}>
+        <Text style={[styles.cellQuantity, themedStyles.cellQuantity]}>
           {formatQuantity(cell.quantity)}
         </Text>
-        <Text style={[styles.cellAmount, align === 'right' && styles.cellAmountRight]}>
+        <Text style={[styles.cellAmount, themedStyles.cellAmount]}>
           {formatAmount(cell.amount)}
         </Text>
       </View>
     );
-  }, [rowActions, getCellAlignment, formatQuantity, formatAmount]);
+  }, [rowActions, formatQuantity, formatAmount, colors, themedStyles]);
+
+  // 计算统计列宽度
+  const statsColumnsWidth = actualShowRowStats ? statsColumnWidth * 2 : 0;
 
   if (loading) {
     return (
-      <View style={[styles.container, style]}>
+      <View style={[styles.container, themedStyles.container, style]}>
         <View style={styles.loadingRow}>
           <Text>Loading...</Text>
         </View>
@@ -259,298 +526,368 @@ export function StatisticsTable({
 
   if (rows.length === 0 || columns.length === 0) {
     return (
-      <View style={[styles.container, style]}>
+      <View style={[styles.container, themedStyles.container, style]}>
         <View style={styles.emptyRow}>
-          <Text style={styles.emptyText}>{emptyText}</Text>
+          <Text style={[styles.emptyText, { color: colors.colorTextPlaceholder }]}>{emptyText}</Text>
         </View>
       </View>
     );
   }
 
-  // 虚拟滚动实现（简化版）
   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)' } as any,
+    rightShadow: { boxShadow: '-2px 0 6px 4px rgba(0, 0, 0, 0.08)' } as any,
+    topShadow: { boxShadow: '0 2px 6px 4px rgba(0, 0, 0, 0.08)' } as any,
+    bottomShadow: { boxShadow: '0 -2px 6px 4px rgba(0, 0, 0, 0.08)' } as any,
+  } : {};
+
+  // 隐藏滚动条的样式
+  const hideScrollbarStyle = Platform.OS === 'web' ? {
+    scrollbarWidth: 'none',
+    msOverflowStyle: 'none',
+  } as any : {};
+
+  const columnStatsHeight = actualShowColumnStats ? 120 : 0;
+  const storeCount = columns.filter(c => !c.isAction).length;
+
   return (
-    <View style={[styles.container, style]}>
+    <View style={[styles.container, themedStyles.container, style]}>
       {/* 左边阴影 */}
-      {enableScrollShadow && !horizontalScrollState.isAtStart && (
+      {enableScrollShadow && !scrollState.isAtStart && (
         <View style={[
+          styles.shadowBar,
           styles.shadowLeft,
-          {
-            width: scrollShadowSize,
-            backgroundColor: 'transparent',
-            shadowColor: scrollShadowColor,
-          }
+          Platform.OS === 'web' && webShadowStyle.leftShadow,
         ]} />
       )}
       
       {/* 右边阴影 */}
-      {enableScrollShadow && !horizontalScrollState.isAtEnd && (
+      {enableScrollShadow && !scrollState.isAtEnd && (
         <View style={[
+          styles.shadowBar,
           styles.shadowRight,
-          {
-            width: scrollShadowSize,
-            backgroundColor: 'transparent',
-            shadowColor: scrollShadowColor,
-          }
+          { right: actualShowRowStats ? statsColumnsWidth : 0 },
+          Platform.OS === 'web' && webShadowStyle.rightShadow,
         ]} />
       )}
 
-      <ScrollView
-        ref={horizontalScrollRef}
-        horizontal
-        showsHorizontalScrollIndicator={Platform.OS === 'web'}
-        onScroll={handleHorizontalScroll}
-        scrollEventThrottle={16}
-      >
-        <View>
-          {/* 顶部阴影 */}
-          {enableScrollShadow && !verticalScrollState.isAtStart && (
-            <View style={[
-              styles.shadowTop,
-              {
-                height: scrollShadowSize,
-                backgroundColor: 'transparent',
-                shadowColor: scrollShadowColor,
-              }
-            ]} />
-          )}
-
-          {/* Table Header */}
-          <View style={styles.header}>
-            <View style={[styles.headerCell, { width: rowLabelWidth }]}>
-              <Text style={styles.headerText}></Text>
-            </View>
-            {columns.map((column) => {
-              const align = getCellAlignment(column, true);
-              const colWidth = getColWidth(column);
-              return (
-                <View 
-                  key={column.key} 
-                  style={[
-                    styles.headerCell, 
-                    { 
-                      width: colWidth,
-                      minWidth: column.minWidth,
-                      maxWidth: column.maxWidth,
-                    },
-                    align === 'right' && styles.headerCellRight,
-                    align === 'left' && styles.headerCellLeft,
-                  ]}
-                >
-                  <Text style={[
-                    styles.headerText,
-                    align === 'right' && styles.headerTextRight,
-                    align === 'left' && styles.headerTextLeft,
-                  ]}>
-                    {column.title}
-                  </Text>
-                </View>
-              );
-            })}
-            {showRowStats && (
-              <>
-                <View style={[styles.headerCell, { width: 120 }]}>
-                  <Text style={styles.headerText}>Sum</Text>
-                </View>
-                <View style={[styles.headerCell, { width: 120 }]}>
-                  <Text style={styles.headerText}>Mean</Text>
-                </View>
-              </>
-            )}
-          </View>
+      {/* 顶部阴影 */}
+      {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,
+        ]} />
+      )}
 
-          {/* Table Body */}
+      <View style={styles.tableContainer}>
+        {/* 主表格区域 */}
+        <View style={{ flex: 1 }}>
           <ScrollView
-            ref={verticalScrollRef}
-            style={{ maxHeight }}
-            showsVerticalScrollIndicator={Platform.OS === 'web'}
-            removeClippedSubviews={enableVirtualization}
-            onScroll={handleVerticalScroll}
+            ref={scrollViewRef}
+            horizontal
+            showsHorizontalScrollIndicator={showScrollIndicator}
+            onScroll={handleScroll}
             scrollEventThrottle={16}
+            style={hideScrollbarStyle}
           >
-            {visibleRows.map((row, rowIndex) => {
-              const rowStat = rowStats?.[rowIndex];
-              const isClickable = !!onRowPress;
-              const currentRowHeight = getRowHeightValue(row);
-              
-              return (
-                <TouchableOpacity
-                  key={row.key}
-                  style={[styles.row, { minHeight: currentRowHeight }]}
-                  onPress={isClickable ? () => onRowPress(row.key, row.data) : undefined}
-                  activeOpacity={isClickable ? 0.7 : 1}
-                  disabled={!isClickable}
-                >
-                  <View style={[styles.cell, { width: rowLabelWidth, minHeight: currentRowHeight }]}>
-                    <Text style={styles.rowLabel}>{row.label}</Text>
-                  </View>
-                  {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 (
-                      <View 
-                        key={column.key} 
-                        style={[
-                          styles.cell, 
-                          { 
-                            width: colWidth,
-                            minWidth: column.minWidth,
-                            maxWidth: column.maxWidth,
-                            minHeight: currentRowHeight,
-                          },
-                          align === 'right' && styles.cellRight,
-                          align === 'left' && styles.cellLeft,
-                        ]}
-                      >
-                        {renderCellContent(column, cell, row.data)}
-                      </View>
-                    );
-                  })}
-                  {showRowStats && rowStat && (
-                    <>
-                      <View style={[styles.cell, styles.cellRight, { width: 120 }]}>
-                        <View style={styles.cellContentContainer}>
-                          <Text style={[styles.cellQuantity, styles.cellQuantityRight]}>
-                            {formatQuantity(rowStat.sumQuantity)}
-                          </Text>
-                          <Text style={[styles.cellAmount, styles.cellAmountRight]}>
-                            {formatAmount(rowStat.sumAmount)}
-                          </Text>
-                        </View>
-                      </View>
-                      <View style={[styles.cell, styles.cellRight, { width: 120 }]}>
-                        <View style={styles.cellContentContainer}>
-                          <Text style={[styles.cellQuantity, styles.cellQuantityRight]}>
-                            {formatQuantity(Math.round(rowStat.meanQuantity * 10) / 10)}
-                          </Text>
-                          <Text style={[styles.cellAmount, styles.cellAmountRight]}>
-                            {formatAmount(rowStat.meanAmount)}
-                          </Text>
-                        </View>
+            <View>
+              {/* 表头 */}
+              <View style={[styles.header, themedStyles.header]}>
+                <View style={[styles.headerCell, themedStyles.headerCell, { width: rowLabelWidth }]}>
+                  <Text style={[styles.headerText, themedStyles.headerText]}></Text>
+                </View>
+                {columns.map((column) => {
+                  const colWidth = getColWidth(column);
+                  return (
+                    <View 
+                      key={column.key} 
+                      style={[styles.headerCell, themedStyles.headerCell, { width: colWidth }]}
+                    >
+                      <Text style={[styles.headerText, themedStyles.headerText]}>
+                        {column.title}
+                      </Text>
+                    </View>
+                  );
+                })}
+              </View>
+
+              {/* 表体 */}
+              <ScrollView
+                ref={bodyScrollViewRef}
+                style={{ maxHeight: maxHeight - columnStatsHeight }}
+                showsVerticalScrollIndicator={showScrollIndicator}
+                onScroll={handleBodyScroll}
+                scrollEventThrottle={16}
+              >
+                {visibleRows.map((row) => {
+                  const currentRowHeight = getRowHeightValue(row);
+                  const isClickable = !!onRowPress;
+                  const isRowHovered = hoveredCell?.rowKey === row.key;
+                  
+                  return (
+                    <TouchableOpacity
+                      key={row.key}
+                      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}
+                    >
+                      <View style={[styles.cell, themedStyles.cell, { width: rowLabelWidth }]}>
+                        <Text style={[styles.rowLabel, themedStyles.rowLabel]}>{row.label}</Text>
                       </View>
-                    </>
-                  )}
-                </TouchableOpacity>
-              );
-            })}
-
-            {/* Column Statistics (Sum/Mean rows) */}
-            {showColumnStats && columnStats && (
-              <>
-                <View style={[styles.row, styles.statsRow]}>
-                  <View style={[styles.cell, { width: rowLabelWidth }]}>
-                    <Text style={styles.statsLabel}>Sum</Text>
+                      {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 as StatisticsTableCell, column) : null;
+                        
+                        return (
+                          <Hoverable
+                            key={column.key}
+                            onHoverIn={() => handleCellHover(row.key, column.key, true)}
+                            onHoverOut={() => handleCellHover(row.key, column.key, false)}
+                          >
+                            <View style={[
+                              styles.cell, 
+                              themedStyles.cell, 
+                              { width: colWidth },
+                              isHovered && themedStyles.cellHovered,
+                            ]}>
+                              {renderCellContent(column, cell, row.data)}
+                              <CellTooltip
+                                visible={isHovered}
+                                content={tooltipContent}
+                                style={{ bottom: '100%', left: 0, marginBottom: 8 }}
+                              />
+                            </View>
+                          </Hoverable>
+                        );
+                      })}
+                    </TouchableOpacity>
+                  );
+                })}
+              </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>
+                    {columns.map((column) => {
+                      const colWidth = getColWidth(column);
+                      if (column.isAction) {
+                        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;
+                      
+                      return (
+                        <Hoverable
+                          key={column.key}
+                          onHoverIn={() => handleCellHover('__column_sum__', column.key, true)}
+                          onHoverOut={() => handleCellHover('__column_sum__', column.key, false)}
+                        >
+                          <View style={[
+                            styles.cell, 
+                            themedStyles.cell, 
+                            { width: colWidth },
+                            isHovered && themedStyles.cellHovered,
+                          ]}>
+                            <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 }}
+                            />
+                          </View>
+                        </Hoverable>
+                      );
+                    })}
                   </View>
-                  {columns.map((column) => {
-                    const colWidth = getColWidth(column);
-                    if (column.isAction) {
-                      return <View key={column.key} style={[styles.cell, { width: colWidth, minWidth: column.minWidth, maxWidth: column.maxWidth }]} />;
-                    }
-                    const stat = columnStats[columns.filter(c => !c.isAction).indexOf(column)];
-                    const align = getCellAlignment(column);
-                    
-                    return (
-                      <View 
-                        key={column.key} 
-                        style={[
-                          styles.cell, 
-                          { 
-                            width: colWidth,
-                            minWidth: column.minWidth,
-                            maxWidth: column.maxWidth,
-                          },
-                          align === 'right' && styles.cellRight,
-                          align === 'left' && styles.cellLeft,
-                        ]}
-                      >
-                        <View style={styles.cellContentContainer}>
-                          <Text style={[styles.cellQuantity, align === 'right' && styles.cellQuantityRight]}>
-                            {formatQuantity(stat?.sumQuantity || 0)}
-                          </Text>
-                          <Text style={[styles.cellAmount, align === 'right' && styles.cellAmountRight]}>
-                            {formatAmount(stat?.sumAmount || 0)}
-                          </Text>
-                        </View>
-                      </View>
-                    );
-                  })}
-                  {showRowStats && (
-                    <>
-                      <View style={[styles.cell, { width: 120 }]} />
-                      <View style={[styles.cell, { width: 120 }]} />
-                    </>
-                  )}
-                </View>
-                <View style={[styles.row, styles.statsRow]}>
-                  <View style={[styles.cell, { width: rowLabelWidth }]}>
-                    <Text style={styles.statsLabel}>Mean</Text>
+                  {/* 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>
+                    {columns.map((column) => {
+                      const colWidth = getColWidth(column);
+                      if (column.isAction) {
+                        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;
+                      
+                      return (
+                        <Hoverable
+                          key={column.key}
+                          onHoverIn={() => handleCellHover('__column_mean__', column.key, true)}
+                          onHoverOut={() => handleCellHover('__column_mean__', column.key, false)}
+                        >
+                          <View style={[
+                            styles.cell, 
+                            themedStyles.cell, 
+                            { width: colWidth },
+                            isHovered && themedStyles.cellHovered,
+                          ]}>
+                            <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 }}
+                            />
+                          </View>
+                        </Hoverable>
+                      );
+                    })}
                   </View>
-                  {columns.map((column) => {
-                    const colWidth = getColWidth(column);
-                    if (column.isAction) {
-                      return <View key={column.key} style={[styles.cell, { width: colWidth, minWidth: column.minWidth, maxWidth: column.maxWidth }]} />;
-                    }
-                    const stat = columnStats[columns.filter(c => !c.isAction).indexOf(column)];
-                    const align = getCellAlignment(column);
-                    
-                    return (
-                      <View 
-                        key={column.key} 
-                        style={[
-                          styles.cell, 
-                          { 
-                            width: colWidth,
-                            minWidth: column.minWidth,
-                            maxWidth: column.maxWidth,
-                          },
-                          align === 'right' && styles.cellRight,
-                          align === 'left' && styles.cellLeft,
-                        ]}
-                      >
+                </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 any,
+            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}
+            >
+              {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 (
+                  <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)}
+                    >
+                      <View style={[styles.cell, themedStyles.cell, { width: statsColumnWidth }]}>
                         <View style={styles.cellContentContainer}>
-                          <Text style={[styles.cellQuantity, align === 'right' && styles.cellQuantityRight]}>
-                            {formatQuantity(Math.round((stat?.meanQuantity || 0) * 10) / 10)}
+                          <Text style={[styles.cellQuantity, themedStyles.cellQuantity]}>
+                            {formatQuantity(rowStat?.sumQuantity || 0)}
                           </Text>
-                          <Text style={[styles.cellAmount, align === 'right' && styles.cellAmountRight]}>
-                            {formatAmount(stat?.meanAmount || 0)}
+                          <Text style={[styles.cellAmount, themedStyles.cellAmount]}>
+                            {formatAmount(rowStat?.sumAmount || 0)}
                           </Text>
                         </View>
+                        <CellTooltip
+                          visible={isSumHovered}
+                          content={sumTooltipContent}
+                          style={{ bottom: '100%', right: 0, marginBottom: 8 }}
+                        />
                       </View>
-                    );
-                  })}
-                  {showRowStats && (
-                    <>
-                      <View style={[styles.cell, { width: 120 }]} />
-                      <View style={[styles.cell, { width: 120 }]} />
-                    </>
-                  )}
-                </View>
-              </>
-            )}
-          </ScrollView>
+                    </Hoverable>
+                    <View style={[styles.cell, themedStyles.cell, { width: statsColumnWidth }]}>
+                      <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>
+                    </View>
+                  </View>
+                );
+              })}
+            </ScrollView>
 
-          {/* 底部阴影 */}
-          {enableScrollShadow && !verticalScrollState.isAtEnd && (
-            <View style={[
-              styles.shadowBottom,
-              {
-                height: scrollShadowSize,
-                backgroundColor: 'transparent',
-                shadowColor: scrollShadowColor,
-              }
-            ]} />
-          )}
-        </View>
-      </ScrollView>
+            {/* 由于 column stats 和 row stats 互斥，这里不需要底部占位 */}
+          </Animated.View>
+        )}
+      </View>
 
       {/* Pagination */}
       {pagination !== false && pagination && (
-        <View style={styles.paginationContainer}>
+        <View style={[styles.paginationContainer, themedStyles.paginationContainer]}>
           <Pagination
             totalCount={`${pagination.total} items`}
             pageParams={{
@@ -571,93 +908,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',
   },
   cell: {
-    padding: 12,
+    paddingVertical: 16,
+    paddingHorizontal: 12,
     justifyContent: 'center',
     alignItems: 'center',
-    borderRightWidth: 1,
-    borderRightColor: '#F0F0F0',
-  },
-  cellLeft: {
-    alignItems: 'flex-start',
-  },
-  cellRight: {
-    alignItems: 'flex-end',
   },
   cellContentContainer: {
     width: '100%',
+    alignItems: 'center',
   },
   rowLabel: {
     fontSize: 14,
     fontWeight: '500',
-    color: '#2C3E50',
   },
   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',
   },
   actionContainer: {
     flexDirection: 'row',
@@ -667,13 +969,11 @@ const styles = StyleSheet.create({
   actionButton: {
     paddingHorizontal: 12,
     paddingVertical: 6,
-    backgroundColor: '#FF6B00',
     borderRadius: 4,
   },
   actionButtonText: {
     fontSize: 12,
     fontWeight: '600',
-    color: '#FFFFFF',
   },
   loadingRow: {
     padding: 40,
@@ -687,57 +987,48 @@ const styles = StyleSheet.create({
   },
   emptyText: {
     fontSize: 14,
-    color: '#999',
   },
   paginationContainer: {
     padding: 16,
     borderTopWidth: 1,
-    borderTopColor: '#E0E0E0',
-    backgroundColor: '#FAFAFA',
   },
-  // 滚动阴影
-  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,
   },
   shadowRight: {
-    position: 'absolute',
-    right: 0,
     top: 0,
     bottom: 0,
-    zIndex: 10,
-    shadowOffset: { width: -2, height: 0 },
-    shadowOpacity: 0.15,
-    shadowRadius: 4,
-    elevation: 4,
   },
-  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 由动态样式设置
   },
 });