taro-uno-ui 1.0.0 → 1.0.2

package/src/components/common/ResponsiveContainer.tsx

@@ -1,93 +0,0 @@
-/**
- * 响应式容器组件
- * 提供多平台适配的响应式布局容器，使用responsiveUtils工具
- */
-
-import React, { ReactNode } from 'react';
-import { View } from '@tarojs/components';
-import { useResponsive } from '../../utils/responsiveUtils';
-import type { ResponsiveStyle, ResponsiveValue } from '../../utils/responsiveUtils';
-
-interface ResponsiveContainerProps {
-  children: ReactNode;
-  className?: string;
-  style?: ResponsiveStyle;
-  padding?: ResponsiveValue<string | number>;
-  margin?: ResponsiveValue<string | number>;
-  maxWidth?: ResponsiveValue<string | number>;
-  backgroundColor?: ResponsiveValue<string>;
-  borderRadius?: ResponsiveValue<string | number>;
-  safeArea?: boolean; // 是否适配安全区域
-}
-
-/**
- * 响应式容器组件
- * 根据屏幕尺寸和平台自动调整布局
- */
-export const ResponsiveContainer: React.FC<ResponsiveContainerProps> = ({
-  children,
-  className = '',
-  style = {},
-  padding = { xs: '8px', sm: '16px', md: '24px' },
-  margin = { xs: 0, sm: 'auto' },
-  maxWidth = { xs: '100%', sm: '540px', md: '720px', lg: '960px', xl: '1140px' },
-  backgroundColor = 'transparent',
-  borderRadius = { xs: 0, sm: '8px' },
-  safeArea = false,
-}) => {
-  const {
-    windowHeight,
-    generateResponsiveStyles,
-    getResponsiveValue,
-    safeArea: safeAreaInfo,
-    platform,
-  } = useResponsive();
-
-  // 生成响应式样式
-  const responsiveStyles = generateResponsiveStyles({
-    padding,
-    margin,
-    maxWidth,
-    backgroundColor,
-    borderRadius,
-    ...style,
-  });
-
-  // 处理安全区域
-  const safeAreaStyle = safeArea
-    ? {
-        paddingTop: (getResponsiveValue(padding) as number) + safeAreaInfo.top,
-        paddingBottom: (getResponsiveValue(padding) as number) + safeAreaInfo.bottom,
-        paddingLeft: (getResponsiveValue(padding) as number) + safeAreaInfo.left,
-        paddingRight: (getResponsiveValue(padding) as number) + safeAreaInfo.right,
-      }
-    : {};
-
-  // 合并所有样式
-  const containerStyle = {
-    ...responsiveStyles,
-    ...safeAreaStyle,
-    boxSizing: 'border-box' as const,
-    width: '100%',
-  };
-
-  // 平台特定的样式调整
-  const platformSpecificStyle =
-    platform === 'weapp'
-      ? { minHeight: windowHeight } // 小程序环境确保容器高度至少为屏幕高度
-      : {};
-
-  return (
-    <View
-      className={`responsive-container ${className}`}
-      style={{
-        ...containerStyle,
-        ...platformSpecificStyle,
-      }}
-    >
-      {children}
-    </View>
-  );
-};
-
-export default ResponsiveContainer;

package/src/components/common/ResponsiveGrid.tsx

