taro-uno-ui 0.9.0-beta

package/src/hooks/useTheme.ts

@@ -0,0 +1,347 @@
+import { useTheme as useThemeContext } from '../theme/ThemeProvider';
+import type { ThemeConfig, ThemeMode } from '../theme/types';
+
+/**
+ * 主题管理Hook
+ * 提供主题切换、样式获取等功能
+ */
+export const useTheme = () => {
+  const context = useThemeContext();
+
+  const { theme, themeMode, setThemeMode, toggleTheme, isDark } = context;
+
+  /**
+   * 获取主题颜色
+   * @param key 颜色键名
+   * @returns 颜色值
+   */
+  const getColor = (key: keyof ThemeConfig['colors']): string => {
+    return theme.colors[key];
+  };
+
+  /**
+   * 获取主题间距
+   * @param key 间距键名
+   * @returns 间距值(px)
+   */
+  const getSpacing = (key: keyof ThemeConfig['spacing']): number => {
+    const value = theme.spacing[key];
+    return typeof value === 'number' ? value : value.md || 8;
+  };
+
+  /**
+   * 获取主题字体配置
+   * @param key 字体键名
+   * @returns 字体配置
+   */
+  const getTypography = <T extends keyof ThemeConfig['typography']>(key: T): ThemeConfig['typography'][T] => {
+    return theme.typography[key];
+  };
+
+  /**
+   * 获取主题圆角
+   * @param key 圆角键名
+   * @returns 圆角值(px)
+   */
+  const getBorderRadius = (key: keyof ThemeConfig['borderRadius']): number => {
+    return theme.borderRadius[key];
+  };
+
+  /**
+   * 获取主题阴影
+   * @param key 阴影键名
+   * @returns 阴影CSS值
+   */
+  const getShadow = (key: keyof ThemeConfig['shadow']): string => {
+    return theme.shadow[key];
+  };
+
+  /**
+   * 获取主题动画配置
+   * @param key 动画键名
+   * @returns 动画配置
+   */
+  const getAnimation = <T extends keyof ThemeConfig['animation']>(key: T): ThemeConfig['animation'][T] => {
+    return theme.animation[key];
+  };
+
+  /**
+   * 生成CSS变量
+   * @returns CSS变量字符串
+   */
+  const generateCSSVariables = (): string => {
+    return `
+      :root {
+        --primary-color: ${theme.colors.primary};
+        --secondary-color: ${theme.colors.secondary};
+        --success-color: ${theme.colors.success};
+        --warning-color: ${theme.colors.warning};
+        --error-color: ${theme.colors.error};
+        --info-color: ${theme.colors.info};
+        --text-color: ${theme.colors.text};
+        --text-color-secondary: ${theme.colors.textSecondary};
+        --text-color-disabled: ${theme.colors.textDisabled};
+        --text-color-inverse: ${theme.colors.textInverse};
+        --background-color: ${theme.colors.background};
+        --background-card: ${theme.colors.backgroundCard};
+        --background-input: ${theme.colors.backgroundInput};
+        --background-mask: ${theme.colors.backgroundMask};
+        --border-color: ${theme.colors.border};
+        --border-light: ${theme.colors.borderLight};
+        --border-focus: ${theme.colors.borderFocus};
+        --shadow-color: ${theme.colors.shadow};
+        --shadow-light: ${theme.colors.shadowLight};
+        --brand-color: ${theme.colors.brand};
+        --accent-color: ${theme.colors.accent};
+        --link-color: ${theme.colors.link};
+        --divider-color: ${theme.colors.divider};
+        
+        /* 间距变量 */
+        --spacing-xs: ${theme.spacing.xs}px;
+        --spacing-sm: ${theme.spacing.sm}px;
+        --spacing-md: ${theme.spacing.md}px;
+        --spacing-lg: ${theme.spacing.lg}px;
+        --spacing-xl: ${theme.spacing.xl}px;
+        --spacing-xxl: ${theme.spacing.xxl}px;
+        
+        /* 圆角变量 */
+        --radius-none: ${theme.borderRadius.none}px;
+        --radius-sm: ${theme.borderRadius.sm}px;
+        --radius-md: ${theme.borderRadius.md}px;
+        --radius-lg: ${theme.borderRadius.lg}px;
+        --radius-xl: ${theme.borderRadius.xl}px;
+        --radius-full: ${theme.borderRadius.full}px;
+        
+        /* 字体变量 */
+        --font-size-xs: ${theme.typography.fontSize.xs}px;
+        --font-size-sm: ${theme.typography.fontSize.sm}px;
+        --font-size-base: ${theme.typography.fontSize.base}px;
+        --font-size-lg: ${theme.typography.fontSize.lg}px;
+        --font-size-xl: ${theme.typography.fontSize.xl}px;
+        --font-size-2xl: ${theme.typography.fontSize['2xl']}px;
+        --font-size-3xl: ${theme.typography.fontSize['3xl']}px;
+        --font-size-4xl: ${theme.typography.fontSize['4xl']}px;
+        --font-size-5xl: ${theme.typography.fontSize['5xl']}px;
+        
+        /* 动画变量 */
+        --duration-fast: ${theme.animation.duration.fast};
+        --duration-normal: ${theme.animation.duration.normal};
+        --duration-slow: ${theme.animation.duration.slow};
+        
+        --easing-linear: ${theme.animation.easing.linear};
+        --easing-ease: ${theme.animation.easing.ease};
+        --easing-ease-in: ${theme.animation.easing.easeIn};
+        --easing-ease-out: ${theme.animation.easing.easeOut};
+        --easing-ease-in-out: ${theme.animation.easing.easeInOut};
+      }
+    `;
+  };
+
+  /**
+   * 获取响应式断点样式
+   * @param breakpoint 断点名称
+   * @param styles 样式字符串
+   * @returns 媒体查询字符串
+   */
+  const getResponsiveStyle = (breakpoint: keyof ThemeConfig['spacing']['breakpoints'], styles: string): string => {
+    const breakpoints = theme.spacing.breakpoints;
+    return `@media (min-width: ${breakpoints[breakpoint]}px) { ${styles} }`;
+  };
+
+  /**
+   * 获取字体样式
+   * @param size 字体大小
+   * @param weight 字体粗细
+   * @param lineHeight 行高
+   * @returns 字体样式对象
+   */
+  const getFontStyle = (
+    size: keyof ThemeConfig['typography']['fontSize'] = 'base',
+    weight: keyof ThemeConfig['typography']['fontWeight'] = 'normal',
+    lineHeight: keyof ThemeConfig['typography']['lineHeight'] = 'normal',
+  ): React.CSSProperties => {
+    return {
+      fontSize: `${theme.typography.fontSize[size]}px`,
+      fontWeight: theme.typography.fontWeight[weight],
+      lineHeight: theme.typography.lineHeight[lineHeight],
+      fontFamily: theme.typography.fontFamily.sans.join(', '),
+    };
+  };
+
+  /**
+   * 获取间距样式
+   * @param spacing 间距值或键名
+   * @param property CSS属性名
+   * @returns 间距样式对象
+   */
+  const getSpacingStyle = (
+    spacing: number | keyof ThemeConfig['spacing'],
+    property: 'margin' | 'padding' | 'gap' = 'margin',
+  ): React.CSSProperties => {
+    const value = typeof spacing === 'number' ? spacing : theme.spacing[spacing];
+    return {
+      [property]: typeof value === 'number' ? `${value}px` : value,
+    };
+  };
+
+  /**
+   * 获取颜色样式
+   * @param color 颜色值或键名
+   * @param property CSS属性名
+   * @returns 颜色样式对象
+   */
+  const getColorStyle = (
+    color: string | keyof ThemeConfig['colors'],
+    property: 'color' | 'backgroundColor' | 'borderColor' = 'color',
+  ): React.CSSProperties => {
+    const value = typeof color === 'string' ? color : theme.colors[color];
+    return {
+      [property]: value,
+    };
+  };
+
+  /**
+   * 获取边框样式
+   * @param width 边框宽度
+   * @param color 边框颜色
+   * @param radius 边框圆角
+   * @returns 边框样式对象
+   */
+  const getBorderStyle = (
+    width: number = 1,
+    color: string | keyof ThemeConfig['colors'] = 'border',
+    radius: number | keyof ThemeConfig['borderRadius'] = 'md',
+  ): React.CSSProperties => {
+    const colorValue = typeof color === 'string' ? color : theme.colors[color];
+    const radiusValue = typeof radius === 'number' ? radius : theme.borderRadius[radius];
+
+    return {
+      border: `${width}px solid ${colorValue}`,
+      borderRadius: `${radiusValue}px`,
+    };
+  };
+
+  /**
+   * 获取阴影样式
+   * @param shadow 阴影键名
+   * @returns 阴影样式对象
+   */
+  const getShadowStyle = (shadow: keyof ThemeConfig['shadow'] = 'md'): React.CSSProperties => {
+    return {
+      boxShadow: theme.shadow[shadow],
+    };
+  };
+
+  /**
+   * 获取动画样式
+   * @param duration 动画时长
+   * @param easing 动画缓动
+   * @returns 动画样式对象
+   */
+  const getAnimationStyle = (
+    duration: keyof ThemeConfig['animation']['duration'] = 'normal',
+    easing: keyof ThemeConfig['animation']['easing'] = 'ease',
+  ): React.CSSProperties => {
+    return {
+      transition: `all ${theme.animation.duration[duration]} ${theme.animation.easing[easing]}`,
+    };
+  };
+
+  /**
+   * 创建样式生成器
+   * @returns 样式生成器对象
+   */
+  const createStyleGenerator = () => {
+    return {
+      // 基础样式
+      font: (
+        size?: keyof ThemeConfig['typography']['fontSize'],
+        weight?: keyof ThemeConfig['typography']['fontWeight'],
+        lineHeight?: keyof ThemeConfig['typography']['lineHeight'],
+      ) => getFontStyle(size, weight, lineHeight),
+
+      spacing: (spacing: number | keyof ThemeConfig['spacing'], property?: 'margin' | 'padding' | 'gap') =>
+        getSpacingStyle(spacing, property),
+
+      color: (color: string | keyof ThemeConfig['colors'], property?: 'color' | 'backgroundColor' | 'borderColor') =>
+        getColorStyle(color, property),
+
+      border: (
+        width?: number,
+        color?: string | keyof ThemeConfig['colors'],
+        radius?: number | keyof ThemeConfig['borderRadius'],
+      ) => getBorderStyle(width, color, radius),
+
+      shadow: (shadow?: keyof ThemeConfig['shadow']) => getShadowStyle(shadow),
+
+      animation: (
+        duration?: keyof ThemeConfig['animation']['duration'],
+        easing?: keyof ThemeConfig['animation']['easing'],
+      ) => getAnimationStyle(duration, easing),
+
+      // 布局样式
+      flex: (direction: 'row' | 'column' = 'row', justify?: string, align?: string) => ({
+        display: 'flex',
+        flexDirection: direction,
+        justifyContent: justify,
+        alignItems: align,
+      }),
+
+      grid: (columns: number, gap?: number) => ({
+        display: 'grid',
+        gridTemplateColumns: `repeat(${columns}, 1fr)`,
+        gap: gap ? `${gap}px` : `${theme.spacing.gap}px`,
+      }),
+
+      position: (type: 'relative' | 'absolute' | 'fixed' | 'sticky', top?: number, left?: number) => ({
+        position: type,
+        top: top ? `${top}px` : undefined,
+        left: left ? `${left}px` : undefined,
+      }),
+
+      // 响应式样式
+      responsive: (breakpoint: keyof ThemeConfig['spacing']['breakpoints'], styles: React.CSSProperties) => ({
+        [`@media (min-width: ${theme.spacing.breakpoints[breakpoint]}px)`]: styles,
+      }),
+    };
+  };
+
+  return {
+    // 主题配置
+    theme,
+    themeMode,
+    isDark,
+
+    // 主题操作
+    setThemeMode,
+    toggleTheme,
+
+    // 样式获取方法
+    getColor,
+    getSpacing,
+    getTypography,
+    getBorderRadius,
+    getShadow,
+    getAnimation,
+
+    // 样式生成方法
+    generateCSSVariables,
+    getResponsiveStyle,
+    getFontStyle,
+    getSpacingStyle,
+    getColorStyle,
+    getBorderStyle,
+    getShadowStyle,
+    getAnimationStyle,
+
+    // 样式生成器
+    createStyleGenerator,
+  };
+};
+
+export default useTheme;
+
+/**
+ * 主题相关类型定义
+ */
+export type { ThemeConfig, ThemeMode };

