@beppla/tapas-ui 1.5.13 → 1.5.15

package/package/module/DataTable/DataTable.js

@@ -0,0 +1,199 @@
+"use strict";
+
+import React, { useState, useMemo } from 'react';
+import { View, ScrollView, StyleSheet, TouchableOpacity, Platform } from 'react-native';
+import Text from '../Text/Text';
+import Pagination from '../Pagination/Pagination';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function DataTable({
+  columns,
+  dataSource,
+  rowKey = 'id',
+  loading = false,
+  pagination,
+  onRow,
+  emptyText = 'No data',
+  style,
+  headerStyle,
+  rowStyle,
+  maxHeight
+}) {
+  const [sortKey, setSortKey] = useState(null);
+  const [sortOrder, setSortOrder] = useState('asc');
+  const handleSort = columnKey => {
+    if (sortKey === columnKey) {
+      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortKey(columnKey);
+      setSortOrder('asc');
+    }
+  };
+  const sortedData = useMemo(() => {
+    if (!sortKey) return dataSource;
+    return [...dataSource].sort((a, b) => {
+      const column = columns.find(col => col.key === sortKey);
+      if (!column) return 0;
+      const dataIndex = column.dataIndex || column.key;
+      const aValue = a[dataIndex];
+      const bValue = b[dataIndex];
+      if (aValue === bValue) return 0;
+      const comparison = aValue > bValue ? 1 : -1;
+      return sortOrder === 'asc' ? comparison : -comparison;
+    });
+  }, [dataSource, sortKey, sortOrder, columns]);
+  const getRowKey = (record, index) => {
+    if (typeof rowKey === 'function') {
+      return rowKey(record);
+    }
+    return record[rowKey] || index;
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, style],
+    children: [/*#__PURE__*/_jsx(ScrollView, {
+      horizontal: true,
+      showsHorizontalScrollIndicator: Platform.OS === 'web',
+      style: maxHeight ? {
+        maxHeight
+      } : undefined,
+      children: /*#__PURE__*/_jsxs(View, {
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.header, headerStyle],
+          children: columns.map(column => /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: [styles.headerCell, {
+              width: column.width || 150
+            }, column.align && {
+              alignItems: column.align === 'left' ? 'flex-start' : column.align === 'right' ? 'flex-end' : 'center'
+            }],
+            onPress: () => column.sortable && handleSort(column.key),
+            disabled: !column.sortable,
+            children: /*#__PURE__*/_jsxs(Text, {
+              style: styles.headerText,
+              children: [column.title, column.sortable && sortKey === column.key && /*#__PURE__*/_jsx(Text, {
+                style: styles.sortIndicator,
+                children: sortOrder === 'asc' ? ' ↑' : ' ↓'
+              })]
+            })
+          }, column.key))
+        }), /*#__PURE__*/_jsx(ScrollView, {
+          style: maxHeight ? {
+            maxHeight: maxHeight - 50
+          } : undefined,
+          showsVerticalScrollIndicator: Platform.OS === 'web',
+          children: loading ? /*#__PURE__*/_jsx(View, {
+            style: styles.loadingRow,
+            children: /*#__PURE__*/_jsx(Text, {
+              children: "Loading..."
+            })
+          }) : sortedData.length === 0 ? /*#__PURE__*/_jsx(View, {
+            style: styles.emptyRow,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.emptyText,
+              children: emptyText
+            })
+          }) : sortedData.map((record, index) => {
+            const rowProps = onRow ? onRow(record, index) : {};
+            const key = getRowKey(record, index);
+            return /*#__PURE__*/_jsx(TouchableOpacity, {
+              style: [styles.row, rowStyle],
+              ...rowProps,
+              disabled: !rowProps.onPress,
+              children: columns.map(column => {
+                const dataIndex = column.dataIndex || column.key;
+                const text = record[dataIndex];
+                return /*#__PURE__*/_jsx(View, {
+                  style: [styles.cell, {
+                    width: column.width || 150
+                  }, column.align && {
+                    alignItems: column.align === 'left' ? 'flex-start' : column.align === 'right' ? 'flex-end' : 'center'
+                  }],
+                  children: column.render ? column.render(text, record, index) : /*#__PURE__*/_jsx(Text, {
+                    style: styles.cellText,
+                    children: text != null ? String(text) : '-'
+                  })
+                }, column.key);
+              })
+            }, key);
+          })
+        })]
+      })
+    }), pagination !== false && pagination && /*#__PURE__*/_jsx(View, {
+      style: styles.paginationContainer,
+      children: /*#__PURE__*/_jsx(Pagination, {
+        totalCount: `${pagination.total} items`,
+        pageParams: {
+          page: pagination.current,
+          pageSize: pagination.pageSize,
+          totalItems: pagination.total,
+          totalPage: Math.ceil(pagination.total / pagination.pageSize)
+        },
+        onPageChange: params => {
+          pagination.onChange?.(params.page, params.pageSize);
+        }
+      })
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 8,
+    overflow: 'hidden'
+  },
+  header: {
+    flexDirection: 'row',
+    backgroundColor: '#F5F5F5',
+    borderBottomWidth: 2,
+    borderBottomColor: '#E0E0E0'
+  },
+  headerCell: {
+    padding: 12,
+    borderRightWidth: 1,
+    borderRightColor: '#E0E0E0'
+  },
+  headerText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#2C3E50'
+  },
+  sortIndicator: {
+    color: '#FF6B00',
+    fontSize: 12
+  },
+  row: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: '#F0F0F0',
+    backgroundColor: '#FFFFFF'
+  },
+  cell: {
+    padding: 12,
+    justifyContent: 'center',
+    borderRightWidth: 1,
+    borderRightColor: '#F0F0F0'
+  },
+  cellText: {
+    fontSize: 14,
+    color: '#2C3E50'
+  },
+  loadingRow: {
+    padding: 40,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  emptyRow: {
+    padding: 40,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  emptyText: {
+    fontSize: 14,
+    color: '#999'
+  },
+  paginationContainer: {
+    padding: 16,
+    borderTopWidth: 1,
+    borderTopColor: '#E0E0E0',
+    backgroundColor: '#FAFAFA'
+  }
+});
+//# sourceMappingURL=DataTable.js.map

