taro-uno-ui 0.9.0-beta

package/src/components/common/ResponsiveContainer.tsx

@@ -0,0 +1,93 @@
+/**
+ * 响应式容器组件
+ * 提供多平台适配的响应式布局容器，使用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

@@ -0,0 +1,183 @@
+/**
+ * 响应式栅格组件
+ * 提供多平台适配的响应式栅格布局系统，使用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

@@ -0,0 +1,110 @@
+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);
+  };
+
+  // 全局 fetch 拦截添加安全头部
+  useEffect(() => {
+    const originalFetch = window.fetch;
+    window.fetch = async (input: RequestInfo | URL, init?: RequestInit) => {
+      if (init && init.headers) {
+        init.headers = addSecurityHeaders(init.headers as Record<string, string>);
+      }
+      return originalFetch(input, init);
+    };
+
+    return () => {
+      window.fetch = originalFetch;
+    };
+  }, []);
+
+  // 设置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

@@ -0,0 +1,128 @@
+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' ? window.matchMedia('(prefers-color-scheme: dark)').matches : theme === 'dark';
+
+  useEffect(() => {
+    const root = document.documentElement;
+    if (isDark) {
+      root.classList.add('dark');
+    } else {
+      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`);
+    });
+
+    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);
+            });
+          }
+        });
+      }
+    });
+
+    // 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)');
+    }
+
+    // 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;