taro-uno-ui 0.9.0-beta

package/src/components/display/Rate/index.ts

@@ -0,0 +1,28 @@
+/**
+ * Rate 评分组件
+ * 
+ * 企业级评分组件，支持：
+ * - 完整和半星评分
+ * - 自定义字符和颜色
+ * - 键盘导航支持
+ * - 工具提示显示
+ * - 无障碍访问优化
+ * - 只读和禁用状态
+ * - 多种尺寸配置
+ * - 响应式设计
+ */
+
+export { Rate, RateComponent } from './Rate';
+export type {
+  RateProps,
+  RateRef,
+  RateSize,
+  RateCharacter,
+  RateUtils,
+  StarState,
+  StarProps,
+} from './Rate.types';
+export { rateStyles } from './Rate.styles';
+
+// 默认导出
+export { Rate as default } from './Rate';

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

@@ -0,0 +1,269 @@
+import type { TableSize } from './Table.types';
+
+/** 表格样式类 */
+export class TableStyles {
+  /** 尺寸映射 */
+  static readonly SIZE_MAP: Record<TableSize, any> = {
+    default: {
+      fontSize: 14,
+      padding: 12,
+      headerHeight: 40,
+      rowHeight: 40,
+      borderRadius: 6,
+    },
+    small: {
+      fontSize: 12,
+      padding: 8,
+      headerHeight: 32,
+      rowHeight: 32,
+      borderRadius: 4,
+    },
+    medium: {
+      fontSize: 14,
+      padding: 12,
+      headerHeight: 40,
+      rowHeight: 40,
+      borderRadius: 6,
+    },
+    large: {
+      fontSize: 16,
+      padding: 16,
+      headerHeight: 48,
+      rowHeight: 48,
+      borderRadius: 8,
+    },
+  };
+
+  /** 颜色映射 */
+  static readonly COLOR_MAP = {
+    background: '#ffffff',
+    headerBackground: '#fafafa',
+    borderColor: '#e5e7eb',
+    hoverBackground: '#f3f4f6',
+    selectedBackground: '#e0e7ff',
+    stripedBackground: '#f9fafb',
+    textColor: '#374151',
+    headerTextColor: '#6b7280',
+    borderColorLight: '#f3f4f6',
+    shadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)',
+  };
+
+  /** 生成表格样式 */
+  static getStyle(props: {
+    size?: TableSize;
+    bordered?: boolean;
+    striped?: boolean;
+    hoverable?: boolean;
+    scroll?: { x?: number | string; y?: number | string };
+    style?: React.CSSProperties;
+  }): React.CSSProperties {
+    const { size = 'medium', bordered = false, style = {} } = props;
+
+    const sizeStyles = this.SIZE_MAP[size];
+
+    return {
+      width: '100%',
+      backgroundColor: this.COLOR_MAP.background,
+      borderRadius: sizeStyles['borderRadius'],
+      border: bordered ? `1px solid ${this.COLOR_MAP.borderColor}` : 'none',
+      boxShadow: this.COLOR_MAP.shadow,
+      overflow: 'hidden',
+      position: 'relative',
+      ...style,
+    };
+  }
+
+  /** 生成表格类名 */
+  static getClassName(props: {
+    size?: TableSize;
+    bordered?: boolean;
+    striped?: boolean;
+    hoverable?: boolean;
+    loading?: boolean;
+    className?: string;
+  }): string {
+    const {
+      size = 'medium',
+      bordered = false,
+      striped = false,
+      hoverable = true,
+      loading = false,
+      className = '',
+    } = props;
+
+    const baseClass = 'taro-uno-table';
+    const sizeClass = `taro-uno-table--${size}`;
+    const borderedClass = bordered ? 'taro-uno-table--bordered' : '';
+    const stripedClass = striped ? 'taro-uno-table--striped' : '';
+    const hoverableClass = hoverable ? 'taro-uno-table--hoverable' : '';
+    const loadingClass = loading ? 'taro-uno-table--loading' : '';
+
+    return [baseClass, sizeClass, borderedClass, stripedClass, hoverableClass, loadingClass, className]
+      .filter(Boolean)
+      .join(' ');
+  }
+
+  /** 生成表格头部样式 */
+  static getHeaderStyle(props: { size?: TableSize }): React.CSSProperties {
+    const { size = 'medium' } = props;
+    const sizeStyles = this.SIZE_MAP[size];
+
+    return {
+      backgroundColor: this.COLOR_MAP.headerBackground,
+      borderBottom: `1px solid ${this.COLOR_MAP.borderColor}`,
+      minHeight: sizeStyles['headerHeight'],
+      position: 'sticky',
+      top: 0,
+      zIndex: 10,
+    };
+  }
+
+  /** 生成表格行样式 */
+  static getRowStyle(props: {
+    size?: TableSize;
+    selected?: boolean;
+    striped?: boolean;
+    index?: number;
+  }): React.CSSProperties {
+    const { size = 'medium', selected = false, striped = false, index = 0 } = props;
+    const sizeStyles = this.SIZE_MAP[size];
+
+    return {
+      minHeight: sizeStyles['rowHeight'],
+      borderBottom: `1px solid ${this.COLOR_MAP.borderColor}`,
+      backgroundColor: selected
+        ? this.COLOR_MAP.selectedBackground
+        : striped && index % 2 === 1
+          ? this.COLOR_MAP.stripedBackground
+          : 'transparent',
+      transition: 'background-color 0.2s ease',
+    };
+  }
+
+  /** 生成表格单元格样式 */
+  static getCellStyle(props: {
+    size?: TableSize;
+    align?: 'left' | 'center' | 'right';
+    width?: number | string;
+    isHeader?: boolean;
+  }): React.CSSProperties {
+    const { size = 'medium', align = 'left', width, isHeader = false } = props;
+
+    const sizeStyles = this.SIZE_MAP[size];
+
+    return {
+      padding: `${sizeStyles['padding']}px`,
+      textAlign: align,
+      width: width || 'auto',
+      minWidth: 80,
+      fontSize: sizeStyles['fontSize'],
+      color: isHeader ? this.COLOR_MAP.headerTextColor : this.COLOR_MAP.textColor,
+      fontWeight: isHeader ? 600 : 400,
+      borderRight: isHeader ? `1px solid ${this.COLOR_MAP.borderColor}` : 'none',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    };
+  }
+
+  /** 生成表格展开行样式 */
+  static getExpandedRowStyle(): React.CSSProperties {
+    return {
+      backgroundColor: this.COLOR_MAP.stripedBackground,
+      borderBottom: `1px solid ${this.COLOR_MAP.borderColor}`,
+    };
+  }
+
+  /** 生成表格分页样式 */
+  static getPaginationStyle(): React.CSSProperties {
+    return {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      padding: '16px',
+      borderTop: `1px solid ${this.COLOR_MAP.borderColor}`,
+      backgroundColor: this.COLOR_MAP.background,
+    };
+  }
+
+  /** 生成表格空状态样式 */
+  static getEmptyStyle(): React.CSSProperties {
+    return {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding: '48px 16px',
+      color: this.COLOR_MAP.headerTextColor,
+      fontSize: 14,
+      textAlign: 'center' as const,
+    };
+  }
+
+  /** 生成表格加载状态样式 */
+  static getLoadingStyle(): React.CSSProperties {
+    return {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: 'rgba(255, 255, 255, 0.8)',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      zIndex: 100,
+    };
+  }
+
+  /** 生成表格排序器样式 */
+  static getSorterStyle(props: { active?: boolean; order?: 'ascend' | 'descend' }): React.CSSProperties {
+    const { active = false } = props;
+
+    return {
+      display: 'inline-flex',
+      flexDirection: 'column',
+      marginLeft: 8,
+      cursor: 'pointer',
+      opacity: active ? 1 : 0.45,
+      transition: 'opacity 0.2s ease',
+    };
+  }
+
+  /** 生成表格选择列样式 */
+  static getSelectionCellStyle(): React.CSSProperties {
+    return {
+      width: 48,
+      textAlign: 'center' as const,
+      padding: 0,
+    };
+  }
+
+  /** 生成表格展开列样式 */
+  static getExpandCellStyle(): React.CSSProperties {
+    return {
+      width: 48,
+      textAlign: 'center' as const,
+      padding: 0,
+    };
+  }
+
+  /** 生成表格滚动容器样式 */
+  static getScrollStyle(props: {
+    scrollX?: boolean;
+    scrollY?: boolean;
+    maxHeight?: number | string;
+    maxWidth?: number | string;
+  }): React.CSSProperties {
+    const { scrollX = false, scrollY = false, maxHeight, maxWidth } = props;
+
+    return {
+      overflowX: scrollX ? 'auto' : 'hidden',
+      overflowY: scrollY ? 'auto' : 'hidden',
+      maxHeight: maxHeight,
+      maxWidth: maxWidth,
+    };
+  }
+}
+
+/** 导出表格样式 */
+export const tableStyles = new TableStyles();

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