package/package/module/DataTable/DataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","useMemo","View","ScrollView","StyleSheet","TouchableOpacity","Platform","Text","Pagination","jsx","_jsx","jsxs","_jsxs","DataTable","columns","dataSource","rowKey","loading","pagination","onRow","emptyText","style","headerStyle","rowStyle","maxHeight","sortKey","setSortKey","sortOrder","setSortOrder","handleSort","columnKey","sortedData","sort","a","b","column","find","col","key","dataIndex","aValue","bValue","comparison","getRowKey","record","index","styles","container","children","horizontal","showsHorizontalScrollIndicator","OS","undefined","header","map","headerCell","width","align","alignItems","onPress","sortable","disabled","headerText","title","sortIndicator","showsVerticalScrollIndicator","loadingRow","length","emptyRow","rowProps","row","text","cell","render","cellText","String","paginationContainer","totalCount","total","pageParams","page","current","pageSize","totalItems","totalPage","Math","ceil","onPageChange","params","onChange","create","backgroundColor","borderRadius","overflow","flexDirection","borderBottomWidth","borderBottomColor","padding","borderRightWidth","borderRightColor","fontSize","fontWeight","color","justifyContent","borderTopWidth","borderTopColor"],"sourceRoot":"../../../components","sources":["DataTable/DataTable.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,OAAO,QAAQ,OAAO;AAChD,SAASC,IAAI,EAAEC,UAAU,EAAEC,UAAU,EAAEC,gBAAgB,EAAEC,QAAQ,QAAQ,cAAc;AACvF,OAAOC,IAAI,MAAM,cAAc;AAC/B,OAAOC,UAAU,MAAM,0BAA0B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAkClD,OAAO,SAASC,SAASA,CAAU;EACjCC,OAAO;EACPC,UAAU;EACVC,MAAM,GAAG,IAAI;EACbC,OAAO,GAAG,KAAK;EACfC,UAAU;EACVC,KAAK;EACLC,SAAS,GAAG,SAAS;EACrBC,KAAK;EACLC,WAAW;EACXC,QAAQ;EACRC;AACiB,CAAC,EAAE;EACpB,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAG1B,QAAQ,CAAgB,IAAI,CAAC;EAC3D,MAAM,CAAC2B,SAAS,EAAEC,YAAY,CAAC,GAAG5B,QAAQ,CAAiB,KAAK,CAAC;EAEjE,MAAM6B,UAAU,GAAIC,SAAiB,IAAK;IACxC,IAAIL,OAAO,KAAKK,SAAS,EAAE;MACzBF,YAAY,CAACD,SAAS,KAAK,KAAK,GAAG,MAAM,GAAG,KAAK,CAAC;IACpD,CAAC,MAAM;MACLD,UAAU,CAACI,SAAS,CAAC;MACrBF,YAAY,CAAC,KAAK,CAAC;IACrB;EACF,CAAC;EAED,MAAMG,UAAU,GAAG9B,OAAO,CAAC,MAAM;IAC/B,IAAI,CAACwB,OAAO,EAAE,OAAOV,UAAU;IAE/B,OAAO,CAAC,GAAGA,UAAU,CAAC,CAACiB,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAK;MACpC,MAAMC,MAAM,GAAGrB,OAAO,CAACsB,IAAI,CAACC,GAAG,IAAIA,GAAG,CAACC,GAAG,KAAKb,OAAO,CAAC;MACvD,IAAI,CAACU,MAAM,EAAE,OAAO,CAAC;MAErB,MAAMI,SAAS,GAAGJ,MAAM,CAACI,SAAS,IAAIJ,MAAM,CAACG,GAAG;MAChD,MAAME,MAAM,GAAIP,CAAC,CAA6BM,SAAS,CAAC;MACxD,MAAME,MAAM,GAAIP,CAAC,CAA6BK,SAAS,CAAC;MAExD,IAAIC,MAAM,KAAKC,MAAM,EAAE,OAAO,CAAC;MAE/B,MAAMC,UAAU,GAAIF,MAAM,GAAwBC,MAA0B,GAAG,CAAC,GAAG,CAAC,CAAC;MACrF,OAAOd,SAAS,KAAK,KAAK,GAAGe,UAAU,GAAG,CAACA,UAAU;IACvD,CAAC,CAAC;EACJ,CAAC,EAAE,CAAC3B,UAAU,EAAEU,OAAO,EAAEE,SAAS,EAAEb,OAAO,CAAC,CAAC;EAE7C,MAAM6B,SAAS,GAAGA,CAACC,MAAS,EAAEC,KAAa,KAAsB;IAC/D,IAAI,OAAO7B,MAAM,KAAK,UAAU,EAAE;MAChC,OAAOA,MAAM,CAAC4B,MAAM,CAAC;IACvB;IACA,OAASA,MAAM,CAA6B5B,MAAM,CAAW,IAAwB6B,KAAK;EAC5F,CAAC;EAED,oBACEjC,KAAA,CAACV,IAAI;IAACmB,KAAK,EAAE,CAACyB,MAAM,CAACC,SAAS,EAAE1B,KAAK,CAAE;IAAA2B,QAAA,gBACrCtC,IAAA,CAACP,UAAU;MACT8C,UAAU;MACVC,8BAA8B,EAAE5C,QAAQ,CAAC6C,EAAE,KAAK,KAAM;MACtD9B,KAAK,EAAEG,SAAS,GAAG;QAAEA;MAAU,CAAC,GAAG4B,SAAU;MAAAJ,QAAA,eAE7CpC,KAAA,CAACV,IAAI;QAAA8C,QAAA,gBAEHtC,IAAA,CAACR,IAAI;UAACmB,KAAK,EAAE,CAACyB,MAAM,CAACO,MAAM,EAAE/B,WAAW,CAAE;UAAA0B,QAAA,EACvClC,OAAO,CAACwC,GAAG,CAAEnB,MAAM,iBAClBzB,IAAA,CAACL,gBAAgB;YAEfgB,KAAK,EAAE,CACLyB,MAAM,CAACS,UAAU,EACjB;cAAEC,KAAK,EAAErB,MAAM,CAACqB,KAAK,IAAI;YAAI,CAAC,EAC9BrB,MAAM,CAACsB,KAAK,IAAI;cACdC,UAAU,EAAEvB,MAAM,CAACsB,KAAK,KAAK,MAAM,GAAG,YAAY,GAAGtB,MAAM,CAACsB,KAAK,KAAK,OAAO,GAAG,UAAU,GAAG;YAC/F,CAAC,CACD;YACFE,OAAO,EAAEA,CAAA,KAAMxB,MAAM,CAACyB,QAAQ,IAAI/B,UAAU,CAACM,MAAM,CAACG,GAAG,CAAE;YACzDuB,QAAQ,EAAE,CAAC1B,MAAM,CAACyB,QAAS;YAAAZ,QAAA,eAE3BpC,KAAA,CAACL,IAAI;cAACc,KAAK,EAAEyB,MAAM,CAACgB,UAAW;cAAAd,QAAA,GAC5Bb,MAAM,CAAC4B,KAAK,EACZ5B,MAAM,CAACyB,QAAQ,IAAInC,OAAO,KAAKU,MAAM,CAACG,GAAG,iBACxC5B,IAAA,CAACH,IAAI;gBAACc,KAAK,EAAEyB,MAAM,CAACkB,aAAc;gBAAAhB,QAAA,EAC/BrB,SAAS,KAAK,KAAK,GAAG,IAAI,GAAG;cAAI,CAC9B,CACP;YAAA,CACG;UAAC,GAlBFQ,MAAM,CAACG,GAmBI,CACnB;QAAC,CACE,CAAC,eAGP5B,IAAA,CAACP,UAAU;UACTkB,KAAK,EAAEG,SAAS,GAAG;YAAEA,SAAS,EAAEA,SAAS,GAAG;UAAG,CAAC,GAAG4B,SAAU;UAC7Da,4BAA4B,EAAE3D,QAAQ,CAAC6C,EAAE,KAAK,KAAM;UAAAH,QAAA,EAEnD/B,OAAO,gBACNP,IAAA,CAACR,IAAI;YAACmB,KAAK,EAAEyB,MAAM,CAACoB,UAAW;YAAAlB,QAAA,eAC7BtC,IAAA,CAACH,IAAI;cAAAyC,QAAA,EAAC;YAAU,CAAM;UAAC,CACnB,CAAC,GACLjB,UAAU,CAACoC,MAAM,KAAK,CAAC,gBACzBzD,IAAA,CAACR,IAAI;YAACmB,KAAK,EAAEyB,MAAM,CAACsB,QAAS;YAAApB,QAAA,eAC3BtC,IAAA,CAACH,IAAI;cAACc,KAAK,EAAEyB,MAAM,CAAC1B,SAAU;cAAA4B,QAAA,EAAE5B;YAAS,CAAO;UAAC,CAC7C,CAAC,GAEPW,UAAU,CAACuB,GAAG,CAAC,CAACV,MAAM,EAAEC,KAAK,KAAK;YAChC,MAAMwB,QAAQ,GAAGlD,KAAK,GAAGA,KAAK,CAACyB,MAAM,EAAEC,KAAK,CAAC,GAAG,CAAC,CAAC;YAClD,MAAMP,GAAG,GAAGK,SAAS,CAACC,MAAM,EAAEC,KAAK,CAAC;YAEpC,oBACEnC,IAAA,CAACL,gBAAgB;cAEfgB,KAAK,EAAE,CAACyB,MAAM,CAACwB,GAAG,EAAE/C,QAAQ,CAAE;cAAA,GAC1B8C,QAAQ;cACZR,QAAQ,EAAE,CAACQ,QAAQ,CAACV,OAAQ;cAAAX,QAAA,EAE3BlC,OAAO,CAACwC,GAAG,CAAEnB,MAAM,IAAK;gBACvB,MAAMI,SAAS,GAAGJ,MAAM,CAACI,SAAS,IAAIJ,MAAM,CAACG,GAAG;gBAChD,MAAMiC,IAAI,GAAI3B,MAAM,CAA6BL,SAAS,CAAC;gBAE3D,oBACE7B,IAAA,CAACR,IAAI;kBAEHmB,KAAK,EAAE,CACLyB,MAAM,CAAC0B,IAAI,EACX;oBAAEhB,KAAK,EAAErB,MAAM,CAACqB,KAAK,IAAI;kBAAI,CAAC,EAC9BrB,MAAM,CAACsB,KAAK,IAAI;oBACdC,UAAU,EAAEvB,MAAM,CAACsB,KAAK,KAAK,MAAM,GAAG,YAAY,GAAGtB,MAAM,CAACsB,KAAK,KAAK,OAAO,GAAG,UAAU,GAAG;kBAC/F,CAAC,CACD;kBAAAT,QAAA,EAEDb,MAAM,CAACsC,MAAM,GACZtC,MAAM,CAACsC,MAAM,CAACF,IAAI,EAAE3B,MAAM,EAAEC,KAAK,CAAC,gBAElCnC,IAAA,CAACH,IAAI;oBAACc,KAAK,EAAEyB,MAAM,CAAC4B,QAAS;oBAAA1B,QAAA,EAAEuB,IAAI,IAAI,IAAI,GAAGI,MAAM,CAACJ,IAAI,CAAC,GAAG;kBAAG,CAAO;gBACxE,GAbIpC,MAAM,CAACG,GAcR,CAAC;cAEX,CAAC;YAAC,GA3BGA,GA4BW,CAAC;UAEvB,CAAC;QACF,CACS,CAAC;MAAA,CACT;IAAC,CACG,CAAC,EAGZpB,UAAU,KAAK,KAAK,IAAIA,UAAU,iBACjCR,IAAA,CAACR,IAAI;MAACmB,KAAK,EAAEyB,MAAM,CAAC8B,mBAAoB;MAAA5B,QAAA,eACtCtC,IAAA,CAACF,UAAU;QACTqE,UAAU,EAAE,GAAG3D,UAAU,CAAC4D,KAAK,QAAS;QACxCC,UAAU,EAAE;UACVC,IAAI,EAAE9D,UAAU,CAAC+D,OAAO;UACxBC,QAAQ,EAAEhE,UAAU,CAACgE,QAAQ;UAC7BC,UAAU,EAAEjE,UAAU,CAAC4D,KAAK;UAC5BM,SAAS,EAAEC,IAAI,CAACC,IAAI,CAACpE,UAAU,CAAC4D,KAAK,GAAG5D,UAAU,CAACgE,QAAQ;QAC7D,CAAE;QACFK,YAAY,EAAGC,MAAM,IAAK;UACxBtE,UAAU,CAACuE,QAAQ,GAAGD,MAAM,CAACR,IAAI,EAAEQ,MAAM,CAACN,QAAQ,CAAC;QACrD;MAAE,CACH;IAAC,CACE,CACP;EAAA,CACG,CAAC;AAEX;AAEA,MAAMpC,MAAM,GAAG1C,UAAU,CAACsF,MAAM,CAAC;EAC/B3C,SAAS,EAAE;IACT4C,eAAe,EAAE,SAAS;IAC1BC,YAAY,EAAE,CAAC;IACfC,QAAQ,EAAE;EACZ,CAAC;EACDxC,MAAM,EAAE;IACNyC,aAAa,EAAE,KAAK;IACpBH,eAAe,EAAE,SAAS;IAC1BI,iBAAiB,EAAE,CAAC;IACpBC,iBAAiB,EAAE;EACrB,CAAC;EACDzC,UAAU,EAAE;IACV0C,OAAO,EAAE,EAAE;IACXC,gBAAgB,EAAE,CAAC;IACnBC,gBAAgB,EAAE;EACpB,CAAC;EACDrC,UAAU,EAAE;IACVsC,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,KAAK;IACjBC,KAAK,EAAE;EACT,CAAC;EACDtC,aAAa,EAAE;IACbsC,KAAK,EAAE,SAAS;IAChBF,QAAQ,EAAE;EACZ,CAAC;EACD9B,GAAG,EAAE;IACHwB,aAAa,EAAE,KAAK;IACpBC,iBAAiB,EAAE,CAAC;IACpBC,iBAAiB,EAAE,SAAS;IAC5BL,eAAe,EAAE;EACnB,CAAC;EACDnB,IAAI,EAAE;IACJyB,OAAO,EAAE,EAAE;IACXM,cAAc,EAAE,QAAQ;IACxBL,gBAAgB,EAAE,CAAC;IACnBC,gBAAgB,EAAE;EACpB,CAAC;EACDzB,QAAQ,EAAE;IACR0B,QAAQ,EAAE,EAAE;IACZE,KAAK,EAAE;EACT,CAAC;EACDpC,UAAU,EAAE;IACV+B,OAAO,EAAE,EAAE;IACXM,cAAc,EAAE,QAAQ;IACxB7C,UAAU,EAAE;EACd,CAAC;EACDU,QAAQ,EAAE;IACR6B,OAAO,EAAE,EAAE;IACXM,cAAc,EAAE,QAAQ;IACxB7C,UAAU,EAAE;EACd,CAAC;EACDtC,SAAS,EAAE;IACTgF,QAAQ,EAAE,EAAE;IACZE,KAAK,EAAE;EACT,CAAC;EACD1B,mBAAmB,EAAE;IACnBqB,OAAO,EAAE,EAAE;IACXO,cAAc,EAAE,CAAC;IACjBC,cAAc,EAAE,SAAS;IACzBd,eAAe,EAAE;EACnB;AACF,CAAC,CAAC","ignoreList":[]}

