Upload useExport.ts

frontend/src/hooks/useExport.ts

@@ -51,43 +51,69 @@ export default () => {
       console.log('exportImage: Environment check:', { isHuggingface: isHF, format, production: isProd })
     }
     
-    // 预处理矢量图形元素
+    // 使用VectorRenderManager预处理矢量图形元素
     const preprocessVectorElements = async () => {
       const svgElements = domRef.querySelectorAll('svg');
       const vectorShapes = domRef.querySelectorAll('.vector-shape');
       
-      // 处理SVG元素
+      // 处理SVG元素 - 使用VectorRenderManager优化
       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');
+          const renderResult = await vectorRenderManager.renderElement(svg);
+          if (renderResult.success && renderResult.data) {
+            // 用优化后的SVG替换原始SVG
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = renderResult.data;
+            const optimizedSvg = tempDiv.querySelector('svg');
+            if (optimizedSvg && svg.parentNode) {
+              svg.parentNode.replaceChild(optimizedSvg, svg);
+            }
+          } else {
+            // 降级处理：手动清理属性
+            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);
+            console.warn('exportImage: VectorRenderManager failed, using fallback:', error);
+          }
+          // 降级处理
+          svg.removeAttribute('vector-effect');
+          if (!svg.hasAttribute('xmlns')) {
+            svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
           }
         }
       }
       
-      // 处理矢量形状
+      // 处理矢量形状 - 使用VectorRenderManager优化
       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');
+            const renderResult = await vectorRenderManager.renderElement(svgChild);
+            if (renderResult.success && renderResult.data) {
+              const tempDiv = document.createElement('div');
+              tempDiv.innerHTML = renderResult.data;
+              const optimizedSvg = tempDiv.querySelector('svg');
+              if (optimizedSvg) {
+                svgChild.parentNode?.replaceChild(optimizedSvg, svgChild);
+              }
+            } else {
+              // 降级处理
+              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);
+            console.warn('exportImage: Vector shape optimization failed:', error);
           }
         }
       }
@@ -633,6 +659,28 @@ export default () => {
       if (element.special && element.path) {
         try {
           const svgContent = generateSVGFromShape(element);
+          
+          // 使用VectorRenderManager进一步优化SVG
+          const tempDiv = document.createElement('div');
+          tempDiv.innerHTML = svgContent;
+          const svgElement = tempDiv.querySelector('svg');
+          
+          if (svgElement) {
+            // 异步优化SVG（不阻塞主流程）
+            vectorRenderManager.renderElement(svgElement).then(result => {
+              if (result.success && result.data) {
+                // 在后台优化成功，但不影响当前渲染
+                if (!VECTOR_EXPORT_CONFIG.ENVIRONMENT.isProduction()) {
+                  console.log('formatElement: SVG optimized successfully');
+                }
+              }
+            }).catch(error => {
+              if (!VECTOR_EXPORT_CONFIG.ENVIRONMENT.isProduction()) {
+                console.warn('formatElement: Background SVG optimization failed:', error);
+              }
+            });
+          }
+          
           return `<div class="element shape-element vector-shape" style="${baseStyle}">${svgContent}</div>`;
         } catch (error) {
           // 生产环境降级处理
@@ -640,6 +688,27 @@ export default () => {
             console.warn('formatElement: Vector shape generation failed, using fallback:', error);
           }
           
+          // 使用VectorRenderManager生成优化的降级SVG
+          try {
+            const placeholderElement = document.createElement('div');
+            placeholderElement.style.width = `${element.width}px`;
+            placeholderElement.style.height = `${element.height}px`;
+            
+            // 尝试使用VectorRenderManager生成占位符
+            vectorRenderManager.renderElement(placeholderElement).then(result => {
+              if (result.success && result.data) {
+                // 异步替换占位符（不阻塞当前渲染）
+                if (!VECTOR_EXPORT_CONFIG.ENVIRONMENT.isProduction()) {
+                  console.log('formatElement: Fallback SVG generated successfully');
+                }
+              }
+            }).catch(() => {
+              // 静默处理降级失败
+            });
+          } catch (managerError) {
+            // VectorRenderManager也失败时的最终降级
+          }
+          
           // 使用简化的矢量图形表示
           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}"/>