taro-uno-ui 0.9.0-beta

package/src/components/common/VirtualList.tsx

@@ -0,0 +1,368 @@
+/**
+ * 虚拟列表组件
+ * 提供高性能的大数据量列表渲染
+ */
+
+import React, {
+  useRef,
+  useEffect,
+  useMemo,
+  useCallback,
+  useState,
+  ReactNode,
+  CSSProperties,
+} from 'react';
+
+export interface VirtualListProps<T = any> {
+  /**
+   * 数据源
+   */
+  data: T[];
+
+  /**
+   * 渲染函数
+   */
+  renderItem: (item: T, index: number) => ReactNode;
+
+  /**
+   * 项目高度（可以是数字或函数）
+   */
+  itemHeight: number | ((index: number) => number);
+
+  /**
+   * 容器高度
+   */
+  height: number | string;
+
+  /**
+   * 容器宽度
+   */
+  width?: number | string;
+
+  /**
+   * 每个项目的key
+   */
+  itemKey: string | ((item: T, index: number) => string);
+
+  /**
+   * 预渲染的额外项目数
+   */
+  overscan?: number;
+
+  /**
+   * 是否启用动态高度
+   */
+  dynamicHeight?: boolean;
+
+  /**
+   * 滚动到指定索引
+   */
+  scrollToIndex?: number;
+
+  /**
+   * 滚动行为
+   */
+  scrollBehavior?: 'auto' | 'smooth';
+
+  /**
+   * 空状态渲染
+   */
+  empty?: ReactNode;
+
+  /**
+   * 加载状态渲染
+   */
+  loading?: ReactNode;
+
+  /**
+   * 是否正在加载
+   */
+  isLoading?: boolean;
+
+  /**
+   * 是否到达底部
+   */
+  onEndReached?: () => void;
+
+  /**
+   * 距离底部多少像素触发onEndReached
+   */
+  onEndReachedThreshold?: number;
+
+  /**
+   * 列表样式
+   */
+  style?: CSSProperties;
+
+  /**
+   * 列表类名
+   */
+  className?: string;
+
+  /**
+   * 项目样式
+   */
+  itemStyle?: CSSProperties;
+
+  /**
+   * 项目类名
+   */
+  itemClassName?: string;
+
+  /**
+   * 滚动事件回调
+   */
+  onScroll?: (scrollTop: number, scrollLeft: number) => void;
+}
+
+interface PositionItem {
+  top: number;
+  height: number;
+  bottom: number;
+  index: number;
+  data: any;
+}
+
+export const VirtualList = React.forwardRef<HTMLDivElement, VirtualListProps<any>>(
+  (props, ref) => {
+    const {
+      data,
+      renderItem,
+      itemHeight,
+      height,
+      width = '100%',
+      itemKey,
+      overscan = 3,
+      dynamicHeight = false,
+      scrollToIndex,
+      scrollBehavior = 'auto',
+      empty,
+      loading,
+      isLoading = false,
+      onEndReached,
+      onEndReachedThreshold = 200,
+      style,
+      className,
+      
+      itemClassName,
+      onScroll,
+    } = props;
+
+    const [scrollTop, setScrollTop] = useState(0);
+    
+    const [positions, setPositions] = useState<PositionItem[]>([]);
+
+    const containerRef = useRef<HTMLDivElement>(null);
+    const contentRef = useRef<HTMLDivElement>(null);
+    const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+    // 计算位置信息
+    const calculatePositions = useCallback(() => {
+      if (!dynamicHeight && typeof itemHeight === 'number') {
+        return data.map((item, index) => ({
+          top: index * itemHeight,
+          height: itemHeight,
+          bottom: (index + 1) * itemHeight,
+          index,
+          data: item,
+        }));
+      }
+
+      // 动态高度计算
+      const newPositions: PositionItem[] = [];
+      let top = 0;
+
+      data.forEach((item, index) => {
+        const height = typeof itemHeight === 'function' ? itemHeight(index) : itemHeight;
+        newPositions.push({
+          top,
+          height,
+          bottom: top + height,
+          index,
+          data: item,
+        });
+        top += height;
+      });
+
+      return newPositions;
+    }, [data, itemHeight, dynamicHeight]);
+
+    // 初始化位置
+    useEffect(() => {
+      setPositions(calculatePositions());
+    }, [calculatePositions]);
+
+    
+
+    // 计算可见范围
+    const visibleRange = useMemo(() => {
+      if (!positions.length) return { start: 0, end: 0 };
+
+      const containerHeight = typeof height === 'number' ? height : containerRef.current?.clientHeight || 0;
+      const startIndex = positions.findIndex(item => item.bottom > scrollTop);
+      const endIndex = positions.findIndex(item => item.top > scrollTop + containerHeight);
+
+      return {
+        start: Math.max(0, startIndex - overscan),
+        end: Math.min(positions.length - 1, endIndex + overscan),
+      };
+    }, [scrollTop, positions, height, overscan]);
+
+    // 总高度
+    const totalHeight = useMemo(() => {
+      if (!positions.length) return 0;
+      const lastItem = positions[positions.length - 1];
+      return lastItem ? lastItem.bottom : 0;
+    }, [positions]);
+
+    // 处理滚动
+    const handleScroll = useCallback(() => {
+      if (!containerRef.current) return;
+
+      const container = containerRef.current;
+      const newScrollTop = container.scrollTop;
+      const newScrollLeft = container.scrollLeft;
+
+      setScrollTop(newScrollTop);
+      
+
+      // 清除之前的超时
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+
+      // 设置新的超时
+      scrollTimeoutRef.current = setTimeout(() => {
+        scrollTimeoutRef.current = null;
+      }, 150);
+
+      // 触发滚动回调
+      onScroll?.(newScrollTop, newScrollLeft);
+
+      // 检查是否到达底部
+      if (onEndReached) {
+        const containerHeight = container.clientHeight;
+        const scrollHeight = container.scrollHeight;
+        const isNearBottom = scrollHeight - (newScrollTop + containerHeight) < onEndReachedThreshold;
+
+        if (isNearBottom && !isLoading) {
+          onEndReached();
+        }
+      }
+    }, [onEndReached, onEndReachedThreshold, isLoading, onScroll]);
+
+    // 滚动到指定索引
+    useEffect(() => {
+      if (scrollToIndex !== undefined && containerRef.current) {
+        const position = positions[scrollToIndex];
+        if (position) {
+          containerRef.current.scrollTo({
+            top: position.top,
+            behavior: scrollBehavior,
+          });
+        }
+      }
+    }, [scrollToIndex, positions, scrollBehavior]);
+
+    // 清理超时
+    useEffect(() => {
+      return () => {
+        if (scrollTimeoutRef.current) {
+          clearTimeout(scrollTimeoutRef.current);
+        }
+      };
+    }, []);
+
+    // 渲染项目
+    const renderItems = useCallback(() => {
+      if (!positions.length) return null;
+
+      const items: ReactNode[] = [];
+      const { start, end } = visibleRange;
+
+      for (let i = start; i <= end; i++) {
+        const position = positions[i];
+        if (!position) continue;
+
+        const key = typeof itemKey === 'function' ? itemKey(position.data, i) : position.data[itemKey];
+        const itemStyle: CSSProperties = {
+          position: 'absolute',
+          top: position.top,
+          left: 0,
+          width: '100%',
+          height: position.height,
+          ...props.itemStyle,
+        };
+
+        items.push(
+          <div
+            key={key}
+            className={itemClassName}
+            style={itemStyle}
+            data-index={i}
+          >
+            {renderItem(position.data, i)}
+          </div>
+        );
+      }
+
+      return items;
+    }, [positions, visibleRange, itemKey, renderItem, itemClassName, props.itemStyle]);
+
+    // 渲染内容
+    const renderContent = () => {
+      if (isLoading && data.length === 0) {
+        return loading || <div className="flex items-center justify-center h-full">加载中...</div>;
+      }
+
+      if (!isLoading && data.length === 0) {
+        return empty || <div className="flex items-center justify-center h-full">暂无数据</div>;
+      }
+
+      return (
+        <>
+          {renderItems()}
+          {isLoading && data.length > 0 && (
+            <div className="flex items-center justify-center p-4">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
+            </div>
+          )}
+        </>
+      );
+    };
+
+    return (
+      <div
+        ref={(node) => {
+          if (typeof ref === 'function') {
+            ref(node);
+          } else if (ref) {
+            ref.current = node;
+          }
+          containerRef.current = node;
+        }}
+        className={`relative overflow-auto ${className || ''}`}
+        style={{
+          height,
+          width,
+          ...style,
+        }}
+        onScroll={handleScroll}
+      >
+        <div
+          ref={contentRef}
+          style={{
+            height: totalHeight,
+            position: 'relative',
+          }}
+        >
+          {renderContent()}
+        </div>
+      </div>
+    );
+  }
+);
+
+VirtualList.displayName = 'VirtualList';
+
+export default VirtualList;