package/package/module/DataTable/README.md

@@ -0,0 +1,159 @@
+# DataTable 数据表格组件
+
+简洁高效的数据表格组件，用于展示和管理结构化数据。支持列排序、分页、自定义单元格渲染和行点击事件，适合后台管理、报表展示等场景。
+
+## 功能特性
+
+- ✅ 声明式列定义（columns 配置）
+- ✅ 列排序功能（sortable），升序/降序切换
+- ✅ 内置分页组件集成（Pagination）
+- ✅ 自定义单元格渲染（column.render）
+- ✅ 行点击事件（onRow）
+- ✅ 列对齐配置（left / center / right）
+- ✅ 列宽自定义
+- ✅ 加载中和空数据状态
+- ✅ 水平滚动支持（ScrollView）
+- ✅ 最大高度限制（maxHeight）
+- ✅ 跨平台（Web + React Native）
+
+## 安装使用
+
+```tsx
+import { DataTable } from '@beppla/tapas-ui';
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| columns | `DataTableColumn<T>[]` | - | 列定义数组（必填） |
+| dataSource | `T[]` | - | 数据源（必填） |
+| rowKey | `string \| ((record: T) => string \| number)` | `'id'` | 行唯一标识字段或函数 |
+| loading | `boolean` | `false` | 是否显示加载状态 |
+| pagination | `PaginationConfig \| false` | - | 分页配置，false 禁用 |
+| onRow | `(record: T, index: number) => { onPress?: () => void }` | - | 行事件配置 |
+| emptyText | `string` | `'No data'` | 空数据提示文本 |
+| style | `any` | - | 容器样式 |
+| headerStyle | `any` | - | 表头行样式 |
+| rowStyle | `any` | - | 数据行样式 |
+| maxHeight | `number` | - | 表格最大高度 |
+
+### DataTableColumn
+
+```tsx
+interface DataTableColumn<T = any> {
+  key: string;           // 列唯一标识（必填）
+  title: string;         // 列标题（必填）
+  dataIndex?: string;    // 数据字段名（默认为 key）
+  width?: number;        // 列宽（默认 150）
+  align?: 'left' | 'center' | 'right';  // 对齐方式
+  sortable?: boolean;    // 是否可排序
+  render?: (text: any, record: T, index: number) => React.ReactNode;  // 自定义渲染
+  fixed?: 'left' | 'right';  // 固定列（预留）
+}
+```
+
+### PaginationConfig
+
+```tsx
+interface PaginationConfig {
+  current: number;       // 当前页码
+  pageSize: number;      // 每页条数
+  total: number;         // 总数
+  onChange?: (page: number, pageSize: number) => void;  // 页码变化回调
+}
+```
+
+## 使用示例
+
+### 基础用法
+
+```tsx
+const columns = [
+  { key: 'name', title: 'Name', width: 200, sortable: true },
+  { key: 'age', title: 'Age', width: 100, align: 'center' as const },
+  { key: 'email', title: 'Email', width: 250 },
+];
+
+const dataSource = [
+  { id: 1, name: 'Alice', age: 28, email: 'alice@example.com' },
+  { id: 2, name: 'Bob', age: 32, email: 'bob@example.com' },
+];
+
+<DataTable columns={columns} dataSource={dataSource} />
+```
+
+### 自定义渲染 + 排序
+
+```tsx
+const columns = [
+  { key: 'name', title: 'Name', width: 200, sortable: true },
+  {
+    key: 'status',
+    title: 'Status',
+    width: 120,
+    render: (text: string) => (
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+        <View style={{
+          width: 8, height: 8, borderRadius: 4,
+          backgroundColor: text === 'active' ? '#57B07B' : '#B81F1E',
+          marginRight: 8,
+        }} />
+        <Text>{text}</Text>
+      </View>
+    ),
+  },
+];
+
+<DataTable columns={columns} dataSource={data} />
+```
+
+### 分页
+
+```tsx
+<DataTable
+  columns={columns}
+  dataSource={pageData}
+  pagination={{
+    current: page,
+    pageSize: 10,
+    total: 100,
+    onChange: (newPage, newPageSize) => {
+      setPage(newPage);
+      fetchData(newPage, newPageSize);
+    },
+  }}
+/>
+```
+
+### 行点击
+
+```tsx
+<DataTable
+  columns={columns}
+  dataSource={data}
+  onRow={(record) => ({
+    onPress: () => navigation.navigate('Detail', { id: record.id }),
+  })}
+/>
+```
+
+### 限制高度
+
+```tsx
+<DataTable
+  columns={columns}
+  dataSource={longList}
+  maxHeight={400}
+/>
+```
+
+## 注意事项
+
+- 排序为前端排序（内存排序），大数据量建议后端排序
+- `pagination` 设为 `false` 可完全禁用分页
+- 列宽默认 150px，未设置 `width` 的列统一使用此默认值
+- 排序图标使用箭头字符（ ↑ / ↓）
+- Web 端显示水平滚动条，移动端隐藏
+- `maxHeight` 会同时限制表体高度（maxHeight - 50）
+- `dataIndex` 缺省时自动使用 `key` 作为数据字段名

package/package/module/DeviceSelectionModal/README.md

@@ -0,0 +1,124 @@
+# DeviceSelectionModal
+
+设备选择模态对话框组件，用于从设备列表中选择一个设备。支持加载状态、错误处理、重试机制和文本国际化，适合打印机选择、终端绑定等硬件设备关联场景。
+
+## 功能特性
+
+- ✅ 单选设备列表（Radio Button 样式）
+- ✅ 加载中状态展示（ActivityIndicator）
+- ✅ 错误状态展示 + 重试按钮
+- ✅ 空列表提示
+- ✅ 设备描述信息展示
+- ✅ 未选择时确认按钮自动禁用
+- ✅ 关闭时恢复原始选中状态
+- ✅ 全部文本支持国际化（i18n props）
+- ✅ 淡入淡出动画
+- ✅ 主题色适配
+
+## 安装使用
+
+```tsx
+import { DeviceSelectionModal } from '@beppla/tapas-ui';
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| visible | `boolean` | - | 是否显示（必填） |
+| devices | `Device[]` | - | 设备列表（必填） |
+| selectedDeviceId | `string` | - | 当前选中的设备 ID |
+| onClose | `() => void` | - | 关闭回调（必填） |
+| onConfirm | `(deviceId: string) => void` | - | 确认选择回调（必填） |
+| title | `string` | - | 对话框标题 |
+| isLoading | `boolean` | `false` | 是否加载中 |
+| error | `string \| null` | `null` | 错误信息 |
+| onRetry | `() => void` | - | 重试按钮回调 |
+| selectDeviceText | `string` | `'Select Device'` | 标题文本 |
+| pleaseSelectDeviceText | `string` | `'Please select a device'` | 副标题文本 |
+| loadingDevicesText | `string` | `'Loading devices...'` | 加载中文本 |
+| noDevicesAvailableText | `string` | `'No devices available'` | 空列表文本 |
+| closeText | `string` | `'Close'` | 关闭按钮文本 |
+| confirmText | `string` | `'Confirm'` | 确认按钮文本 |
+| retryText | `string` | `'Retry'` | 重试按钮文本 |
+| testID | `string` | - | 测试标识 |
+
+### Device 接口
+
+```tsx
+interface Device {
+  id: string;
+  name: string;
+  description?: string;
+}
+```
+
+## 使用示例
+
+### 基础用法
+
+```tsx
+const [visible, setVisible] = useState(false);
+const devices = [
+  { id: '1', name: 'Printer A', description: 'Kitchen printer' },
+  { id: '2', name: 'Printer B', description: 'Receipt printer' },
+];
+
+<DeviceSelectionModal
+  visible={visible}
+  devices={devices}
+  onClose={() => setVisible(false)}
+  onConfirm={(deviceId) => {
+    console.log('Selected:', deviceId);
+    setVisible(false);
+  }}
+/>
+```
+
+### 加载状态
+
+```tsx
+<DeviceSelectionModal
+  visible={true}
+  devices={[]}
+  isLoading={true}
+  onClose={() => setVisible(false)}
+  onConfirm={() => {}}
+/>
+```
+
+### 错误状态 + 重试
+
+```tsx
+<DeviceSelectionModal
+  visible={true}
+  devices={[]}
+  error="Failed to load devices"
+  onRetry={() => fetchDevices()}
+  onClose={() => setVisible(false)}
+  onConfirm={() => {}}
+/>
+```
+
+### 国际化
+
+```tsx
+<DeviceSelectionModal
+  visible={true}
+  devices={devices}
+  selectDeviceText="Select Printer"
+  pleaseSelectDeviceText="Choose a printer for this station"
+  confirmText="Bind"
+  closeText="Cancel"
+  onClose={() => setVisible(false)}
+  onConfirm={handleConfirm}
+/>
+```
+
+## 注意事项
+
+- 关闭对话框时会将内部选中状态恢复为 `selectedDeviceId`（即取消未确认的选择）
+- 未选中设备时确认按钮禁用（灰色样式）
+- 对话框最大宽度 400px，设备列表最大高度 300px
+- `title` 和 `selectDeviceText` 同时存在时，`title` 优先
+- 需在 `ThemeProvider` 内使用

package/package/module/DraggableFlatList/README.md

@@ -0,0 +1,35 @@
+# DraggableFlatList
+
+可拖拽列表组件占位符。当前为空实现，预留用于后续开发支持拖拽排序的列表功能。
+
+## 功能特性
+
+- ✅ 组件骨架已搭建，导出可用
+- (待开发) 拖拽排序
+- (待开发) 拖拽动画
+- (待开发) 自定义渲染
+
+## 安装使用
+
+```tsx
+import { DraggableFlatList } from '@beppla/tapas-ui';
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| testID | `string` | - | 测试标识 |
+
+## 使用示例
+
+### 基础用法
+
+```tsx
+<DraggableFlatList testID="draggable-list" />
+```
+
+## 注意事项
+
+- 当前为空 View 占位实现，无实际拖拽功能
+- 后续计划集成 `react-native-draggable-flatlist` 或自定义实现