taro-uno-ui 0.9.0 → 1.0.0

package/src/components/common/ThemeProvider.tsx

@@ -22,7 +22,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children, defaultT
   const [theme, setTheme] = useState<'light' | 'dark' | 'auto'>(defaultTheme);
   const platform = usePlatform();
 
-  const isDark = theme === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : theme === 'dark';
+  const isDark = theme === 'auto' ? (typeof window !== 'undefined' && window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)').matches : false) : theme === 'dark';
 
   useEffect(() => {
     const root = document.documentElement;
@@ -32,65 +32,52 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children, defaultT
       root.classList.remove('dark');
     }
 
-    // Set CSS vars from design tokens
-    Object.entries(designTokens.colors).forEach(([key, value]) => {
-      if (typeof value === 'string') {
-        root.style.setProperty(`--color-${key}`, value);
-      } else if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
-        Object.entries(value).forEach(([subkey, subvalue]) => {
-          root.style.setProperty(`--color-${key}-${subkey}`, subvalue as string);
-        });
-      }
-    });
-
-    Object.entries(designTokens.spacing).forEach(([key, value]) => {
-      root.style.setProperty(`--spacing-${key}`, `${value}px`);
-    });
+    // Helper function to set CSS variables recursively
+    const setCssVars = (prefix: string, obj: any, parentKey?: string) => {
+      Object.entries(obj).forEach(([key, value]) => {
+        const fullKey = parentKey ? `${prefix}-${parentKey}-${key}` : `${prefix}-${key}`;
+        
+        if (typeof value === 'string' || typeof value === 'number') {
+          // Only add px suffix for numeric values that are not typography values
+          const valueWithUnit = typeof value === 'number' && prefix !== '--typography' ? `${value}px` : `${value}`;
+          root.style.setProperty(fullKey, valueWithUnit);
+        } else if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+          // Recursively process nested objects
+          setCssVars(prefix, value, parentKey ? `${parentKey}-${key}` : key);
+        } else if (Array.isArray(value)) {
+          // Join array values with comma
+          root.style.setProperty(fullKey, value.join(', '));
+        }
+      });
+    };
 
-    Object.entries(designTokens.typography).forEach(([key, value]) => {
-      const fullKey = `--typography-${key}`;
-      if (typeof value === 'string') {
-        root.style.setProperty(fullKey, value);
-      } else if (Array.isArray(value)) {
-        root.style.setProperty(fullKey, value.join(', '));
-      } else if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
-        Object.entries(value).forEach(([subkey, subvalue]) => {
-          const subFullKey = `--typography-${key}-${subkey}`;
-          if (typeof subvalue === 'string') {
-            root.style.setProperty(subFullKey, subvalue);
-          } else if (Array.isArray(subvalue)) {
-            root.style.setProperty(subFullKey, subvalue.join(', '));
-          } else if (typeof subvalue === 'object' && subvalue !== null) {
-            Object.entries(subvalue).forEach(([subsubkey, subsubvalue]) => {
-              root.style.setProperty(`--typography-${key}-${subkey}-${subsubkey}`, subsubvalue as string);
-            });
-          }
-        });
-      }
-    });
+    // Set CSS vars from design tokens
+    setCssVars('--color', designTokens.colors);
+    setCssVars('--spacing', designTokens.spacing);
+    setCssVars('--typography', designTokens.typography);
 
     // Dark mode overrides
     if (isDark) {
-      root.style.setProperty('--colors-text-primary', '#f9fafb');
-      root.style.setProperty('--colors-text-secondary', '#d1d5db');
-      root.style.setProperty('--colors-text-tertiary', '#9ca3af');
-      root.style.setProperty('--colors-text-disabled', '#6b7280');
-      root.style.setProperty('--colors-text-inverse', '#111827');
-      root.style.setProperty('--colors-text-placeholder', '#6b7280');
-      root.style.setProperty('--colors-background-primary', '#111827');
-      root.style.setProperty('--colors-background-secondary', '#1f2937');
-      root.style.setProperty('--colors-background-tertiary', '#374151');
-      root.style.setProperty('--colors-background-card', '#1f2937');
-      root.style.setProperty('--colors-background-input', '#374151');
-      root.style.setProperty('--colors-background-mask', 'rgba(0, 0, 0, 0.8)');
-      root.style.setProperty('--colors-background-hover', '#374151');
-      root.style.setProperty('--colors-background-active', '#4b5563');
-      root.style.setProperty('--colors-border-default', '#374151');
-      root.style.setProperty('--colors-border-light', '#4b5563');
-      root.style.setProperty('--colors-shadow-default', 'rgba(0, 0, 0, 0.3)');
-      root.style.setProperty('--colors-shadow-light', 'rgba(0, 0, 0, 0.1)');
-      root.style.setProperty('--colors-shadow-medium', 'rgba(0, 0, 0, 0.4)');
-      root.style.setProperty('--colors-shadow-dark', 'rgba(0, 0, 0, 0.5)');
+      root.style.setProperty('--color-text-primary', '#f9fafb');
+      root.style.setProperty('--color-text-secondary', '#d1d5db');
+      root.style.setProperty('--color-text-tertiary', '#9ca3af');
+      root.style.setProperty('--color-text-disabled', '#6b7280');
+      root.style.setProperty('--color-text-inverse', '#111827');
+      root.style.setProperty('--color-text-placeholder', '#6b7280');
+      root.style.setProperty('--color-background-primary', '#111827');
+      root.style.setProperty('--color-background-secondary', '#1f2937');
+      root.style.setProperty('--color-background-tertiary', '#374151');
+      root.style.setProperty('--color-background-card', '#1f2937');
+      root.style.setProperty('--color-background-input', '#374151');
+      root.style.setProperty('--color-background-mask', 'rgba(0, 0, 0, 0.8)');
+      root.style.setProperty('--color-background-hover', '#374151');
+      root.style.setProperty('--color-background-active', '#4b5563');
+      root.style.setProperty('--color-border-default', '#374151');
+      root.style.setProperty('--color-border-light', '#4b5563');
+      root.style.setProperty('--color-shadow-default', 'rgba(0, 0, 0, 0.3)');
+      root.style.setProperty('--color-shadow-light', 'rgba(0, 0, 0, 0.1)');
+      root.style.setProperty('--color-shadow-medium', 'rgba(0, 0, 0, 0.4)');
+      root.style.setProperty('--color-shadow-dark', 'rgba(0, 0, 0, 0.5)');
     }
 
     // Platform specific adjustments