@@ -1,183 +0,0 @@
-/**
- * 响应式栅格组件
- * 提供多平台适配的响应式栅格布局系统，使用responsiveUtils工具
- */
-
-import React, { ReactNode } from 'react';
-import { View } from '@tarojs/components';
-import { useResponsive, ResponsiveValue } from '../../utils/responsiveUtils';
-
-interface ResponsiveGridProps {
-  children: ReactNode;
-  className?: string;
-  columns?: ResponsiveValue<number>; // 列数
-  gap?: ResponsiveValue<string | number>; // 间距
-  rowGap?: ResponsiveValue<string | number>; // 行间距
-  columnGap?: ResponsiveValue<string | number>; // 列间距
-  align?: 'start' | 'center' | 'end' | 'stretch'; // 对齐方式
-  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'; // 主轴对齐
-  wrap?: boolean; // 是否换行
-}
-
-interface ResponsiveGridItemProps {
-  children: ReactNode;
-  className?: string;
-  span?: ResponsiveValue<number>; // 占据列数
-  offset?: ResponsiveValue<number>; // 偏移列数
-  order?: ResponsiveValue<number>; // 排序
-  align?: 'start' | 'center' | 'end' | 'stretch'; // 对齐方式
-}
-
-/**
- * 响应式栅格容器组件
- * 根据屏幕尺寸自动调整列数和间距
- */
-export const ResponsiveGrid: React.FC<ResponsiveGridProps> = ({
-  children,
-  className = '',
-  columns = { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 },
-  gap = { xs: '8px', sm: '16px' },
-  rowGap,
-  columnGap,
-  align = 'stretch',
-  justify = 'start',
-  wrap = true,
-}) => {
-  const { getResponsiveValue, generateResponsiveStyles, platform } = useResponsive();
-
-  // 获取响应式值
-  const currentColumns = getResponsiveValue(columns);
-  const currentGap = getResponsiveValue(gap);
-  const currentRowGap = rowGap ? getResponsiveValue(rowGap) : currentGap;
-  const currentColumnGap = columnGap ? getResponsiveValue(columnGap) : currentGap;
-
-  // 生成栅格样式
-  const gridStyle = generateResponsiveStyles({
-    display: 'grid',
-    gridTemplateColumns: `repeat(${currentColumns}, 1fr)`,
-    gap: currentGap,
-    rowGap: currentRowGap,
-    columnGap: currentColumnGap,
-    alignItems: align,
-    justifyContent: justify,
-    gridAutoFlow: wrap ? 'row' : 'column',
-  });
-
-  // 平台特定的样式调整
-  const platformSpecificStyle =
-    platform === 'weapp'
-      ? { overflow: 'hidden' } // 小程序环境处理溢出
-      : {};
-
-  return (
-    <View
-      className={`responsive-grid ${className}`}
-      style={{
-        ...gridStyle,
-        ...platformSpecificStyle,
-      }}
-    >
-      {children}
-    </View>
-  );
-};
-
-/**
- * 响应式栅格项组件
- * 根据屏幕尺寸自动调整占据列数
- */
-export const ResponsiveGridItem: React.FC<ResponsiveGridItemProps> = ({
-  children,
-  className = '',
-  span = { xs: 1 },
-  offset = 0,
-  order,
-  align = 'stretch',
-}) => {
-  const { getResponsiveValue, generateResponsiveStyles, platform } = useResponsive();
-
-  // 获取响应式值
-  const currentSpan = getResponsiveValue(span);
-  const currentOffset = getResponsiveValue(offset);
-  const currentOrder = order ? getResponsiveValue(order) : undefined;
-  const currentAlign = align;
-
-  // 生成栅格项样式
-  const itemStyleObj: Record<string, ResponsiveValue<string | number>> = {
-    gridColumn: `span ${currentSpan}`,
-    marginLeft: currentOffset ? `calc(${currentOffset} * (100% / var(--grid-columns, 12)))` : 0,
-    alignSelf: currentAlign,
-  };
-
-  // 只有在有order值时才添加order样式
-  if (currentOrder !== undefined) {
-    itemStyleObj['order'] = currentOrder;
-  }
-
-  const itemStyle = generateResponsiveStyles(itemStyleObj);
-
-  // 平台特定的样式调整
-  const platformSpecificStyle =
-    platform === 'weapp'
-      ? { boxSizing: 'border-box' as const } // 小程序环境确保盒模型正确
-      : {};
-
-  return (
-    <View
-      className={`responsive-grid-item ${className}`}
-      style={{
-        ...itemStyle,
-        ...platformSpecificStyle,
-      }}
-    >
-      {children}
-    </View>
-  );
-};
-
-// 预设栅格布局
-export const ResponsiveGridPresets = {
-  // 两列布局
-  TwoColumns: ({ children, ...props }: Omit<ResponsiveGridProps, 'columns'>) => (
-    <ResponsiveGrid columns={{ xs: 1, sm: 2 }} {...props}>
-      {children}
-    </ResponsiveGrid>
-  ),
-
-  // 三列布局
-  ThreeColumns: ({ children, ...props }: Omit<ResponsiveGridProps, 'columns'>) => (
-    <ResponsiveGrid columns={{ xs: 1, sm: 2, md: 3 }} {...props}>
-      {children}
-    </ResponsiveGrid>
-  ),
-
-  // 四列布局
-  FourColumns: ({ children, ...props }: Omit<ResponsiveGridProps, 'columns'>) => (
-    <ResponsiveGrid columns={{ xs: 1, sm: 2, md: 3, lg: 4 }} {...props}>
-      {children}
-    </ResponsiveGrid>
-  ),
-
-  // 卡片布局
-  CardLayout: ({ children, ...props }: Omit<ResponsiveGridProps, 'columns' | 'gap'>) => (
-    <ResponsiveGrid columns={{ xs: 1, sm: 2, md: 3, lg: 4 }} gap={{ xs: '12px', sm: '16px', md: '20px' }} {...props}>
-      {children}
-    </ResponsiveGrid>
-  ),
-
-  // 列表布局
-  ListLayout: ({ children, ...props }: Omit<ResponsiveGridProps, 'columns' | 'gap'>) => (
-    <ResponsiveGrid columns={{ xs: 1 }} gap={{ xs: '8px', sm: '12px' }} {...props}>
-      {children}
-    </ResponsiveGrid>
-  ),
-
-  // 仪表板布局
-  DashboardLayout: ({ children, ...props }: Omit<ResponsiveGridProps, 'columns' | 'gap'>) => (
-    <ResponsiveGrid columns={{ xs: 1, sm: 2, md: 4 }} gap={{ xs: '16px', sm: '20px', md: '24px' }} {...props}>
-      {children}
-    </ResponsiveGrid>
-  ),
-};
-
-export default ResponsiveGrid;