package/src/components/common/__tests__/ErrorBoundary.test.tsx

@@ -0,0 +1,249 @@
+/**
+ * ErrorBoundary 组件测试
+ */
+
+import React, { useState, useEffect } from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import { ErrorBoundary } from '../ErrorBoundary';
+
+// 模拟错误日志工具
+jest.mock('../../utils/errorLogger', () => ({
+  logError: jest.fn(),
+  logWarning: jest.fn(),
+  logInfo: jest.fn(),
+  getLogs: jest.fn(() => []),
+  clearLogs: jest.fn(),
+}));
+
+// 模拟Taro环境
+jest.mock('@tarojs/taro', () => ({
+  getSystemInfoSync: jest.fn(() => ({
+    windowWidth: 375,
+    windowHeight: 667,
+    statusBarHeight: 20,
+    safeArea: { top: 20, bottom: 0, left: 0, right: 375 }
+  }))
+}));
+
+describe('ErrorBoundary', () => {
+  beforeEach(() => {
+    // 清理所有模拟调用
+    jest.clearAllMocks();
+  });
+
+  it('应该正常渲染子组件', () => {
+    const ChildComponent = () => <div>Child Component</div>;
+    
+    const { getByText } = render(
+      <ErrorBoundary>
+        <ChildComponent />
+      </ErrorBoundary>
+    );
+    
+    expect(getByText('Child Component')).toBeInTheDocument();
+  });
+
+  it('应该捕获子组件中的错误并显示fallback UI', () => {
+    // 创建一个会抛出错误的组件
+    const ErrorComponent = () => {
+      throw new Error('Test error');
+    };
+    
+    const fallbackUI = <div>Something went wrong</div>;
+    
+    const { getByText } = render(
+      <ErrorBoundary fallback={fallbackUI}>
+        <ErrorComponent />
+      </ErrorBoundary>
+    );
+    
+    expect(getByText('Something went wrong')).toBeInTheDocument();
+  });
+
+  it('应该调用错误处理回调', () => {
+    const handleError = jest.fn();
+    
+    // 创建一个会抛出错误的组件
+    const ErrorComponent = () => {
+      throw new Error('Test error');
+    };
+    
+    render(
+      <ErrorBoundary onError={handleError}>
+        <ErrorComponent />
+      </ErrorBoundary>
+    );
+    
+    expect(handleError).toHaveBeenCalled();
+    expect(handleError.mock.calls[0][0]).toBeInstanceOf(Error);
+    expect(handleError.mock.calls[0][1]).toHaveProperty('componentStack');
+  });
+
+  it('应该记录错误到错误日志', () => {
+    const { logError } = require('../../utils/errorLogger');
+    
+    // 创建一个会抛出错误的组件
+    const ErrorComponent = () => {
+      throw new Error('Test error');
+    };
+    
+    render(
+      <ErrorBoundary>
+        <ErrorComponent />
+      </ErrorBoundary>
+    );
+    
+    expect(logError).toHaveBeenCalled();
+  });
+
+  it('应该重置错误状态当子组件变化时', () => {
+    const { container, rerender } = render(
+      <ErrorBoundary>
+        <div>Initial Component</div>
+      </ErrorBoundary>
+    );
+    
+    // 初始渲染应该正常
+    expect(container.textContent).toBe('Initial Component');
+    
+    // 渲染一个会抛出错误的组件
+    const ErrorComponent = () => {
+      throw new Error('Test error');
+    };
+    
+    rerender(
+      <ErrorBoundary>
+        <ErrorComponent />
+      </ErrorBoundary>
+    );
+    
+    // 应该显示错误fallback
+    expect(container.textContent).toContain('Something went wrong');
+    
+    // 渲染一个正常组件
+    const NormalComponent = () => <div>Recovered Component</div>;
+    
+    rerender(
+      <ErrorBoundary>
+        <NormalComponent />
+      </ErrorBoundary>
+    );
+    
+    // 应该恢复到正常渲染
+    expect(container.textContent).toBe('Recovered Component');
+  });
+
+  it('应该处理异步错误', async () => {
+    // 创建一个会异步抛出错误的组件
+    const AsyncErrorComponent = () => {
+      const [error, setError] = useState(false);
+      
+      useEffect(() => {
+        // 模拟异步操作
+        setTimeout(() => {
+          setError(true);
+        }, 100);
+      }, []);
+      
+      if (error) {
+        throw new Error('Async error');
+      }
+      
+      return <div>Loading...</div>;
+    };
+    
+    const { container } = render(
+      <ErrorBoundary>
+        <AsyncErrorComponent />
+      </ErrorBoundary>
+    );
+    
+    // 初始渲染应该正常
+    expect(container.textContent).toBe('Loading...');
+    
+    // 等待异步错误发生
+    // 注意：在真实测试中，你可能需要使用act或waitFor
+    // 这里简化处理，实际测试可能需要更复杂的设置
+  });
+
+  it('应该允许自定义fallback UI', () => {
+    // 创建一个会抛出错误的组件
+    const ErrorComponent = () => {
+      throw new Error('Test error');
+    };
+    
+    const CustomFallback = () => <div>Custom Error Message</div>;
+    
+    const { getByText } = render(
+      <ErrorBoundary fallback={<CustomFallback />}>
+        <ErrorComponent />
+      </ErrorBoundary>
+    );
+    
+    expect(getByText('Custom Error Message')).toBeInTheDocument();
+  });
+
+  it('应该处理嵌套错误边界', () => {
+    // 创建一个会抛出错误的组件
+    const ErrorComponent = () => {
+      throw new Error('Test error');
+    };
+    
+    const InnerFallback = () => <div>Inner Error</div>;
+    const OuterFallback = () => <div>Outer Error</div>;
+    
+    const { getByText } = render(
+      <ErrorBoundary fallback={<OuterFallback />}>
+        <div>
+          <ErrorBoundary fallback={<InnerFallback />}>
+            <ErrorComponent />
+          </ErrorBoundary>
+        </div>
+      </ErrorBoundary>
+    );
+    
+    // 内部错误边界应该捕获错误
+    expect(getByText('Inner Error')).toBeInTheDocument();
+    expect(() => getByText('Outer Error')).toThrow();
+  });
+
+  it('应该处理多个子组件中的错误', () => {
+    // 创建一个会抛出错误的组件
+    const ErrorComponent = () => {
+      throw new Error('Test error');
+    };
+    
+    // 创建一个正常组件
+    const NormalComponent = () => <div>Normal Component</div>;
+    
+    const { container } = render(
+      <ErrorBoundary>
+        <div>
+          <NormalComponent />
+          <ErrorComponent />
+          <NormalComponent />
+        </div>
+      </ErrorBoundary>
+    );
+    
+    // 整个边界应该显示fallback
+    expect(container.textContent).toContain('Something went wrong');
+    expect(container.textContent).not.toContain('Normal Component');
+  });
+
+  it('应该在没有fallback时使用默认错误UI', () => {
+    // 创建一个会抛出错误的组件
+    const ErrorComponent = () => {
+      throw new Error('Test error');
+    };
+    
+    const { container } = render(
+      <ErrorBoundary>
+        <ErrorComponent />
+      </ErrorBoundary>
+    );
+    
+    // 应该显示默认错误UI
+    expect(container.textContent).toContain('Something went wrong');
+  });
+});

