taro-uno-ui 0.9.0-beta

package/src/components/basic/index.tsx

@@ -0,0 +1,302 @@
+/**
+ * Taro-Uno 基础组件库
+ * 提供最基础的 UI 组件，包括按钮、图标、文本和分割线
+ */
+
+// 导入组件用于默认导出
+import { Button } from './Button';
+import { Icon } from './Icon';
+import { Text } from './Text';
+import { Divider } from './Divider';
+import { Typography } from './Typography';
+
+// 导出 Button 组件
+export { Button } from './Button';
+export type {
+  ButtonProps,
+  ButtonRef,
+} from './Button/Button.types';
+export { buttonStyles } from './Button/Button.styles';
+
+// 导出 Icon 组件
+export { Icon } from './Icon';
+export type {
+  IconProps,
+  IconRef,
+  IconGroupProps,
+  IconUtils,
+  IconType,
+  IconSource,
+  IconSize,
+  IconColor,
+  IconRotation,
+  IconStatus,
+  IconTheme,
+  IconNativeProps,
+  IconSet,
+  IconLibraryConfig,
+} from './Icon/Icon.types';
+export { iconStyles } from './Icon/Icon.styles';
+
+// 导出 Text 组件
+export { Text } from './Text';
+export type {
+  TextProps,
+  TextRef,
+  TextUtils,
+  TextSize,
+  TextWeight,
+  TextAlign,
+  TextDecoration,
+  TextTransform,
+  TextOverflow,
+  TextDirection,
+  TextStyle,
+  TextVariant,
+  LetterSpacing,
+  LineHeight,
+  TextColor,
+  TextStatus,
+  TextType,
+  TextNativeProps,
+  TypewriterProps,
+  TextGradientProps,
+} from './Text/Text.types';
+export { textStyles } from './Text/Text.styles';
+
+// 导出 Divider 组件
+export { Divider } from './Divider';
+export type {
+  DividerProps,
+  DividerRef,
+  DividerGroupProps,
+  DividerUtils,
+  DividerOrientation,
+  DividerType,
+  DividerPosition,
+  DividerSize,
+  DividerColor,
+  DividerVariant,
+  DividerNativeProps,
+  VerticalDividerProps,
+  TextDividerProps,
+  AnimatedDividerProps,
+  DividerPreset,
+} from './Divider/Divider.types';
+
+// 导出 Typography 组件
+export { Typography } from './Typography';
+export type {
+  TypographyProps,
+  TypographyRef,
+  TypographySize,
+  TypographyColor,
+  TypographyWeight,
+  TypographyUtils,
+  TypographyNativeProps,
+  TitleProps,
+  ParagraphProps,
+  TypographyTextProps,
+  LinkProps,
+} from './Typography/Typography.types';
+export { calculateTypographyStyles, typographyStyles } from './Typography/Typography.styles';
+
+// 基础组件类型定义
+export interface BasicComponents {
+  Button: typeof Button;
+  Icon: typeof Icon;
+  Text: typeof Text;
+  Divider: typeof Divider;
+  Typography: typeof Typography;
+}
+
+// 基础组件工具类型
+export type BasicComponentProps = 
+  | import('./Button/Button.types').ButtonProps 
+  | import('./Icon/Icon.types').IconProps 
+  | import('./Text/Text.types').TextProps 
+  | import('./Divider/Divider.types').DividerProps 
+  | import('./Typography/Typography.types').TypographyProps;
+
+export type BasicComponentRef = 
+  | import('./Button/Button.types').ButtonRef 
+  | import('./Icon/Icon.types').IconRef 
+  | import('./Text/Text.types').TextRef 
+  | import('./Divider/Divider.types').DividerRef 
+  | import('./Typography/Typography.types').TypographyRef;
+
+// 基础组件工具函数
+export const BasicComponentsUtils = {
+  /**
+   * 判断是否为基础组件属性
+   */
+  isBasicComponentProps: (props: any): props is BasicComponentProps => {
+    return (
+      props && ('size' in props || 'color' in props || 'variant' in props || 'source' in props || 'children' in props)
+    );
+  },
+
+  /**
+   * 获取组件类型
+   */
+  getComponentType: (props: BasicComponentProps): string => {
+    if ('source' in props) return 'Icon';
+    if ('variant' in props && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span'].includes(props.variant as string)) return 'Typography';
+    if ('children' in props && typeof props.children === 'string') return 'Text';
+    if ('type' in props && ['solid', 'outline', 'ghost', 'text'].includes(props.type as string)) return 'Button';
+    return 'Divider';
+  },
+
+  /**
+   * 获取组件默认样式
+   */
+  getDefaultStyles: (componentType: string): React.CSSProperties => {
+    switch (componentType) {
+      case 'Button':
+        return {
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          borderRadius: '8px',
+          padding: '16px 24px',
+          fontSize: '16px',
+          fontWeight: '500',
+          border: '1px solid transparent',
+          cursor: 'pointer',
+          transition: 'all 0.2s ease-in-out',
+        };
+      case 'Icon':
+        return {
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '24px',
+          height: '24px',
+          fontSize: '24px',
+          color: 'currentColor',
+        };
+      case 'Text':
+        return {
+          display: 'inline',
+          fontSize: '16px',
+          lineHeight: '1.5',
+          color: 'inherit',
+          wordWrap: 'break-word',
+        };
+      case 'Divider':
+        return {
+          display: 'block',
+          width: '100%',
+          height: '1px',
+          backgroundColor: '#e5e7eb',
+          margin: '16px 0',
+        };
+      case 'Typography':
+        return {
+          display: 'block',
+          margin: 0,
+          padding: 0,
+          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+          lineHeight: 1.5,
+          color: '#1f2937',
+        };
+      default:
+        return {};
+    }
+  },
+
+  /**
+   * 组件尺寸映射
+   */
+  sizeMapping: {
+    Button: {
+      xs: { fontSize: 12, padding: '8px 16px', height: 32 },
+      sm: { fontSize: 14, padding: '12px 20px', height: 40 },
+      md: { fontSize: 16, padding: '16px 24px', height: 48 },
+      lg: { fontSize: 18, padding: '20px 32px', height: 56 },
+      xl: { fontSize: 20, padding: '24px 40px', height: 64 },
+    },
+    Icon: {
+      xs: 16,
+      sm: 20,
+      md: 24,
+      lg: 32,
+      xl: 40,
+    },
+    Text: {
+      xs: { fontSize: 12, lineHeight: 1.25 },
+      sm: { fontSize: 14, lineHeight: 1.375 },
+      md: { fontSize: 16, lineHeight: 1.5 },
+      lg: { fontSize: 18, lineHeight: 1.625 },
+      xl: { fontSize: 20, lineHeight: 1.75 },
+    },
+    Divider: {
+      xs: { height: 1, margin: 8 },
+      sm: { height: 1, margin: 12 },
+      md: { height: 1, margin: 16 },
+      lg: { height: 2, margin: 20 },
+      xl: { height: 2, margin: 24 },
+    },
+    Typography: {
+      xs: { fontSize: 12, lineHeight: 1.25 },
+      sm: { fontSize: 14, lineHeight: 1.375 },
+      md: { fontSize: 16, lineHeight: 1.5 },
+      lg: { fontSize: 18, lineHeight: 1.625 },
+      xl: { fontSize: 20, lineHeight: 1.75 },
+    },
+  },
+
+  /**
+   * 组件颜色映射
+   */
+  colorMapping: {
+    Button: {
+      primary: { background: '#0ea5e9', color: '#ffffff', border: '#0ea5e9' },
+      secondary: { background: '#6b7280', color: '#ffffff', border: '#6b7280' },
+      success: { background: '#22c55e', color: '#ffffff', border: '#22c55e' },
+      warning: { background: '#f59e0b', color: '#ffffff', border: '#f59e0b' },
+      error: { background: '#ef4444', color: '#ffffff', border: '#ef4444' },
+    },
+    Icon: {
+      primary: '#0ea5e9',
+      secondary: '#6b7280',
+      success: '#22c55e',
+      warning: '#f59e0b',
+      error: '#ef4444',
+    },
+    Text: {
+      primary: '#0ea5e9',
+      secondary: '#6b7280',
+      success: '#22c55e',
+      warning: '#f59e0b',
+      error: '#ef4444',
+      disabled: '#9ca3af',
+    },
+    Divider: {
+      primary: '#0ea5e9',
+      secondary: '#6b7280',
+      success: '#22c55e',
+      warning: '#f59e0b',
+      error: '#ef4444',
+      border: '#e5e7eb',
+    },
+    Typography: {
+      primary: '#0ea5e9',
+      secondary: '#6b7280',
+      success: '#22c55e',
+      warning: '#f59e0b',
+      error: '#ef4444',
+      disabled: '#9ca3af',
+      inherit: 'inherit',
+    },
+  },
+};
+
+// 默认导出所有基础组件
+export default {
+  Button,
+  Icon,
+  Text,
+  Divider,
+  Typography,
+} as BasicComponents;

package/src/components/common/ErrorBoundary.tsx

@@ -0,0 +1,87 @@
+import { Component, ErrorInfo, ReactNode } from 'react';
+import { View, Text, Button } from '@tarojs/components';
+import { logError } from '../../utils/errorLogger';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: ErrorInfo | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return {
+      hasError: true,
+      error,
+      errorInfo: null,
+    };
+  }
+
+  override componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    this.setState({
+      error,
+      errorInfo,
+    });
+
+    // 记录错误日志
+    logError(error, errorInfo);
+
+    // 调用自定义错误处理回调
+    if (this.props.onError) {
+      this.props.onError(error, errorInfo);
+    }
+  }
+
+  handleReset = () => {
+    this.setState({
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    });
+  };
+
+  override render() {
+    if (this.state.hasError) {
+      // 如果有自定义fallback，则使用它
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      // 默认错误UI
+      return (
+        <View className="error-boundary">
+          <Text className="error-boundary__title">出错了</Text>
+          <Text className="error-boundary__message">{this.state.error?.message || '应用遇到了一个错误'}</Text>
+          {process.env['NODE_ENV'] === 'development' && this.state.errorInfo && (
+            <View className="error-boundary__details">
+              <Text className="error-boundary__details-title">错误详情:</Text>
+              <Text className="error-boundary__details-text">{this.state.errorInfo.componentStack}</Text>
+            </View>
+          )}
+          <Button onClick={this.handleReset} className="error-boundary__reset">
+            重试
+          </Button>
+        </View>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

package/src/components/common/LazyComponent.tsx

@@ -0,0 +1,246 @@
+/**
+ * 懒加载组件
+ * 提供组件级别的懒加载和代码分割
+ */
+
+import React, { Suspense, ComponentType, LazyExoticComponent, ReactNode } from 'react';
+import { ErrorBoundary } from './ErrorBoundary';
+import { Loading } from '../feedback/Loading';
+
+export interface LazyComponentProps {
+  /**
+   * 懒加载的组件
+   */
+  component: LazyExoticComponent<ComponentType<any>> | (() => Promise<ComponentType<any>>);
+
+  /**
+   * 组件属性
+   */
+  props?: Record<string, any>;
+
+  /**
+   * 加载状态显示
+   */
+  fallback?: ReactNode;
+
+  /**
+   * 错误状态显示
+   */
+  errorFallback?: ReactNode;
+
+  /**
+   * 预加载延迟（毫秒）
+   */
+  preloadDelay?: number;
+
+  /**
+   * 是否预加载
+   */
+  preload?: boolean;
+
+  /**
+   * 加载超时时间（毫秒）
+   */
+  timeout?: number;
+}
+
+export interface LazyComponentOptions {
+  /**
+   * 加载策略
+   */
+  strategy?: 'eager' | 'lazy' | 'prefetch';
+
+  /**
+   * 错误重试次数
+   */
+  retryCount?: number;
+
+  /**
+   * 重试延迟（毫秒）
+   */
+  retryDelay?: number;
+
+  /**
+   * 缓存配置
+   */
+  cache?: boolean;
+}
+
+// 组件缓存
+const componentCache = new Map<string, ComponentType<any>>();
+
+// 默认加载组件
+const DefaultFallback = () => (
+  <div className="flex items-center justify-center p-4">
+    <Loading type="spinner" size="lg" />
+  </div>
+);
+
+// 默认错误组件
+const DefaultErrorFallback = ({ error, reset }: { error: Error; reset: () => void }) => (
+  <div className="flex flex-col items-center justify-center p-4 text-center">
+    <div className="text-red-500 mb-2">组件加载失败</div>
+    <div className="text-sm text-gray-600 mb-4">{error.message}</div>
+    <button onClick={reset} className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
+      重试
+    </button>
+  </div>
+);
+
+/**
+ * 创建懒加载组件
+ */
+export function createLazyComponent<T extends ComponentType<any>>(
+  importFn: () => Promise<{ default: T }>,
+  options: LazyComponentOptions = {},
+): LazyExoticComponent<T> {
+  const { strategy = 'lazy', retryCount = 3, retryDelay = 1000, cache = true } = options;
+
+  const cacheKey = JSON.stringify(importFn.toString());
+
+  const loadComponent = async (): Promise<{ default: T }> => {
+    // 检查缓存
+    if (cache && componentCache.has(cacheKey)) {
+      return Promise.resolve({ default: componentCache.get(cacheKey)! as T });
+    }
+
+    let lastError: Error | null = null;
+    let attempts = 0;
+
+    while (attempts < retryCount) {
+      try {
+        const module = await importFn();
+
+        // 缓存组件
+        if (cache) {
+          componentCache.set(cacheKey, module.default as T);
+        }
+
+        return { default: module.default as T };
+      } catch (error) {
+        lastError = error as Error;
+        attempts++;
+
+        if (attempts < retryCount) {
+          await new Promise((resolve) => setTimeout(resolve, retryDelay));
+        }
+      }
+    }
+
+    throw lastError || new Error('Component loading failed');
+  };
+
+  const lazyComp = React.lazy(loadComponent);
+
+  // 预加载
+  if (strategy === 'eager') {
+    loadComponent();
+  } else if (strategy === 'prefetch') {
+    setTimeout(() => {
+      loadComponent().catch(() => {
+        // 预加载失败不抛出错误
+      });
+    }, 0);
+  }
+
+  return lazyComp as LazyExoticComponent<T>;
+}
+
+/**
+ * 懒加载组件包装器
+ */
+export const LazyComponent: React.FC<LazyComponentProps> = ({
+  component,
+  props = {},
+  fallback = <DefaultFallback />,
+  errorFallback,
+  preloadDelay = 0,
+  preload = false,
+}) => {
+  const [error, setError] = React.useState<Error | null>(null);
+
+  // 预加载逻辑
+  React.useEffect(() => {
+    if (preload && preloadDelay > 0) {
+      const timer = setTimeout(() => {
+        if (typeof component === 'function') {
+          const loadFn = component as () => Promise<ComponentType<any>>;
+          loadFn().catch((err: Error) => {
+            console.error('Preload failed:', err);
+            // 预加载失败不抛出错误
+          });
+        }
+      }, preloadDelay);
+
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [preload, preloadDelay, component]);
+
+  const handleError = React.useCallback((err: Error) => {
+    setError(err);
+  }, []);
+
+  const handleReset = React.useCallback(() => {
+    setError(null);
+  }, []);
+
+  if (error) {
+    if (errorFallback) {
+      return <>{errorFallback}</>;
+    }
+    return <DefaultErrorFallback error={error} reset={handleReset} />;
+  }
+
+  const ActualComponent = typeof component === 'function' ? React.lazy(component as any) : component;
+
+  return (
+    <ErrorBoundary onError={handleError}>
+      <Suspense fallback={fallback}>
+        <ActualComponent {...props} />
+      </Suspense>
+    </ErrorBoundary>
+  );
+};
+
+/**
+ * 路由级别的懒加载
+ */
+export function createLazyRoute<T extends ComponentType<any>>(
+  importFn: () => Promise<{ default: T }>,
+  options: LazyComponentOptions = {},
+) {
+  return createLazyComponent(importFn, {
+    ...options,
+    strategy: 'lazy',
+  });
+}
+
+/**
+ * 批量懒加载组件
+ */
+export function createLazyComponents(
+  components: Record<string, () => Promise<{ default: ComponentType<any> }>>,
+  options: LazyComponentOptions = {},
+): Record<string, LazyExoticComponent<ComponentType<any>>> {
+  const result: Record<string, LazyExoticComponent<ComponentType<any>>> = {};
+
+  Object.entries(components).forEach(([key, importFn]) => {
+    result[key] = createLazyComponent(importFn as any, options);
+  });
+
+  return result;
+}
+
+// 预加载工具
+export const preloadComponent = () => {
+  // 触发组件预加载（React.lazy 无公开 preload，使用空实现避免错误）
+  // 可选：如果需要实际预加载，可在创建时手动调用 loadComponent
+};
+
+// 清理缓存
+export const clearComponentCache = () => {
+  componentCache.clear();
+};
+
+export default LazyComponent;