taro-uno-ui 0.9.0-beta

package/src/components/display/Table/Table.tsx

@@ -0,0 +1,430 @@
+import React, { forwardRef, useRef, useState, useEffect, useCallback, useMemo } from 'react';
+import { View, Text, ScrollView } from '@tarojs/components';
+import { TableStyles } from './Table.styles';
+import type {
+  TableProps,
+  TableRef,
+  TableSortOrder,
+} from './Table.types';
+
+/** 表格组件 */
+export const TableComponent = forwardRef<TableRef, TableProps>((props, ref) => {
+  const {
+    columns = [],
+    dataSource: initialDataSource = [],
+    rowKey = 'key',
+    size = 'medium',
+    bordered = false,
+    striped = false,
+    hoverable = true,
+    loading = false,
+    emptyText = '暂无数据',
+    showHeader = true,
+    pagination = false,
+    rowSelection,
+    expandable,
+    scroll,
+    onChange,
+    onRow,
+    onHeaderRow,
+    className,
+    style,
+    ...restProps
+  } = props;
+
+  const tableRef = useRef<HTMLDivElement>(null);
+  const [data, setData] = useState(initialDataSource);
+  const [sortField, setSortField] = useState<string>('');
+  const [sortOrder, setSortOrder] = useState<TableSortOrder>(null);
+  const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
+  const [expandedRowKeys, setExpandedRowKeys] = useState<string[]>([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
+  // 同步数据状态
+  useEffect(() => {
+    setData(initialDataSource);
+  }, [initialDataSource]);
+
+  // 处理排序
+  const handleSort = useCallback(
+    (field: string, order: TableSortOrder) => {
+      setSortField(field);
+      setSortOrder(order);
+      onChange?.({ current: currentPage, pageSize }, {}, { field, order });
+    },
+    [currentPage, pageSize, onChange],
+  );
+
+  // 处理行选择
+  const handleRowSelect = useCallback(
+    (key: string, selected: boolean) => {
+      const newSelectedKeys = selected ? [...selectedRowKeys, key] : selectedRowKeys.filter((k) => k !== key);
+
+      setSelectedRowKeys(newSelectedKeys);
+      rowSelection?.onChange?.(
+        newSelectedKeys,
+        data.filter((item) => newSelectedKeys.includes(item[rowKey as keyof typeof item])),
+      );
+    },
+    [selectedRowKeys, data, rowKey, rowSelection],
+  );
+
+  // 处理全选
+  const handleSelectAll = useCallback(
+    (selected: boolean) => {
+      const newSelectedKeys = selected ? data.map((item) => String(item[rowKey as keyof typeof item])) : [];
+
+      setSelectedRowKeys(newSelectedKeys);
+      rowSelection?.onChange?.(
+        newSelectedKeys,
+        data.filter((item) => newSelectedKeys.includes(String(item[rowKey as keyof typeof item]))),
+      );
+    },
+    [data, rowKey, rowSelection],
+  );
+
+  // 处理展开
+  const handleExpand = useCallback(
+    (key: string, expanded: boolean) => {
+      const newExpandedKeys = expanded ? [...expandedRowKeys, key] : expandedRowKeys.filter((k) => k !== key);
+
+      setExpandedRowKeys(newExpandedKeys);
+
+      // 调用外部展开回调
+      const record = data.find(item => String(item[rowKey as keyof typeof item]) === key);
+      if (record && typeof expandable === 'object' && expandable.onExpand) {
+        expandable.onExpand(expanded, record);
+      }
+    },
+    [expandedRowKeys, data, rowKey, expandable],
+  );
+
+  // 处理分页
+  const handlePageChange = useCallback(
+    (page: number, size?: number) => {
+      setCurrentPage(page);
+      if (size) setPageSize(size);
+      onChange?.({ current: page, pageSize: size || pageSize }, {}, { field: sortField, order: sortOrder });
+    },
+    [pageSize, sortField, sortOrder, onChange],
+  );
+
+  // 排序和筛选后的数据
+  const processedData = useMemo(() => {
+    const result = [...data];
+
+    // 排序处理
+    if (sortField && sortOrder) {
+      result.sort((a, b) => {
+        const aValue = a[sortField as keyof typeof a];
+        const bValue = b[sortField as keyof typeof b];
+
+        if (typeof aValue === 'number' && typeof bValue === 'number') {
+          return sortOrder === 'ascend' ? aValue - bValue : bValue - aValue;
+        }
+
+        const aStr = String(aValue || '');
+        const bStr = String(bValue || '');
+
+        return sortOrder === 'ascend' ? aStr.localeCompare(bStr) : bStr.localeCompare(aStr);
+      });
+    }
+
+    return result;
+  }, [data, sortField, sortOrder]);
+
+  // 分页后的数据
+  const paginatedData = useMemo(() => {
+    if (!pagination) return processedData;
+
+    const startIndex = (currentPage - 1) * pageSize;
+    const endIndex = startIndex + pageSize;
+    return processedData.slice(startIndex, endIndex);
+  }, [processedData, currentPage, pageSize, pagination]);
+
+  // 渲染表头
+  const renderHeader = () => {
+    if (!showHeader) return null;
+
+    const headerProps = onHeaderRow?.(columns, 0) || {};
+
+    return (
+      <View className="taro-uno-table__header" {...headerProps}>
+        <View className="taro-uno-table__row">
+          {/* 选择列 */}
+          {rowSelection && (
+            <View className="taro-uno-table__cell taro-uno-table__cell--selection">
+              <input
+                type="checkbox"
+                checked={selectedRowKeys.length > 0 && selectedRowKeys.length === data.length}
+                onChange={(e) => handleSelectAll(e.target.checked)}
+                disabled={data.length === 0}
+              />
+            </View>
+          )}
+
+          {/* 展开列 */}
+          {expandable && <View className="taro-uno-table__cell taro-uno-table__cell--expand" />}
+
+          {/* 数据列 */}
+          {columns.map((column, index) => {
+            const isSortable = column.sortable || column.onSort;
+            const currentSort = sortField === column.dataIndex ? sortOrder : null;
+
+            return (
+              <View
+                key={column.key || column.dataIndex || index}
+                className={`taro-uno-table__cell taro-uno-table__cell--header ${
+                  column.align ? `taro-uno-table__cell--${column.align}` : ''
+                }`}
+                style={{ width: column.width }}
+              >
+                <View className="taro-uno-table__cell-content">
+                  {column.title}
+                  {isSortable && (
+                    <View
+                      className={`taro-uno-table__sorter ${
+                        currentSort ? `taro-uno-table__sorter--${currentSort}` : ''
+                      }`}
+                      onClick={() => {
+                        const newOrder = currentSort === 'ascend' ? 'descend' : 'ascend';
+                        handleSort(column.dataIndex, newOrder);
+                      }}
+                    >
+                      <View className="taro-uno-table__sorter-up" />
+                      <View className="taro-uno-table__sorter-down" />
+                    </View>
+                  )}
+                </View>
+              </View>
+            );
+          })}
+        </View>
+      </View>
+    );
+  };
+
+  // 渲染表格行
+  const renderRow = (record: any, rowIndex: number) => {
+    const key = String(record[rowKey as keyof typeof record]);
+    const isSelected = selectedRowKeys.includes(key);
+    const isExpanded = expandedRowKeys.includes(key);
+
+    const rowProps = onRow?.(record, rowIndex) || {};
+
+    return (
+      <View key={key} className="taro-uno-table__body">
+        <View
+          className={`taro-uno-table__row ${isSelected ? 'taro-uno-table__row--selected' : ''} ${
+            striped && rowIndex % 2 === 1 ? 'taro-uno-table__row--striped' : ''
+          }`}
+          {...rowProps}
+        >
+          {/* 选择列 */}
+          {rowSelection && (
+            <View className="taro-uno-table__cell taro-uno-table__cell--selection">
+              <input
+                type="checkbox"
+                checked={isSelected}
+                onChange={(e) => handleRowSelect(key, e.target.checked)}
+                disabled={rowSelection.getCheckboxProps?.(record)?.disabled}
+              />
+            </View>
+          )}
+
+          {/* 展开列 */}
+          {expandable && (
+            <View className="taro-uno-table__cell taro-uno-table__cell--expand">
+              {typeof expandable === 'object' && expandable.rowExpandable?.(record) && (
+                <View
+                  className={`taro-uno-table__expand-icon ${isExpanded ? 'taro-uno-table__expand-icon--expanded' : ''}`}
+                  onClick={() => handleExpand(key, !isExpanded)}
+                />
+              )}
+            </View>
+          )}
+
+          {/* 数据列 */}
+          {columns.map((column, colIndex) => {
+            const value = record[column.dataIndex as keyof typeof record];
+            const render = column.render;
+            const cellContent = render ? render(value, record, rowIndex) : String(value || '');
+
+            return (
+              <View
+                key={column.key || column.dataIndex || colIndex}
+                className={`taro-uno-table__cell ${column.align ? `taro-uno-table__cell--${column.align}` : ''}`}
+                style={{ width: column.width }}
+              >
+                <View className="taro-uno-table__cell-content">{cellContent}</View>
+              </View>
+            );
+          })}
+        </View>
+
+        {/* 展开内容 */}
+        {expandable && isExpanded && typeof expandable === 'object' && expandable.rowExpandable?.(record) && (
+          <View className="taro-uno-table__expanded-row">
+            <View className="taro-uno-table__expanded-cell">
+              {typeof expandable === 'object' && expandable.expandedRowRender?.(record, rowIndex)}
+            </View>
+          </View>
+        )}
+      </View>
+    );
+  };
+
+  // 渲染分页
+  const renderPagination = () => {
+    if (!pagination) return null;
+
+    const total = data.length;
+    const totalPages = Math.ceil(total / pageSize);
+
+    return (
+      <View className="taro-uno-table__pagination">
+        <View className="taro-uno-table__pagination-info">共 {total} 条记录</View>
+        <View className="taro-uno-table__pagination-controls">
+          <button
+            className="taro-uno-table__pagination-btn"
+            disabled={currentPage === 1}
+            onClick={() => handlePageChange(currentPage - 1)}
+          >
+            上一页
+          </button>
+          <View className="taro-uno-table__pagination-current">
+            {currentPage} / {totalPages}
+          </View>
+          <button
+            className="taro-uno-table__pagination-btn"
+            disabled={currentPage === totalPages}
+            onClick={() => handlePageChange(currentPage + 1)}
+          >
+            下一页
+          </button>
+        </View>
+      </View>
+    );
+  };
+
+  // 渲染空状态
+  const renderEmpty = () => {
+    if (data.length > 0) return null;
+
+    return (
+      <View className="taro-uno-table__empty">
+        <Text className="taro-uno-table__empty-text">{emptyText}</Text>
+      </View>
+    );
+  };
+
+  // 渲染加载状态
+  const renderLoading = () => {
+    if (!loading) return null;
+
+    return (
+      <View className="taro-uno-table__loading">
+        <View className="taro-uno-table__loading-spinner" />
+        <Text className="taro-uno-table__loading-text">加载中...</Text>
+      </View>
+    );
+  };
+
+  // 暴露给外部的引用方法
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      element: tableRef.current,
+      getData: () => data,
+      getSelectedRows: () => data.filter(item => selectedRowKeys.includes(item.id as string)),
+      getSelectedRowKeys: () => selectedRowKeys,
+      getSortField: () => sortField,
+      getSortOrder: () => sortOrder,
+      getFilterValues: () => ({}),
+      setData: (newData) => setData(newData),
+      setSelectedRows: (keys: string[]) => setSelectedRowKeys(keys),
+      setSelectedRowKeys: (keys: string[]) => setSelectedRowKeys(keys),
+      getExpandedRowKeys: () => expandedRowKeys,
+      setExpandedRowKeys: (keys: string[]) => setExpandedRowKeys(keys),
+      setSort: (field: string, order: TableSortOrder) => {
+        setSortField(field);
+        setSortOrder(order);
+      },
+      setFilter: (_field: string, _values: any[]) => {
+        // Filter implementation
+      },
+      refresh: () => {
+        // 重新加载数据的逻辑
+        handlePageChange(currentPage, pageSize);
+      },
+      reset: () => {
+        setSelectedRowKeys([]);
+        setExpandedRowKeys([]);
+        setSortField('');
+        setSortOrder(null);
+      },
+      scrollToRow: (_key: string) => {
+        // Scroll to row implementation
+      },
+      scrollTo: (options: any) => {
+        tableRef.current?.scrollTo(options);
+      },
+    }),
+    [selectedRowKeys, expandedRowKeys, sortField, sortOrder, currentPage, pageSize, data],
+  );
+
+  // 生成样式
+  const tableStyle = TableStyles['getStyle']({
+    size,
+    bordered,
+    striped,
+    hoverable,
+    scroll,
+    style: style || {},
+  });
+
+  // 生成类名
+  const tableClassName = TableStyles['getClassName']({
+    size,
+    bordered,
+    striped,
+    hoverable,
+    loading,
+    className: className || '',
+  });
+
+  return (
+    <View ref={tableRef} className={tableClassName} style={tableStyle} {...restProps}>
+      {renderLoading()}
+
+      <ScrollView
+        className="taro-uno-table__scroll"
+        scrollX={scroll?.x !== undefined}
+        scrollY={scroll?.y !== undefined}
+        style={{
+          maxHeight: scroll?.y,
+          maxWidth: scroll?.x,
+        }}
+      >
+        <View className="taro-uno-table__container">
+          {renderHeader()}
+
+          <View className="taro-uno-table__body">
+            {paginatedData.map((record, index) => renderRow(record, index))}
+            {renderEmpty()}
+          </View>
+        </View>
+      </ScrollView>
+
+      {renderPagination()}
+    </View>
+  );
+});
+
+/** 表格组件显示名称 */
+TableComponent.displayName = 'Table';
+
+/** 导出表格组件 */
+export const Table = TableComponent;
+export default TableComponent;

