taro-uno-ui 1.0.0 → 1.0.2

package/src/components/common/VirtualList.tsx

@@ -1,350 +0,0 @@
-/**
- * 虚拟列表组件
- * 提供高性能的大数据量列表渲染
- */
-
-import React, { useRef, useEffect, useMemo, useCallback, useState, ReactNode, CSSProperties } from 'react';
-import { View, ScrollView } from '@tarojs/components';
-
-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<any, 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<any>(null);
-  const contentRef = useRef<any>(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(
-    (e: any) => {
-      const newScrollTop = e.detail.scrollTop;
-      const newScrollLeft = e.detail.scrollLeft;
-
-      setScrollTop(newScrollTop);
-
-      // 清除之前的超时
-      if (scrollTimeoutRef.current) {
-        clearTimeout(scrollTimeoutRef.current);
-      }
-
-      // 设置新的超时
-      scrollTimeoutRef.current = setTimeout(() => {
-        scrollTimeoutRef.current = null;
-      }, 150);
-
-      // 触发滚动回调
-      onScroll?.(newScrollTop, newScrollLeft);
-
-      // 检查是否到达底部
-      if (onEndReached) {
-        const containerHeight = typeof height === 'number' ? height : containerRef.current?.clientHeight || 0;
-        const isNearBottom = totalHeight - (newScrollTop + containerHeight) < onEndReachedThreshold;
-
-        if (isNearBottom && !isLoading) {
-          onEndReached();
-        }
-      }
-    },
-    [onEndReached, onEndReachedThreshold, isLoading, onScroll, height, totalHeight],
-  );
-
-  // 滚动到指定索引
-  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(
-        <View key={key} className={itemClassName} style={itemStyle} data-index={i}>
-          {renderItem(position.data, i)}
-        </View>,
-      );
-    }
-
-    return items;
-  }, [positions, visibleRange, itemKey, renderItem, itemClassName, props.itemStyle]);
-
-  // 渲染内容
-  const renderContent = () => {
-    if (isLoading && data.length === 0) {
-      return loading || <View className="flex items-center justify-center h-full">加载中...</View>;
-    }
-
-    if (!isLoading && data.length === 0) {
-      return empty || <View className="flex items-center justify-center h-full">暂无数据</View>;
-    }
-
-    return (
-      <>
-        {renderItems()}
-        {isLoading && data.length > 0 && (
-          <View className="flex items-center justify-center p-4">
-            <View className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></View>
-          </View>
-        )}
-      </>
-    );
-  };
-
-  return (
-    <ScrollView
-      ref={(node) => {
-        if (typeof ref === 'function') {
-          ref(node);
-        } else if (ref) {
-          ref.current = node;
-        }
-        containerRef.current = node;
-      }}
-      className={`relative ${className || ''}`}
-      style={{
-        height,
-        width,
-        ...style,
-      }}
-      onScroll={handleScroll}
-    >
-      <View
-        ref={contentRef}
-        style={{
-          height: totalHeight,
-          position: 'relative',
-        }}
-      >
-        {renderContent()}
-      </View>
-    </ScrollView>
-  );
-});
-
-VirtualList.displayName = 'VirtualList';
-
-export default VirtualList;

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

@@ -1,249 +0,0 @@
-/**
- * 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

@@ -1,32 +0,0 @@
-/**
- * Taro-Uno 通用组件库
- * 提供通用的功能组件，如错误边界、懒加载、响应式容器等
- */
-
-// 导出组件
-export * from './ErrorBoundary';
-export * from './LazyComponent';
-export * from './ResponsiveContainer';
-export * from './ResponsiveGrid';
-export * from './SecurityProvider';
-export * from './ThemeProvider';
-export * from './VirtualList';
-
-// 通用组件工具函数
-export const CommonComponentsUtils = {
-  /**
-   * 检查组件是否为通用组件
-   */
-  isCommonComponent: (componentName: string): boolean => {
-    const commonComponents = [
-      'ErrorBoundary',
-      'LazyComponent',
-      'ResponsiveContainer',
-      'ResponsiveGrid',
-      'SecurityProvider',
-      'ThemeProvider',
-      'VirtualList',
-    ];
-    return commonComponents.includes(componentName);
-  },
-};

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

@@ -1,62 +0,0 @@
-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',
-  },
-};