package/src/components/common/VirtualList.tsx

@@ -3,15 +3,8 @@
  * 提供高性能的大数据量列表渲染
  */
 
-import React, {
-  useRef,
-  useEffect,
-  useMemo,
-  useCallback,
-  useState,
-  ReactNode,
-  CSSProperties,
-} from 'react';
+import React, { useRef, useEffect, useMemo, useCallback, useState, ReactNode, CSSProperties } from 'react';
+import { View, ScrollView } from '@tarojs/components';
 
 export interface VirtualListProps<T = any> {
   /**
@@ -123,108 +116,102 @@ interface PositionItem {
   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;
+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]);
+    return newPositions;
+  }, [data, itemHeight, dynamicHeight]);
 
-    
+  // 初始化位置
+  useEffect(() => {
+    setPositions(calculatePositions());
+  }, [calculatePositions]);
 
-    // 计算可见范围
-    const visibleRange = useMemo(() => {
-      if (!positions.length) return { start: 0, end: 0 };
+  // 计算可见范围
+  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);
+    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]);
+    return {
+      start: Math.max(0, startIndex - overscan),
+      end: Math.min(positions.length - 1, endIndex + overscan),
+    };
+  }, [scrollTop, positions, height, overscan]);
 
-    // 处理滚动
-    const handleScroll = useCallback(() => {
-      if (!containerRef.current) return;
+  // 总高度
+  const totalHeight = useMemo(() => {
+    if (!positions.length) return 0;
+    const lastItem = positions[positions.length - 1];
+    return lastItem ? lastItem.bottom : 0;
+  }, [positions]);
 
-      const container = containerRef.current;
-      const newScrollTop = container.scrollTop;
-      const newScrollLeft = container.scrollLeft;
+  // 处理滚动
+  const handleScroll = useCallback(
+    (e: any) => {
+      const newScrollTop = e.detail.scrollTop;
+      const newScrollLeft = e.detail.scrollLeft;
 
       setScrollTop(newScrollTop);
-      
 
       // 清除之前的超时
       if (scrollTimeoutRef.current) {
@@ -241,127 +228,122 @@ export const VirtualList = React.forwardRef<HTMLDivElement, VirtualListProps<any
 
       // 检查是否到达底部
       if (onEndReached) {
-        const containerHeight = container.clientHeight;
-        const scrollHeight = container.scrollHeight;
-        const isNearBottom = scrollHeight - (newScrollTop + containerHeight) < onEndReachedThreshold;
+        const containerHeight = typeof height === 'number' ? height : containerRef.current?.clientHeight || 0;
+        const isNearBottom = totalHeight - (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,
-          });
-        }
+    },
+    [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;
+    }
+  }, [scrollToIndex, positions, scrollBehavior]);
 
-      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>
-        );
+  // 清理超时
+  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,
+      };
 
-      return items;
-    }, [positions, visibleRange, itemKey, renderItem, itemClassName, props.itemStyle]);
+      items.push(
+        <View key={key} className={itemClassName} style={itemStyle} data-index={i}>
+          {renderItem(position.data, i)}
+        </View>,
+      );
+    }
 
-    // 渲染内容
-    const renderContent = () => {
-      if (isLoading && data.length === 0) {
-        return loading || <div className="flex items-center justify-center h-full">加载中...</div>;
-      }
+    return items;
+  }, [positions, visibleRange, itemKey, renderItem, itemClassName, props.itemStyle]);
 
-      if (!isLoading && data.length === 0) {
-        return empty || <div className="flex items-center justify-center h-full">暂无数据</div>;
-      }
+  // 渲染内容
+  const renderContent = () => {
+    if (isLoading && data.length === 0) {
+      return loading || <View className="flex items-center justify-center h-full">加载中...</View>;
+    }
 
-      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>
-          )}
-        </>
-      );
-    };
+    if (!isLoading && data.length === 0) {
+      return empty || <View className="flex items-center justify-center h-full">暂无数据</View>;
+    }
 
     return (
-      <div
-        ref={(node) => {
-          if (typeof ref === 'function') {
-            ref(node);
-          } else if (ref) {
-            ref.current = node;
-          }
-          containerRef.current = node;
-        }}
-        className={`relative overflow-auto ${className || ''}`}
+      <>
+        {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,
-          width,
-          ...style,
+          height: totalHeight,
+          position: 'relative',
         }}
-        onScroll={handleScroll}
       >
-        <div
-          ref={contentRef}
-          style={{
-            height: totalHeight,
-            position: 'relative',
-          }}
-        >
-          {renderContent()}
-        </div>
-      </div>
-    );
-  }
-);
+        {renderContent()}
+      </View>
+    </ScrollView>
+  );
+});
 
 VirtualList.displayName = 'VirtualList';
 

package/src/components/common/index.tsx

@@ -1,3 +1,9 @@
+/**
+ * Taro-Uno 通用组件库
+ * 提供通用的功能组件，如错误边界、懒加载、响应式容器等
+ */
+
+// 导出组件
 export * from './ErrorBoundary';
 export * from './LazyComponent';
 export * from './ResponsiveContainer';
@@ -5,3 +11,22 @@ 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

@@ -59,4 +59,4 @@ export const avatarStyles: Record<string, CSSProperties> = {
     fontWeight: 'inherit',
     userSelect: 'none',
   },
-};
+};