package/src/components/common/index.tsx

@@ -0,0 +1,7 @@
+export * from './ErrorBoundary';
+export * from './LazyComponent';
+export * from './ResponsiveContainer';
+export * from './ResponsiveGrid';
+export * from './SecurityProvider';
+export * from './ThemeProvider';
+export * from './VirtualList';

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

@@ -0,0 +1,62 @@
+import { CSSProperties } from 'react';
+
+export const avatarStyles: Record<string, CSSProperties> = {
+  // 尺寸样式
+  small: {
+    width: 32,
+    height: 32,
+    fontSize: 14,
+  },
+  medium: {
+    width: 40,
+    height: 40,
+    fontSize: 16,
+  },
+  large: {
+    width: 64,
+    height: 64,
+    fontSize: 24,
+  },
+
+  // 形状样式
+  circle: {
+    borderRadius: '50%',
+    overflow: 'hidden',
+  },
+  square: {
+    borderRadius: 4,
+    overflow: 'hidden',
+  },
+
+  // 基础样式
+  base: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#f0f0f0',
+    color: '#666',
+    fontWeight: 500,
+    position: 'relative',
+  },
+
+  // 图片样式
+  image: {
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover',
+  },
+
+  // 图标样式
+  icon: {
+    fontSize: 'inherit',
+    color: 'inherit',
+  },
+
+  // 文字样式
+  text: {
+    fontSize: 'inherit',
+    color: 'inherit',
+    fontWeight: 'inherit',
+    userSelect: 'none',
+  },
+};