package/src/hooks/useVirtualScroll.ts

@@ -0,0 +1,331 @@
+/**
+ * 虚拟滚动 Hook
+ * 用于优化长列表渲染性能
+ */
+
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+
+export interface VirtualScrollItem {
+  id: string | number;
+  height: number;
+  data: unknown;
+}
+
+export interface VirtualScrollOptions {
+  // 容器高度
+  containerHeight: number;
+  // 项目高度（固定高度）
+  itemHeight?: number;
+  // 预渲染的项目数量
+  overscanCount?: number;
+  // 容器滚动元素
+  scrollElement?: HTMLElement | null;
+  // 是否启用动态高度
+  dynamicHeight?: boolean;
+  // 缓冲区大小
+  bufferSize?: number;
+  // 初始滚动位置
+  initialScrollTop?: number;
+  // 滚动回调
+  onScroll?: (scrollTop: number) => void;
+  // 渲染回调
+  onRender?: (visibleItems: VirtualScrollItem[]) => void;
+}
+
+export interface VirtualScrollResult {
+  // 可见项目
+  visibleItems: VirtualScrollItem[];
+  // 滚动位置
+  scrollTop: number;
+  // 总高度
+  totalHeight: number;
+  // 开始索引
+  startIndex: number;
+  // 结束索引
+  endIndex: number;
+  // 滚动到指定位置
+  scrollToIndex: (index: number) => void;
+  // 滚动到指定位置
+  scrollToPosition: (position: number) => void;
+  // 更新项目高度
+  updateItemHeight: (index: number, height: number) => void;
+  // 获取项目位置
+  getItemPosition: (index: number) => { top: number; height: number };
+  // 重新计算布局
+  recalculateLayout: () => void;
+}
+
+const defaultOptions: Required<VirtualScrollOptions> = {
+  containerHeight: 400,
+  itemHeight: 50,
+  overscanCount: 3,
+  scrollElement: null,
+  dynamicHeight: false,
+  bufferSize: 5,
+  initialScrollTop: 0,
+  onScroll: () => {},
+  onRender: () => {},
+};
+
+/**
+ * 虚拟滚动 Hook
+ * @param options 虚拟滚动选项
+ * @returns 虚拟滚动结果
+ */
+export function useVirtualScroll(items: VirtualScrollItem[], options: VirtualScrollOptions): VirtualScrollResult {
+  const config = { ...defaultOptions, ...options };
+
+  const [scrollTop, setScrollTop] = useState(config.initialScrollTop);
+  const [itemHeights, setItemHeights] = useState<Record<number, number>>({});
+  const containerRef = useRef<HTMLElement>(null);
+  const resizeObserverRef = useRef<ResizeObserver | null>(null);
+  const lastScrollTimeRef = useRef<number>(0);
+  const isScrollingRef = useRef<boolean>(false);
+  const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // 计算总高度
+  const totalHeight = useMemo(() => {
+    if (config.dynamicHeight) {
+      return Object.values(itemHeights).reduce((sum, height) => sum + height, 0);
+    }
+    return items.length * config.itemHeight;
+  }, [items.length, config.itemHeight, config.dynamicHeight, itemHeights]);
+
+  // 计算可见项目范围
+  const { startIndex, endIndex, visibleItems } = useMemo(() => {
+    if (config.dynamicHeight) {
+      return calculateDynamicRange(items, itemHeights, scrollTop, config);
+    }
+    return calculateFixedRange(items, config.itemHeight, scrollTop, config);
+  }, [items, scrollTop, config, itemHeights]);
+
+  // 固定高度范围计算
+  const calculateFixedRange = (
+    items: VirtualScrollItem[],
+    itemHeight: number,
+    scrollTop: number,
+    config: Required<VirtualScrollOptions>,
+  ) => {
+    const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - config.overscanCount);
+    const endIndex = Math.min(
+      items.length - 1,
+      Math.ceil((scrollTop + config.containerHeight) / itemHeight) + config.overscanCount,
+    );
+
+    const visibleItems = items.slice(startIndex, endIndex + 1).map((item, _index) => ({
+      ...item,
+      height: itemHeight,
+      data: item.data,
+    }));
+
+    return { startIndex, endIndex, visibleItems };
+  };
+
+  // 动态高度范围计算
+  const calculateDynamicRange = (
+    items: VirtualScrollItem[],
+    itemHeights: Record<number, number>,
+    scrollTop: number,
+    config: Required<VirtualScrollOptions>,
+  ) => {
+    let startIndex = 0;
+    let endIndex = items.length - 1;
+    let currentTop = 0;
+
+    // 找到起始位置
+    for (let i = 0; i < items.length; i++) {
+      const height = itemHeights[i] || config.itemHeight;
+      if (currentTop + height > scrollTop) {
+        startIndex = Math.max(0, i - config.overscanCount);
+        break;
+      }
+      currentTop += height;
+    }
+
+    // 找到结束位置
+    let visibleHeight = 0;
+    for (let i = startIndex; i < items.length; i++) {
+      const height = itemHeights[i] || config.itemHeight;
+      visibleHeight += height;
+
+      if (visibleHeight > config.containerHeight + config.overscanCount * config.itemHeight) {
+        endIndex = Math.min(items.length - 1, i + config.overscanCount);
+        break;
+      }
+    }
+
+    const visibleItems = items.slice(startIndex, endIndex + 1).map((item, index) => ({
+      ...item,
+      height: itemHeights[startIndex + index] || config.itemHeight,
+      data: item.data,
+    }));
+
+    return { startIndex, endIndex, visibleItems };
+  };
+
+  // 获取项目位置
+  const getItemPosition = useCallback(
+    (index: number) => {
+      if (config.dynamicHeight) {
+        let top = 0;
+        for (let i = 0; i < index; i++) {
+          top += itemHeights[i] || config.itemHeight;
+        }
+        return {
+          top,
+          height: itemHeights[index] || config.itemHeight,
+        };
+      }
+      return {
+        top: index * config.itemHeight,
+        height: config.itemHeight,
+      };
+    },
+    [config.itemHeight, config.dynamicHeight, itemHeights],
+  );
+
+  // 滚动到指定索引
+  const scrollToIndex = useCallback(
+    (index: number) => {
+      const position = getItemPosition(index);
+      const container = config.scrollElement || containerRef.current;
+      if (container) {
+        container.scrollTop = position.top;
+        setScrollTop(position.top);
+      }
+    },
+    [config.scrollElement, getItemPosition],
+  );
+
+  // 滚动到指定位置
+  const scrollToPosition = useCallback(
+    (position: number) => {
+      const container = config.scrollElement || containerRef.current;
+      if (container) {
+        container.scrollTop = position;
+        setScrollTop(position);
+      }
+    },
+    [config.scrollElement],
+  );
+
+  // 更新项目高度
+  const updateItemHeight = useCallback(
+    (index: number, height: number) => {
+      if (!config.dynamicHeight) return;
+
+      setItemHeights((prev) => ({
+        ...prev,
+        [index]: height,
+      }));
+    },
+    [config.dynamicHeight],
+  );
+
+  // 重新计算布局
+  const recalculateLayout = useCallback(() => {
+    // 触发重新渲染
+    setScrollTop((prev) => prev);
+  }, []);
+
+  // 处理滚动事件
+  const handleScroll = useCallback(
+    (event: Event) => {
+      const target = event.target as HTMLElement;
+      const currentScrollTop = target.scrollTop;
+      const currentTime = performance.now();
+
+      // 防抖处理
+      if (currentTime - lastScrollTimeRef.current > 16) {
+        // 60fps
+        setScrollTop(currentScrollTop);
+        config.onScroll(currentScrollTop);
+        lastScrollTimeRef.current = currentTime;
+      }
+
+      // 设置滚动状态
+      isScrollingRef.current = true;
+
+      // 清除之前的超时
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+
+      // 设置新的超时
+      scrollTimeoutRef.current = setTimeout(() => {
+        isScrollingRef.current = false;
+      }, 150);
+    },
+    [config],
+  );
+
+  // 设置滚动监听
+  useEffect(() => {
+    const container = config.scrollElement || containerRef.current;
+    if (!container) return;
+
+    container.addEventListener('scroll', handleScroll, { passive: true });
+
+    return () => {
+      container.removeEventListener('scroll', handleScroll);
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+    };
+  }, [config.scrollElement, handleScroll]);
+
+  // 初始化高度数据
+  useEffect(() => {
+    if (config.dynamicHeight) {
+      const heights: Record<number, number> = {};
+      items.forEach((item, index) => {
+        heights[index] = item.height || config.itemHeight;
+      });
+      setItemHeights(heights);
+    }
+  }, [items, config.dynamicHeight, config.itemHeight]);
+
+  // 设置 ResizeObserver 监听容器大小变化
+  useEffect(() => {
+    if (!config.dynamicHeight) return;
+
+    const container = config.scrollElement || containerRef.current;
+    if (!container) return;
+
+    resizeObserverRef.current = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.target === container) {
+          recalculateLayout();
+        }
+      }
+    });
+
+    resizeObserverRef.current.observe(container);
+
+    return () => {
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+      }
+    };
+  }, [config.dynamicHeight, config.scrollElement, recalculateLayout]);
+
+  // 渲染回调
+  useEffect(() => {
+    config.onRender(visibleItems);
+  }, [visibleItems, config]);
+
+  return {
+    visibleItems,
+    scrollTop,
+    totalHeight,
+    startIndex,
+    endIndex,
+    scrollToIndex,
+    scrollToPosition,
+    updateItemHeight,
+    getItemPosition,
+    recalculateLayout,
+  };
+}
+
+export default useVirtualScroll;