Upload useExport.ts

frontend/src/hooks/useExport.ts

@@ -14,6 +14,8 @@ import { encrypt } from '@/utils/crypto'
 import { svg2Base64 } from '@/utils/svg2Base64'
 import { renderElementToBase64, isCanvasRenderSupported, getElementDimensions } from '@/utils/canvasRenderer'
 import { renderWithHuggingfaceFix, isHuggingfaceEnvironment } from '@/utils/huggingfaceRenderer'
+import { vectorRenderManager, RenderStrategy } from '@/utils/VectorRenderManager'
+import { VECTOR_EXPORT_CONFIG } from '@/config/vectorExportConfig'
 import message from '@/utils/message'
 
 interface ExportImageConfig {
@@ -37,19 +39,68 @@ export default () => {
 
   const exporting = ref(false)
 
-  // 导出图片
+  // 导出图片（生产环境优化版本）
   const exportImage = (domRef: HTMLElement, format: string, quality: number, ignoreWebfont = true) => {
     exporting.value = true
     
-    // 检查是否在Huggingface环境
-    const isHF = isHuggingfaceEnvironment()
-    console.log('exportImage: Environment check:', { isHuggingface: isHF, format })
+    // 环境检测
+    const isHF = VECTOR_EXPORT_CONFIG.ENVIRONMENT.isHuggingface()
+    const isProd = VECTOR_EXPORT_CONFIG.ENVIRONMENT.isProduction()
+    
+    if (!isProd) {
+      console.log('exportImage: Environment check:', { isHuggingface: isHF, format, production: isProd })
+    }
+    
+    // 预处理矢量图形元素
+    const preprocessVectorElements = async () => {
+      const svgElements = domRef.querySelectorAll('svg');
+      const vectorShapes = domRef.querySelectorAll('.vector-shape');
+      
+      // 处理SVG元素
+      for (const svg of Array.from(svgElements)) {
+        try {
+          // 移除problematic属性
+          svg.removeAttribute('vector-effect');
+          const vectorEffectElements = svg.querySelectorAll('[vector-effect]');
+          vectorEffectElements.forEach(el => el.removeAttribute('vector-effect'));
+          
+          // 确保命名空间
+          if (!svg.hasAttribute('xmlns')) {
+            svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+          }
+        } catch (error) {
+          if (!isProd) {
+            console.warn('exportImage: SVG preprocessing failed:', error);
+          }
+        }
+      }
+      
+      // 处理矢量形状
+      for (const shape of Array.from(vectorShapes)) {
+        try {
+          const svgChild = shape.querySelector('svg');
+          if (svgChild) {
+            svgChild.removeAttribute('vector-effect');
+            if (!svgChild.hasAttribute('xmlns')) {
+              svgChild.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+            }
+          }
+        } catch (error) {
+          if (!isProd) {
+            console.warn('exportImage: Vector shape preprocessing failed:', error);
+          }
+        }
+      }
+    };
     
     const foreignObjectSpans = domRef.querySelectorAll('foreignObject [xmlns]')
     foreignObjectSpans.forEach(spanRef => spanRef.removeAttribute('xmlns'))
 
     setTimeout(async () => {
       try {
+        // 预处理矢量元素
+        await preprocessVectorElements();
+        
         let dataUrl: string
         
         if (isHF) {
@@ -509,6 +560,46 @@ export default () => {
   }
 
   // 格式化元素
+  // 生产环境级别的矢量图形SVG生成函数
+  const generateSVGFromShape = (element: any): string => {
+    try {
+      const { width, height, path, fill, outline, viewBox, opacity = 1 } = element;
+      const [vbX, vbY, vbWidth, vbHeight] = viewBox || [0, 0, width, height];
+      
+      // 安全的颜色处理
+      const fillColor = fill || '#000000';
+      const strokeColor = outline?.color || 'none';
+      const strokeWidth = outline?.width || 0;
+      
+      // 构建SVG字符串，确保所有属性都被正确转义
+      const svgAttributes = [
+        `width="${width}"`,
+        `height="${height}"`,
+        `viewBox="${vbX} ${vbY} ${vbWidth} ${vbHeight}"`,
+        'xmlns="http://www.w3.org/2000/svg"',
+        'style="display: block; width: 100%; height: 100%;"'
+      ].join(' ');
+      
+      const pathAttributes = [
+        `d="${path}"`,
+        `fill="${fillColor}"`,
+        strokeWidth > 0 ? `stroke="${strokeColor}"` : '',
+        strokeWidth > 0 ? `stroke-width="${strokeWidth}"` : '',
+        opacity < 1 ? `opacity="${opacity}"` : '',
+        'vector-effect="non-scaling-stroke"'
+      ].filter(Boolean).join(' ');
+      
+      return `<svg ${svgAttributes}><path ${pathAttributes} /></svg>`;
+    } catch (error) {
+      console.error('generateSVGFromShape error:', error);
+      // 生产环境降级处理：返回简单的占位符
+      return `<svg width="${element.width || 100}" height="${element.height || 100}" xmlns="http://www.w3.org/2000/svg">
+        <rect width="100%" height="100%" fill="#f5f5f5" stroke="#ddd" stroke-width="1"/>
+        <text x="50%" y="50%" text-anchor="middle" dy="0.3em" font-size="12" fill="#999">Vector</text>
+      </svg>`;
+    }
+  };
+
   const formatElement = (element: any) => {
     const baseStyle = `
       left: ${element.left || 0}px;
@@ -538,6 +629,28 @@ export default () => {
     }
     
     if (element.type === 'shape') {
+      // 处理特殊矢量图形（生产环境优化）
+      if (element.special && element.path) {
+        try {
+          const svgContent = generateSVGFromShape(element);
+          return `<div class="element shape-element vector-shape" style="${baseStyle}">${svgContent}</div>`;
+        } catch (error) {
+          // 生产环境降级处理
+          if (VECTOR_EXPORT_CONFIG.ERROR_CONFIG.LOGGING.VERBOSE) {
+            console.warn('formatElement: Vector shape generation failed, using fallback:', error);
+          }
+          
+          // 使用简化的矢量图形表示
+          const fallbackSvg = `<svg width="${element.width}" height="${element.height}" xmlns="http://www.w3.org/2000/svg">
+            <rect width="100%" height="100%" fill="${element.fill || '#f5f5f5'}" stroke="${element.outline?.color || '#ddd'}" stroke-width="${element.outline?.width || 1}"/>
+            <text x="50%" y="50%" text-anchor="middle" dy="0.3em" font-size="12" fill="#999">Vector</text>
+          </svg>`;
+          
+          return `<div class="element shape-element vector-shape-fallback" style="${baseStyle}">${fallbackSvg}</div>`;
+        }
+      }
+      
+      // 处理普通形状
       const shapeStyle = `
         background: ${element.fill || '#ffffff'};
         border: ${element.outline?.width || 0}px solid ${element.outline?.color || '#000000'};