Upload vectorExportConfig.ts

frontend/src/config/vectorExportConfig.ts

@@ -0,0 +1,186 @@
+/**
+ * 生产环境矢量图形导出配置
+ * 统一管理所有矢量图形导出相关的配置参数
+ */
+
+// 环境检测
+export const ENVIRONMENT = {
+  isProduction: () => process.env.NODE_ENV === 'production',
+  isHuggingface: () => {
+    if (typeof window === 'undefined') return false;
+    return (
+      window.location.hostname.includes('hf.space') ||
+      window.location.hostname.includes('huggingface.co')
+    );
+  },
+  isDevelopment: () => process.env.NODE_ENV === 'development'
+};
+
+// 性能配置
+export const PERFORMANCE_CONFIG = {
+  // 渲染超时时间（毫秒）
+  RENDER_TIMEOUT: ENVIRONMENT.isProduction() ? 10000 : 15000,
+  
+  // Canvas渲染配置
+  CANVAS: {
+    DEFAULT_SCALE: ENVIRONMENT.isHuggingface() ? 1 : 2,
+    MAX_SCALE: 4,
+    QUALITY: 0.9,
+    BACKGROUND_COLOR: null
+  },
+  
+  // SVG处理配置
+  SVG: {
+    MAX_SIZE_BYTES: 1024 * 1024, // 1MB
+    MIN_DIMENSION: 1,
+    MAX_DIMENSION: 4096,
+    SERIALIZATION_TIMEOUT: 5000
+  },
+  
+  // 性能监控
+  MONITORING: {
+    ENABLED: ENVIRONMENT.isProduction(),
+    MAX_METRICS_COUNT: 100,
+    OPERATIONS: {
+      SVG_TO_BASE64: 'svg2base64',
+      CANVAS_RENDER: 'canvas_render',
+      HTML_EXPORT: 'html_export',
+      DIMENSION_CHECK: 'dimension_check'
+    }
+  }
+};
+
+// 错误处理配置
+export const ERROR_CONFIG = {
+  // 重试配置
+  RETRY: {
+    MAX_ATTEMPTS: 3,
+    DELAY_MS: 1000,
+    BACKOFF_MULTIPLIER: 2
+  },
+  
+  // 降级策略
+  FALLBACK: {
+    ENABLE_CANVAS_FALLBACK: true,
+    ENABLE_SIMPLIFIED_SVG: true,
+    ENABLE_PLACEHOLDER: true,
+    PLACEHOLDER_COLOR: '#f5f5f5',
+    PLACEHOLDER_TEXT: 'Vector'
+  },
+  
+  // 日志配置
+  LOGGING: {
+    VERBOSE: !ENVIRONMENT.isProduction(),
+    ERROR_ONLY: ENVIRONMENT.isProduction(),
+    INCLUDE_STACK_TRACE: !ENVIRONMENT.isProduction()
+  }
+};
+
+// 导出格式配置
+export const EXPORT_CONFIG = {
+  // HTML导出
+  HTML: {
+    INCLUDE_INLINE_SVG: true,
+    OPTIMIZE_SVG_SIZE: true,
+    REMOVE_VECTOR_EFFECTS: true,
+    ENSURE_NAMESPACES: true
+  },
+  
+  // 图像导出
+  IMAGE: {
+    DEFAULT_FORMAT: 'png' as const,
+    SUPPORTED_FORMATS: ['png', 'jpeg', 'webp'] as const,
+    DEFAULT_QUALITY: 0.9,
+    USE_CORS: true
+  },
+  
+  // Base64配置
+  BASE64: {
+    PREFIX: 'data:image/svg+xml;base64,',
+    ENCODING: 'utf-8' as const,
+    VALIDATE_OUTPUT: true,
+    MIN_LENGTH: 100
+  }
+};
+
+// 兼容性配置
+export const COMPATIBILITY_CONFIG = {
+  // 浏览器特性检测
+  FEATURES: {
+    CANVAS_SUPPORT: () => {
+      try {
+        const canvas = document.createElement('canvas');
+        return !!(canvas.getContext && canvas.getContext('2d'));
+      } catch {
+        return false;
+      }
+    },
+    
+    SVG_SUPPORT: () => {
+      try {
+        return !!(document.createElementNS && 
+                 document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect);
+      } catch {
+        return false;
+      }
+    },
+    
+    BLOB_SUPPORT: () => {
+      try {
+        return typeof Blob !== 'undefined';
+      } catch {
+        return false;
+      }
+    }
+  },
+  
+  // 平台特定优化
+  PLATFORM_OPTIMIZATIONS: {
+    HUGGINGFACE: {
+      PREFER_SIMPLE_RENDERING: true,
+      REDUCE_LOGGING: true,
+      OPTIMIZE_MEMORY: true,
+      USE_MINIMAL_FALLBACKS: true
+    },
+    
+    MOBILE: {
+      REDUCE_SCALE: true,
+      OPTIMIZE_PERFORMANCE: true,
+      LIMIT_CONCURRENT_RENDERS: true
+    }
+  }
+};
+
+// 验证配置
+export const VALIDATION_CONFIG = {
+  DIMENSIONS: {
+    MIN_WIDTH: 1,
+    MIN_HEIGHT: 1,
+    MAX_WIDTH: 8192,
+    MAX_HEIGHT: 8192
+  },
+  
+  SVG_ATTRIBUTES: {
+    REQUIRED: ['xmlns'],
+    FORBIDDEN: ['vector-effect'],
+    OPTIONAL: ['viewBox', 'width', 'height']
+  },
+  
+  OUTPUT: {
+    MIN_BASE64_LENGTH: 50,
+    MAX_BASE64_LENGTH: 10 * 1024 * 1024, // 10MB
+    VALID_PREFIXES: ['data:image/svg+xml;base64,', 'data:image/png;base64,']
+  }
+};
+
+// 导出统一配置对象
+export const VECTOR_EXPORT_CONFIG = {
+  ENVIRONMENT,
+  PERFORMANCE_CONFIG,
+  ERROR_CONFIG,
+  EXPORT_CONFIG,
+  COMPATIBILITY_CONFIG,
+  VALIDATION_CONFIG
+} as const;
+
+export default VECTOR_EXPORT_CONFIG;