@beppla/tapas-ui 1.5.9 → 1.5.11

package/package/module/StatisticCard/README.md

@@ -0,0 +1,129 @@
+# StatisticCard
+
+统计卡片组件，用于展示关键指标和数据，支持趋势指示、前缀/后缀、图标等功能。适用于仪表板、数据大屏和统计报表。
+
+## 功能特性
+
+- ✅ 数值展示，支持前缀（如 $）和后缀（如 %）
+- ✅ 趋势指示器：正向增长绿色（#00B894）、负向下降红色（#D63031）
+- ✅ 趋势百分比自动格式化（1 位小数，带 +/- 符号）
+- ✅ 支持自定义图标（React 节点，显示在右上角）
+- ✅ 支持描述文本
+- ✅ 加载状态（loading），显示 "Loading..." 替代数值
+- ✅ 可点击交互：有 onPress 时自动切换为 TouchableOpacity
+- ✅ 自定义数值颜色
+- ✅ 基于 Card 组件封装，最小高度 120px
+
+## 安装使用
+
+```tsx
+import { StatisticCard } from '@beppla/tapas-ui/components/StatisticCard';
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| title | `string` | (必填) | 指标标题 |
+| value | `string \| number` | (必填) | 指标数值 |
+| prefix | `string` | `''` | 数值前缀（如 $、EUR） |
+| suffix | `string` | `''` | 数值后缀（如 %、单） |
+| trend | `{ value: number; isPositive?: boolean }` | - | 趋势数据 |
+| description | `string` | - | 描述文本 |
+| icon | `React.ReactNode` | - | 右上角图标（任意 React 节点） |
+| color | `string` | `'#FF6B00'` | 数值颜色 |
+| onPress | `() => void` | - | 点击回调 |
+| loading | `boolean` | `false` | 是否加载中 |
+| style | `any` | - | 自定义样式 |
+
+## 使用示例
+
+### 基础用法
+
+```tsx
+<StatisticCard title="Total Sales" value="1,234" />
+```
+
+### 带前缀和后缀
+
+```tsx
+<StatisticCard title="Revenue" value="12,345" prefix="$" />
+<StatisticCard title="Growth Rate" value="15.8" suffix="%" />
+```
+
+### 带趋势指示
+
+```tsx
+<StatisticCard
+  title="Monthly Revenue"
+  value="45,678"
+  prefix="$"
+  trend={{ value: 12.5, isPositive: true }}
+  description="Compared to last month"
+/>
+
+<StatisticCard
+  title="Error Rate"
+  value="2.3"
+  suffix="%"
+  trend={{ value: 5.2, isPositive: false }}
+  description="Compared to last week"
+  color="#D63031"
+/>
+```
+
+### 带图标
+
+```tsx
+import TapasIcon from '@beppla/tapas-ui/components/Icons/TapasIcon';
+
+<StatisticCard
+  title="Total Orders"
+  value="8,456"
+  icon={<TapasIcon name="shopping_cart" size={24} color="#FF6B00" />}
+  trend={{ value: 8.3, isPositive: true }}
+/>
+```
+
+### 仪表板组合
+
+```tsx
+<View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 16 }}>
+  <StatisticCard
+    title="Total Revenue"
+    value="123,456"
+    prefix="$"
+    trend={{ value: 15.3, isPositive: true }}
+    description="Last 30 days"
+    color="#FF6B00"
+  />
+  <StatisticCard
+    title="New Users"
+    value="1,234"
+    trend={{ value: 8.2, isPositive: true }}
+    color="#0066CC"
+  />
+  <StatisticCard
+    title="Conversion Rate"
+    value="3.45"
+    suffix="%"
+    trend={{ value: 2.1, isPositive: false }}
+    color="#00B894"
+  />
+</View>
+```
+
+### 加载中
+
+```tsx
+<StatisticCard title="Loading Data" value="0" loading />
+```
+
+## 注意事项
+
+- `title` 和 `value` 为必填属性
+- `trend.isPositive` 默认为 `true`（不传或传 `undefined` 时视为正向）
+- 趋势值显示精度为小数点后 1 位（`toFixed(1)`）
+- 加载状态显示 "Loading..." 文本，不渲染数值和趋势
+- 有 `onPress` 时容器变为 TouchableOpacity（activeOpacity=0.7），无 `onPress` 时为 View
+- 默认数值颜色为橙色（#FF6B00），可通过 `color` 自定义

package/package/module/StatisticCard/StatisticCard.js

@@ -0,0 +1,125 @@
+"use strict";
+
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import Text from '../Text/Text';
+import Card from '../Card/Card';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const StatisticCardComponent = ({
+  title,
+  value,
+  prefix = '',
+  suffix = '',
+  trend,
+  description,
+  icon,
+  color = '#FF6B00',
+  onPress,
+  loading = false,
+  style,
+  testID
+}) => {
+  const Container = onPress ? TouchableOpacity : View;
+  const getTrendColor = () => {
+    if (!trend) return undefined;
+    return trend.isPositive !== false ? '#00B894' : '#D63031';
+  };
+  const getTrendSymbol = () => {
+    if (!trend) return '';
+    return trend.isPositive !== false ? '+' : '';
+  };
+  return /*#__PURE__*/_jsx(Container, {
+    testID: testID,
+    onPress: onPress,
+    disabled: !onPress,
+    activeOpacity: 0.7,
+    children: /*#__PURE__*/_jsxs(Card, {
+      cardId: "statistic-card",
+      style: [styles.container, style],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.header,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.title,
+          children: title
+        }), icon && /*#__PURE__*/_jsx(View, {
+          style: styles.iconContainer,
+          children: icon
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.content,
+        children: loading ? /*#__PURE__*/_jsx(Text, {
+          style: styles.loading,
+          children: "Loading..."
+        }) : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsxs(Text, {
+            style: [styles.value, {
+              color
+            }],
+            children: [prefix, value, suffix]
+          }), trend && /*#__PURE__*/_jsx(View, {
+            style: styles.trendContainer,
+            children: /*#__PURE__*/_jsxs(Text, {
+              style: [styles.trend, {
+                color: getTrendColor()
+              }],
+              children: [getTrendSymbol(), trend.value.toFixed(1), "%"]
+            })
+          }), description && /*#__PURE__*/_jsx(Text, {
+            style: styles.description,
+            children: description
+          })]
+        })
+      })]
+    })
+  });
+};
+export const StatisticCard = /*#__PURE__*/React.memo(StatisticCardComponent);
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    minHeight: 120
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 12
+  },
+  title: {
+    fontSize: 14,
+    color: '#7F8C8D',
+    fontWeight: '500'
+  },
+  iconContainer: {
+    width: 32,
+    height: 32,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  content: {
+    flex: 1
+  },
+  value: {
+    fontSize: 32,
+    fontWeight: 'bold',
+    marginBottom: 4
+  },
+  loading: {
+    fontSize: 16,
+    color: '#999'
+  },
+  trendContainer: {
+    marginTop: 4,
+    marginBottom: 8
+  },
+  trend: {
+    fontSize: 14,
+    fontWeight: '600'
+  },
+  description: {
+    fontSize: 12,
+    color: '#95A5A6',
+    marginTop: 4
+  }
+});
+//# sourceMappingURL=StatisticCard.js.map

package/package/module/StatisticCard/StatisticCard.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","StyleSheet","TouchableOpacity","Text","Card","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","StatisticCardComponent","title","value","prefix","suffix","trend","description","icon","color","onPress","loading","style","testID","Container","getTrendColor","undefined","isPositive","getTrendSymbol","disabled","activeOpacity","children","cardId","styles","container","header","iconContainer","content","trendContainer","toFixed","StatisticCard","memo","create","padding","minHeight","flexDirection","justifyContent","alignItems","marginBottom","fontSize","fontWeight","width","height","flex","marginTop"],"sourceRoot":"../../../components","sources":["StatisticCard/StatisticCard.tsx"],"mappings":"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","ignoreList":[]}

package/package/module/StatisticsTable/PLACEHOLDER_FEATURE.md

@@ -0,0 +1,287 @@
+# StatisticsTable 占位功能说明
+
+## 概述
+
+为 StatisticsTable 组件添加了占位行和列的功能，当数据不足以撑满外层容器时，会自动添加占位行和列来填充空间。
+
+## 新增属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `enablePlaceholder` | `boolean` | `false` | 是否启用占位功能 |
+| `minRows` | `number` | `0` | 最小行数（如果实际数据行数少于此值，会添加占位行） |
+| `minColumns` | `number` | `0` | 最小列数（如果实际数据列数少于此值，会添加占位列） |
+| `placeholderRowHeight` | `number` | `rowHeight` (56) | 占位行的高度 |
+| `placeholderColumnWidth` | `number \| number[]` | `150` | 占位列的宽度（可以是数字或数组为每列单独设置） |
+
+## 工作原理
+
+### 占位行
+- 当 `enablePlaceholder={true}` 且 `rows.length < minRows` 时
+- 会在实际数据行之后添加 `(minRows - rows.length)` 个占位行
+- 占位行的 key 格式为 `_placeholder_row_0`, `_placeholder_row_1` 等
+- 每个占位行使用 `placeholderRowHeight` 高度（未设置时使用 `rowHeight`，默认 56px）
+- 占位行内容为空，保持视觉整洁
+
+### 占位列
+- 当 `enablePlaceholder={true}` 且实际数据列数 `< minColumns` 时
+- 会在实际数据列之后添加 `(minColumns - currentDataColumns)` 个占位列
+- 占位列的 key 格式为 `_placeholder_col_0`, `_placeholder_col_1` 等
+- 每个占位列使用 `placeholderColumnWidth` 宽度（默认 150px）
+- 占位列内容为空，保持视觉整洁
+
+### 灵活性
+通过 `placeholderRowHeight` 和 `placeholderColumnWidth` 参数，可以精确控制占位元素的尺寸：
+- **小尺寸占位**：适用于需要更紧凑的表格布局
+- **大尺寸占位**：适用于需要更宽松的表格布局
+- **精确控制**：可以计算容器大小并设置精确的占位尺寸来完美填充
+
+### 与统计功能的兼容性
+- 占位行和列完全兼容 Row Stats 和 Column Stats 功能
+- 占位单元格会被正确识别并跳过内容渲染
+- 统计计算不会包含占位行列的数据
+
+## 使用示例
+
+### 基础用法
+
+```tsx
+<StatisticsTable
+  rows={rows}              // 假设只有 2 行数据
+  columns={columns}        // 假设只有 2 列数据
+  cells={cells}
+  enablePlaceholder={true}
+  minRows={10}            // 确保至少显示 10 行
+  minColumns={5}          // 确保至少显示 5 列
+  maxHeight={600}         // 设置容器高度
+/>
+```
+
+### 仅填充行
+
+```tsx
+<StatisticsTable
+  rows={rows}
+  columns={columns}
+  cells={cells}
+  enablePlaceholder={true}
+  minRows={10}
+  maxHeight={600}
+/>
+```
+
+### 仅填充列
+
+```tsx
+<StatisticsTable
+  rows={rows}
+  columns={columns}
+  cells={cells}
+  enablePlaceholder={true}
+  minColumns={5}
+/>
+```
+
+### 自定义占位尺寸
+
+**统一设置所有占位列宽度：**
+
+```tsx
+<StatisticsTable
+  rows={rows}
+  columns={columns}
+  cells={cells}
+  enablePlaceholder={true}
+  minRows={10}
+  minColumns={5}
+  placeholderRowHeight={80}      // 占位行高度 80px
+  placeholderColumnWidth={200}   // 所有占位列宽度 200px
+  maxHeight={600}
+/>
+```
+
+**为每个占位列单独设置宽度（更好地适配屏幕宽度）：**
+
+```tsx
+<StatisticsTable
+  rows={rows}              // 假设有 2 列数据
+  columns={columns}
+  cells={cells}
+  enablePlaceholder={true}
+  minColumns={5}           // 需要 3 个占位列
+  placeholderColumnWidth={[180, 250, 120]} // 为每个占位列单独设置宽度
+  // 占位列 1: 180px
+  // 占位列 2: 250px
+  // 占位列 3: 120px
+/>
+```
+
+如果数组长度少于所需的占位列数量，最后一个值会被重复使用：
+
+```tsx
+placeholderColumnWidth={[200, 150]}  // minColumns=5, 需要 3 个占位列
+// 结果: [200, 150, 150] - 最后的值 (150) 被重复使用
+```
+
+### 配合统计功能
+
+```tsx
+<StatisticsTable
+  rows={rows}
+  columns={columns}
+  cells={cells}
+  enablePlaceholder={true}
+  minRows={10}
+  minColumns={5}
+  placeholderRowHeight={70}
+  showRowStats={true}      // 可以同时使用行统计
+  maxHeight={600}
+/>
+```
+
+### 精确填充容器
+
+如果你知道容器的确切尺寸，可以计算需要的占位数量和尺寸：
+
+```tsx
+const containerHeight = 600;
+const headerHeight = 40;
+const columnStatsHeight = showColumnStats ? 120 : 0;
+const availableHeight = containerHeight - headerHeight - columnStatsHeight;
+
+const dataRowsCount = 3;
+const desiredTotalRows = Math.floor(availableHeight / 56);
+
+<StatisticsTable
+  rows={rows}              // 3 rows
+  columns={columns}
+  cells={cells}
+  enablePlaceholder={true}
+  minRows={desiredTotalRows}
+  placeholderRowHeight={56}
+  maxHeight={containerHeight}
+/>
+```
+
+## 使用场景
+
+1. **固定大小表格**：需要表格保持固定的视觉大小，不随数据量变化
+2. **数据加载中**：在数据还在加载但想保持布局稳定时
+3. **预留空间**：为可能增加的数据预留视觉空间
+4. **对齐要求**：多个表格需要保持相同的尺寸对齐
+
+## 实现细节
+
+### 内部实现
+
+组件内部通过 `useMemo` 生成 `displayRows` 和 `displayColumns`：
+
+```typescript
+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) => ({
+      key: `_placeholder_col_${i}`,
+      title: '',
+      width: 150, // 使用默认宽度
+    }));
+    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: rowHeight, // 使用默认行高
+    }));
+    finalRows = [...rows, ...placeholderRows];
+  }
+
+  return { displayRows: finalRows, displayColumns: finalColumns };
+}, [rows, columns, enablePlaceholder, minRows, minColumns, rowHeight]);
+```
+
+### 渲染处理
+
+在渲染时，组件会检测占位行列并跳过内容渲染：
+
+```typescript
+const isPlaceholder = row.key.startsWith('_placeholder_row_');
+const isColPlaceholder = column.key.startsWith('_placeholder_col_');
+
+// 占位单元格不渲染内容
+<View style={[styles.cell, { width: colWidth }]}>
+  {!isColPlaceholder && !isPlaceholder && renderCellContent(column, cell, row.data)}
+</View>
+```
+
+## 测试覆盖
+
+新增了以下测试用例：
+
+1. ✅ 禁用占位功能时不添加占位符
+2. ✅ 数据列少于 minColumns 时添加占位列
+3. ✅ 数据行少于 minRows 时添加占位行
+4. ✅ 同时添加占位行和列
+5. ✅ 数据满足最小要求时不添加占位符
+6. ✅ 与 Row Stats 配合使用
+7. ✅ 与 Column Stats 配合使用
+8. ✅ 使用自定义占位行高度
+9. ✅ 使用自定义占位列宽度
+10. ✅ 同时使用自定义占位行高度和列宽度
+
+## Storybook 示例
+
+### 占位功能示例
+
+添加了 6 个新的 Story 来展示占位功能：
+
+1. `WithPlaceholderRows` - 仅占位行
+2. `WithPlaceholderColumns` - 仅占位列
+3. `WithPlaceholderRowsAndColumns` - 同时占位行列
+4. `WithPlaceholderAndRowStats` - 占位行配合行统计
+5. `WithPlaceholderAndColumnStats` - 占位行配合列统计
+6. `WithCustomPlaceholderSize` - 自定义占位行列尺寸（80px行高 × 200px列宽）
+
+### 滚动阴影示例
+
+添加了 4 个新的 Story 来展示滚动阴影功能：
+
+1. `WithScrollShadow` - 展示滚动阴影效果（上下左右四个方向）
+2. `WithoutScrollShadow` - 对比：不使用滚动阴影（使用滚动条）
+3. `ScrollShadowWithRowStats` - 滚动阴影配合行统计
+4. `ScrollShadowWithColumnStats` - 滚动阴影配合列统计
+
+## 注意事项
+
+1. **性能考虑**：占位功能使用 `flex: 1`，不会增加额外的行列，性能影响极小
+2. **视觉一致性**：占位单元格没有边框，保持视觉上的整洁
+3. **数据完整性**：占位行列不会影响统计计算和数据导出
+4. **互不干扰**：占位功能与现有所有功能完全兼容（统计、分页、虚拟化等）
+
+## 更新日志
+
+- ✅ 在 `StatisticsTable.tsx` 中添加占位行列逻辑
+- ✅ 更新 `StatisticsTableProps` 接口，添加新属性
+  - `enablePlaceholder` - 启用占位功能
+  - `minRows` - 最小行数
+  - `minColumns` - 最小列数
+  - `placeholderRowHeight` - 自定义占位行高度
+  - `placeholderColumnWidth` - 自定义占位列宽度
+- ✅ 更新 README.md，添加功能说明和使用示例
+- ✅ 添加完整的测试用例（10个测试）
+- ✅ 添加 Storybook 示例（6个 Stories）
+- ✅ 添加滚动阴影 Storybook 示例（4个 Stories）
+- ✅ 所有代码通过 Linter 检查
+