package/src/components/common/SecurityProvider.tsx

@@ -1,98 +0,0 @@
-import React, { ReactNode, createContext, useContext, useEffect } from 'react';
-import { ErrorBoundary } from './ErrorBoundary';
-import { escapeHTML, sanitizeHTML, setupOWASPHook } from '../../utils/xssProtection';
-import { generateSecurityHeaders } from '../../utils/securityHeaders';
-import { validateString } from '../../utils/inputValidator';
-import { logError } from '../../utils/errorLogger';
-
-// Security Context 类型
-interface SecurityContextType {
-  sanitizeInput: (value: string, type?: 'html' | 'attribute' | 'json') => string;
-  validateInput: (value: string, rules: any) => any;
-  addSecurityHeaders: (headers: Record<string, string>) => Record<string, string>;
-  reportError: (error: Error) => void;
-}
-
-// 创建 Security Context
-const SecurityContext = createContext<SecurityContextType | undefined>(undefined);
-
-// Security Provider Props
-interface SecurityProviderProps {
-  children: ReactNode;
-  cspEnabled?: boolean;
-  hstsEnabled?: boolean;
-}
-
-// Security Provider 组件
-export const SecurityProvider: React.FC<SecurityProviderProps> = ({
-  children,
-  cspEnabled = true,
-  hstsEnabled = true,
-}) => {
-  // Sanitize 输入
-  const sanitizeInput = (value: string, type: 'html' | 'attribute' | 'json' = 'html') => {
-    switch (type) {
-      case 'html':
-        return sanitizeHTML(value);
-      case 'attribute':
-        return escapeHTML(value);
-      case 'json':
-        return sanitizeHTML(value); // 简化，实际可使用 sanitizeJSON
-      default:
-        return value;
-    }
-  };
-
-  // 验证输入
-  const validateInput = (value: string, rules: any) => {
-    return validateString(value, rules);
-  };
-
-  // 添加安全头部
-  const addSecurityHeaders = (headers: Record<string, string>) => {
-    const securityConfig = {
-      contentSecurityPolicy: cspEnabled,
-      strictTransportSecurity: hstsEnabled,
-    };
-    const { headers: securityHeaders } = generateSecurityHeaders(securityConfig);
-    return { ...headers, ...securityHeaders };
-  };
-
-  // 报告错误
-  const reportError = (error: Error) => {
-    logError(error);
-  };
-
-  // 在 Taro.js 环境中，安全头部由统一请求客户端处理
-  // 不再需要拦截 window.fetch，因为 Taro.js 使用 Taro.request API
-
-  // 设置OWASP错误钩子
-  useEffect(() => {
-    setupOWASPHook(logError);
-    // 全局钩子，无需组件级清理
-  }, []);
-
-  const value: SecurityContextType = {
-    sanitizeInput,
-    validateInput,
-    addSecurityHeaders,
-    reportError,
-  };
-
-  return (
-    <ErrorBoundary>
-      <SecurityContext.Provider value={value}>{children}</SecurityContext.Provider>
-    </ErrorBoundary>
-  );
-};
-
-// Hook 使用 Security Context
-export const useSecurity = () => {
-  const context = useContext(SecurityContext);
-  if (context === undefined) {
-    throw new Error('useSecurity must be used within a SecurityProvider');
-  }
-  return context;
-};
-
-export default SecurityProvider;