package/src/components/display/Avatar/Avatar.tsx

@@ -7,18 +7,7 @@ import { avatarStyles } from './Avatar.styles';
 const { bem } = createNamespace('avatar');
 
 export const Avatar = forwardRef<AvatarRef, AvatarProps>((props, ref) => {
-  const {
-    src,
-    alt,
-    size = 'medium',
-    shape = 'circle',
-    icon,
-    children,
-    style,
-    className,
-    onClick,
-    ...rest
-  } = props;
+  const { src, alt, size = 'medium', shape = 'circle', icon, children, style, className, onClick, ...rest } = props;
 
   const handleClick = (event: any) => {
     onClick?.(event);
@@ -43,16 +32,14 @@ export const Avatar = forwardRef<AvatarRef, AvatarProps>((props, ref) => {
     }
 
     if (children) {
-      return (
-        <Text className={bem('text')}>
-          {children}
-        </Text>
-      );
+      return <Text className={bem('text')}>{children}</Text>;
     }
 
     return (
       <Text className={bem('text')}>
-        {String(alt || 'U').charAt(0).toUpperCase()}
+        {String(alt || 'U')
+          .charAt(0)
+          .toUpperCase()}
       </Text>
     );
   };
@@ -76,4 +63,4 @@ export const Avatar = forwardRef<AvatarRef, AvatarProps>((props, ref) => {
 
 Avatar.displayName = 'Avatar';
 
-export default Avatar;
+export default Avatar;

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

@@ -37,4 +37,4 @@ export interface AvatarRef {
 }
 
 export type AvatarSize = 'small' | 'medium' | 'large' | number;
-export type AvatarShape = 'circle' | 'square';
+export type AvatarShape = 'circle' | 'square';

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

@@ -1,3 +1,3 @@
 export { Avatar } from './Avatar';
 export type { AvatarProps, AvatarRef, AvatarSize, AvatarShape } from './Avatar.types';
-export { avatarStyles } from './Avatar.styles';
+export { avatarStyles } from './Avatar.styles';