package/src/components/display/Table/Table.types.ts

@@ -0,0 +1,255 @@
+import { ReactNode } from 'react';
+import { BaseComponentProps, Size } from '../../../types';
+
+/** 表格尺寸 */
+export type TableSize = Size | 'small' | 'medium' | 'large';
+
+/** 表格边框 */
+export type TableBorder = 'none' | 'outer' | 'all';
+
+/** 表格对齐方式 */
+export type TableAlign = 'left' | 'center' | 'right';
+
+/** 表格排序方式 */
+export type TableSortOrder = 'ascend' | 'descend' | null;
+
+/** 表格筛选配置 */
+export interface TableFilterConfig {
+  /** 筛选项 */
+  options: Array<{ label: string; value: any }>;
+  /** 是否多选 */
+  multiple?: boolean;
+  /** 默认值 */
+  defaultSelectedValues?: any[];
+  /** 筛选回调 */
+  onFilter?: (_value: any, record: any) => boolean;
+}
+
+/** 表格列配置 */
+export interface TableColumn<T = any> {
+  /** 列标题 */
+  title: ReactNode;
+  /** 数据字段 */
+  dataIndex: string;
+  /** 列键值 */
+  key?: string;
+  /** 列宽 */
+  width?: number | string;
+  /** 对齐方式 */
+  align?: TableAlign;
+  /** 是否固定 */
+  fixed?: 'left' | 'right' | boolean;
+  /** 是否可排序 */
+  sortable?: boolean;
+  /** 排序字段 */
+  sortField?: string;
+  /** 排序回调 */
+  onSort?: (_field: string, order: TableSortOrder) => void;
+  /** 筛选配置 */
+  filter?: TableFilterConfig;
+  /** 自定义渲染 */
+  render?: (_value: any, record: T, index: number) => ReactNode;
+  /** 自定义标题渲染 */
+  titleRender?: (_column: TableColumn<T>) => ReactNode;
+  /** 是否显示 */
+  visible?: boolean;
+  /** 是否省略 */
+  ellipsis?: boolean;
+  /** 自定义样式 */
+  style?: React.CSSProperties;
+  /** 自定义类名 */
+  className?: string;
+}
+
+/** 表格行配置 */
+export interface TableRowConfig<T = any> {
+  /** 行键值 */
+  key: string;
+  /** 行数据 */
+  record: T;
+  /** 行索引 */
+  index: number;
+  /** 是否展开 */
+  expanded?: boolean;
+  /** 是否选中 */
+  selected?: boolean;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 行样式 */
+  style?: React.CSSProperties;
+  /** 行类名 */
+  className?: string;
+}
+
+/** 表格行选择配置 */
+export interface TableRowSelection<T = any> {
+  /** 选择类型 */
+  type?: 'checkbox' | 'radio';
+  /** 选中行键值 */
+  selectedRowKeys?: string[];
+  /** 行选择变化回调 */
+  onChange?: (_selectedRowKeys: string[], selectedRows: T[]) => void;
+  /** 行是否可展开 */
+  rowExpandable?: (_record: T) => boolean;
+  /** 获取复选框属性 */
+  getCheckboxProps?: (_record: T) => { disabled?: boolean };
+  /** 是否默认选中所有行 */
+  defaultSelectedAll?: boolean;
+  /** 是否禁用选择 */
+  disabled?: boolean;
+}
+
+/** 表格展开配置 */
+export interface TableExpandable<T = any> {
+  /** 展开行渲染 */
+  expandedRowRender?: (_record: T, index: number) => ReactNode;
+  /** 行是否可展开 */
+  rowExpandable?: (_record: T) => boolean;
+  /** 默认展开的行键值 */
+  defaultExpandedRowKeys?: string[];
+  /** 展开的行键值 */
+  expandedRowKeys?: string[];
+  /** 展开变化回调 */
+  onExpand?: (_expanded: boolean, record: T) => void;
+  /** 展开图标 */
+  expandIcon?: ReactNode;
+  /** 展开图标位置 */
+  expandIconPosition?: 'left' | 'right';
+}
+
+/** 表格分页配置 */
+export interface TablePaginationConfig {
+  /** 当前页码 */
+  current?: number;
+  /** 每页条数 */
+  pageSize?: number;
+  /** 总条数 */
+  total?: number;
+  /** 是否显示分页 */
+  show?: boolean;
+  /** 分页位置 */
+  position?: 'top' | 'bottom' | 'both';
+  /** 分页大小选项 */
+  pageSizeOptions?: number[];
+  /** 显示总数 */
+  showTotal?: boolean;
+  /** 显示快速跳转 */
+  showQuickJumper?: boolean;
+  /** 显示页码选择器 */
+  showSizeChanger?: boolean;
+  /** 页码改变事件 */
+  onChange?: (_current: number, pageSize: number) => void;
+  /** 每页条数改变事件 */
+  onShowSizeChange?: (_current: number, pageSize: number) => void;
+}
+
+/** 表格引用 */
+export interface TableRef<T = any> {
+  /** 获取元素引用 */
+  element: any | null;
+  /** 获取当前数据 */
+  getData: () => T[];
+  /** 获取选中行 */
+  getSelectedRows: () => T[];
+  /** 获取选中行键值 */
+  getSelectedRowKeys: () => string[];
+  /** 获取排序字段 */
+  getSortField: () => string;
+  /** 获取排序方式 */
+  getSortOrder: () => TableSortOrder;
+  /** 获取筛选值 */
+  getFilterValues: () => Record<string, any[]>;
+  /** 设置数据 */
+  setData: (_data: T[]) => void;
+  /** 设置选中行 */
+  setSelectedRows: (_keys: string[]) => void;
+  /** 设置排序 */
+  setSort: (_field: string, order: TableSortOrder) => void;
+  /** 设置筛选 */
+  setFilter: (_field: string, values: any[]) => void;
+  /** 刷新数据 */
+  refresh: () => void;
+  /** 重置状态 */
+  reset: () => void;
+  /** 滚动到指定行 */
+  scrollToRow: (_key: string) => void;
+}
+
+/** 表格组件属性 */
+export interface TableProps<T = any> extends BaseComponentProps {
+  /** 表格数据 */
+  data?: T[];
+  /** 数据源（兼容属性） */
+  dataSource?: T[];
+  /** 列配置 */
+  columns: TableColumn<T>[];
+  /** 行键值字段 */
+  rowKey?: string | ((_record: T) => string);
+  /** 表格尺寸 */
+  size?: TableSize;
+  /** 表格边框 */
+  border?: TableBorder;
+  /** 是否有边框（兼容属性） */
+  bordered?: boolean;
+  /** 是否斑马纹 */
+  striped?: boolean;
+  /** 是否悬停效果 */
+  hoverable?: boolean;
+  /** 是否可展开 */
+  expandable?: boolean | TableExpandable<T>;
+  /** 展开行渲染 */
+  expandedRowRender?: (_record: T, index: number) => ReactNode;
+  /** 是否可选择 */
+  selectable?: boolean;
+  /** 选择类型 */
+  selectionType?: 'checkbox' | 'radio';
+  /** 默认选中行键值 */
+  defaultSelectedRowKeys?: string[];
+  /** 选中行键值 */
+  selectedRowKeys?: string[];
+  /** 行选择事件 */
+  onRowSelect?: (_selectedRowKeys: string[], selectedRows: T[]) => void;
+  /** 行选择配置 */
+  rowSelection?: TableRowSelection<T>;
+  /** 表格变化事件 */
+  onChange?: (_pagination: TablePaginationConfig, filters: any, sorter: any) => void;
+  /** 行配置 - Taro.js compatible */
+  onRow?: (_record: T, index: number) => Record<string, any>;
+  /** 表头行配置 - Taro.js compatible */
+  onHeaderRow?: (_columns: TableColumn<T>[], index: number) => Record<string, any>;
+  /** 行点击事件 - Taro.js compatible */
+  onRowClick?: (_record: T, index: number, event: any) => void;
+  /** 行双击事件 - not supported in Taro.js */
+  onRowDoubleClick?: (_record: T, index: number, event: any) => void;
+  /** 排序事件 */
+  onSort?: (_field: string, order: TableSortOrder) => void;
+  /** 筛选事件 */
+  onFilter?: (_filters: Record<string, any[]>) => void;
+  /** 分页配置 */
+  pagination?: TablePaginationConfig | boolean;
+  /** 是否显示表头 */
+  showHeader?: boolean;
+  /** 是否显示滚动条 */
+  scrollable?: boolean;
+  /** 滚动配置 */
+  scroll?: { x?: number | string; y?: number | string };
+  /** 是否加载中 */
+  loading?: boolean;
+  /** 空数据渲染 */
+  emptyText?: ReactNode;
+  /** 行样式 */
+  rowStyle?: (_record: T, index: number) => React.CSSProperties;
+  /** 行类名 */
+  rowClassName?: (_record: T, index: number) => string;
+  /** 单元格样式 */
+  cellStyle?: (_value: any, record: T, column: TableColumn<T>, index: number) => React.CSSProperties;
+  /** 单元格类名 */
+  cellClassName?: (_value: any, record: T, column: TableColumn<T>, index: number) => string;
+  /** 自定义行渲染 */
+  rowRender?: (_record: T, index: number) => ReactNode;
+  /** 自定义单元格渲染 */
+  cellRender?: (_value: any, record: T, column: TableColumn<T>, index: number) => ReactNode;
+}
+
+/** 表格分页类型别名 */
+export type TablePagination = TablePaginationConfig;

package/src/components/display/Table/index.tsx

@@ -0,0 +1,16 @@
+export { default } from './Table';
+export * from './Table';
+export type {
+  TableProps,
+  TableRef,
+  TableColumn,
+  TableSortOrder,
+  TableFilterConfig,
+  TableAlign,
+  TableSize,
+  TableBorder,
+  TableRowSelection,
+  TablePagination,
+  TableExpandable,
+} from './Table.types';
+export { tableStyles } from './Table.styles';