package/src/components/common/ThemeProvider.tsx

@@ -1,115 +0,0 @@
-import React, { ReactNode, createContext, useContext, useState, useEffect } from 'react';
-import { usePlatform } from '../../hooks/usePlatform';
-import { defaultDesignTokens as designTokens } from '../../theme/design-tokens';
-
-interface ThemeContextType {
-  theme: 'light' | 'dark' | 'auto';
-  setTheme: (theme: 'light' | 'dark' | 'auto') => void;
-  isDark: boolean;
-  colors: typeof designTokens.colors;
-  spacing: typeof designTokens.spacing;
-  typography: typeof designTokens.typography;
-}
-
-const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
-
-interface ThemeProviderProps {
-  children: ReactNode;
-  defaultTheme?: 'light' | 'dark' | 'auto';
-}
-
-export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children, defaultTheme = 'auto' }) => {
-  const [theme, setTheme] = useState<'light' | 'dark' | 'auto'>(defaultTheme);
-  const platform = usePlatform();
-
-  const isDark = theme === 'auto' ? (typeof window !== 'undefined' && window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)').matches : false) : theme === 'dark';
-
-  useEffect(() => {
-    const root = document.documentElement;
-    if (isDark) {
-      root.classList.add('dark');
-    } else {
-      root.classList.remove('dark');
-    }
-
-    // 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(', '));
-        }
-      });
-    };
-
-    // 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('--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
-    if (platform === 'rn') {
-      // React Native specific theme handling
-      console.log('Theme applied for RN');
-    }
-
-    return () => {
-      root.classList.remove('dark');
-      // Reset vars if needed
-    };
-  }, [theme, isDark, platform]);
-
-  const value: ThemeContextType = {
-    theme,
-    setTheme,
-    isDark,
-    colors: designTokens.colors,
-    spacing: designTokens.spacing,
-    typography: designTokens.typography,
-  };
-
-  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
-};
-
-export const useTheme = () => {
-  const context = useContext(ThemeContext);
-  if (context === undefined) {
-    throw new Error('useTheme must be used within a ThemeProvider');
-  }
-  return context;
-};
-
-export default ThemeProvider;