@@ -0,0 +1,343 @@
+import React from 'react'
+import { render, fireEvent, screen } from '@testing-library/react'
+import { Table } from './index'
+
+describe('Table Component', () => {
+  const mockColumns = [
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      key: 'name',
+      width: 120,
+      align: 'left' as const
+    },
+    {
+      title: '年龄',
+      dataIndex: 'age',
+      key: 'age',
+      width: 80,
+      align: 'center' as const,
+      sortable: true
+    },
+    {
+      title: '地址',
+      dataIndex: 'address',
+      key: 'address',
+      width: 200,
+      align: 'left' as const
+    }
+  ]
+
+  const mockData = [
+    { key: '1', name: '张三', age: 32, address: '北京市朝阳区' },
+    { key: '2', name: '李四', age: 28, address: '上海市浦东新区' },
+    { key: '3', name: '王五', age: 45, address: '广州市天河区' }
+  ]
+
+  test('renders table with basic props', () => {
+    const { container } = render(
+      <Table
+        columns={mockColumns}
+        dataSource={mockData}
+      />
+    )
+
+    expect(container.querySelector('.taro-uno-table')).toBeInTheDocument()
+    expect(container.querySelector('.taro-uno-table__header')).toBeInTheDocument()
+    expect(container.querySelector('.taro-uno-table__body')).toBeInTheDocument()
+  })
+
+  test('renders table header correctly', () => {
+    const { getByText } = render(
+      <Table
+        columns={mockColumns}
+        dataSource={mockData}
+      />
+    )
+
+    expect(getByText('姓名')).toBeInTheDocument()
+    expect(getByText('年龄')).toBeInTheDocument()
+    expect(getByText('地址')).toBeInTheDocument()
+  })
+
+  test('renders table rows correctly', () => {
+    const { getByText } = render(
+      <Table
+        columns={mockColumns}
+        dataSource={mockData}
+      />
+    )
+
+    expect(getByText('张三')).toBeInTheDocument()
+    expect(getByText('李四')).toBeInTheDocument()
+    expect(getByText('王五')).toBeInTheDocument()
+    expect(getByText('32')).toBeInTheDocument()
+    expect(getByText('28')).toBeInTheDocument()
+    expect(getByText('45')).toBeInTheDocument()
+  })
+
+  test('handles sorting', () => {
+    const handleChange = vi.fn()
+    const { container } = render(
+      <Table
+        columns={mockColumns}
+        dataSource={mockData}
+        onChange={handleChange}
+      />
+    )
+
+    const sorter = container.querySelector('.taro-uno-table__sorter')
+    if (sorter) {
+      fireEvent.click(sorter)
+      expect(handleChange).toHaveBeenCalled()
+    }
+  })
+
+  test('handles row selection', () => {
+    const handleSelectionChange = vi.fn()
+    const { container } = render(
+      <Table
+        columns={mockColumns}
+        dataSource={mockData}
+        rowSelection={{
+          onChange: handleSelectionChange
+        }}
+      />
+    )
+
+    const checkbox = container.querySelector('input[type="checkbox"]')
+    if (checkbox) {
+      fireEvent.click(checkbox)
+      expect(handleSelectionChange).toHaveBeenCalled()
+    }
+  })
+
+  test('handles pagination', () => {
+    const handleChange = vi.fn()
+    const largeData = Array.from({ length: 25 }, (_, i) => ({
+      key: String(i + 1),
+      name: `用户${i + 1}`,
+      age: 20 + (i % 30),
+      address: `地址${i + 1}`
+    }))
+
+    const { container } = render(
+      <Table
+        columns={mockColumns}
+        dataSource={largeData}
+        pagination={true}
+        onChange={handleChange}
+      />
+    )
+
+    expect(container.querySelector('.taro-uno-table__pagination')).toBeInTheDocument()
+
+    const nextButton = container.querySelector('.taro-uno-table__pagination-btn:last-child')
+    if (nextButton) {
+      fireEvent.click(nextButton)
+      expect(handleChange).toHaveBeenCalled()
+    }
+  })
+
+  test('shows empty state when no data', () => {
+    const { getByText } = render(
+      <Table
+        columns={mockColumns}
+        dataSource={[]}
+        emptyText="暂无数据"
+      />
+    )
+
+    expect(getByText('暂无数据')).toBeInTheDocument()
+  })
+
+  test('shows loading state', () => {
+    const { container } = render(
+      <Table
+        columns={mockColumns}
+        dataSource={mockData}
+        loading={true}
+      />
+    )
+
+    expect(container.querySelector('.taro-uno-table__loading')).toBeInTheDocument()
+  })
+
+  test('handles different table sizes', () => {
+    const { container, rerender } = render(
+      <Table
+        columns={mockColumns}
+        dataSource={mockData}
+        size="small"
+      />
+    )
+
+    expect(container.querySelector('.taro-uno-table--small')).toBeInTheDocument()
+
+    rerender(
+      <Table
+        columns={mockColumns}
+        dataSource={mockData}
+        size="large"
+      />
+    )
+
+    expect(container.querySelector('.taro-uno-table--large')).toBeInTheDocument()
+  })
+
+  test('handles bordered table', () => {
+    const { container } = render(
+      <Table
+        columns={mockColumns}
+        dataSource={mockData}
+        bordered={true}
+      />
+    )
+
+    expect(container.querySelector('.taro-uno-table--bordered')).toBeInTheDocument()
+  })
+
+  test('handles striped table', () => {
+    const { container } = render(
+      <Table
+        columns={mockColumns}
+        dataSource={mockData}
+        striped={true}
+      />
+    )
+
+    expect(container.querySelector('.taro-uno-table--striped')).toBeInTheDocument()
+  })
+
+  test('handles expandable rows', () => {
+    const handleExpand = vi.fn()
+    const { container } = render(
+      <Table
+        columns={mockColumns}
+        dataSource={mockData}
+        expandable={{
+          expandedRowRender: (record) => <div>展开内容: {record.name}</div>,
+          rowExpandable: (record) => record.age > 30,
+          onExpand: handleExpand
+        }}
+      />
+    )
+
+    const expandIcon = container.querySelector('.taro-uno-table__expand-icon')
+    if (expandIcon) {
+      fireEvent.click(expandIcon)
+      expect(handleExpand).toHaveBeenCalled()
+    }
+  })
+
+  test('handles custom cell rendering', () => {
+    const customColumns = [
+      {
+        ...mockColumns[0],
+        render: (text: string, record: any) => <strong>{text} ({record.age}岁)</strong>
+      },
+      ...mockColumns.slice(1)
+    ]
+
+    const { getByText } = render(
+      <Table
+        columns={customColumns}
+        dataSource={mockData}
+      />
+    )
+
+    expect(getByText('张三 (32岁)')).toBeInTheDocument()
+  })
+
+  test('handles scroll functionality', () => {
+    const { container } = render(
+      <Table
+        columns={mockColumns}
+        dataSource={mockData}
+        scroll={{ x: 800, y: 400 }}
+      />
+    )
+
+    const scrollContainer = container.querySelector('.taro-uno-table__scroll')
+    expect(scrollContainer).toBeInTheDocument()
+  })
+
+  test('handles row hover effect', () => {
+    const { container } = render(
+      <Table
+        columns={mockColumns}
+        dataSource={mockData}
+        hoverable={true}
+      />
+    )
+
+    expect(container.querySelector('.taro-uno-table--hoverable')).toBeInTheDocument()
+  })
+
+  test('handles custom row className and style', () => {
+    const onRow = (record: any) => ({
+      className: 'custom-row',
+      style: { backgroundColor: '#f0f0f0' }
+    })
+
+    const { container } = render(
+      <Table
+        columns={mockColumns}
+        dataSource={mockData}
+        onRow={onRow}
+      />
+    )
+
+    const row = container.querySelector('.custom-row')
+    expect(row).toBeInTheDocument()
+  })
+
+  test('handles custom header row className and style', () => {
+    const onHeaderRow = (columns: any) => ({
+      className: 'custom-header',
+      style: { backgroundColor: '#e0e0e0' }
+    })
+
+    const { container } = render(
+      <Table
+        columns={mockColumns}
+        dataSource={mockData}
+        onHeaderRow={onHeaderRow}
+      />
+    )
+
+    const header = container.querySelector('.custom-header')
+    expect(header).toBeInTheDocument()
+  })
+
+  test('handles table ref methods', () => {
+    const ref = React.createRef<any>()
+    render(
+      <Table
+        ref={ref}
+        columns={mockColumns}
+        dataSource={mockData}
+      />
+    )
+
+    expect(ref.current).toBeTruthy()
+    expect(ref.current.getSelectedRowKeys).toBeDefined()
+    expect(ref.current.setSelectedRowKeys).toBeDefined()
+    expect(ref.current.refresh).toBeDefined()
+  })
+
+  test('handles accessibility features', () => {
+    const { container } = render(
+      <Table
+        columns={mockColumns}
+        dataSource={mockData}
+        accessible={true}
+        accessibilityLabel="用户数据表格"
+        accessibilityRole="table"
+      />
+    )
+
+    const table = container.querySelector('.taro-uno-table')
+    expect(table).toHaveAttribute('aria-label', '用户数据表格')
+  })
+})