shared/export-utils.js

// 前后端共享的PPT导出工具
// 可以在浏览器和Node.js环境中运行

export const generateSlideHTML = (pptData, slideIndex, options = {}) => {
  const {
    width = 1000,
    height = 562,
    includeInteractive = false,
    format = 'view' // 'view' | 'export' | 'screenshot'
  } = options;

  const slide = pptData.slides[slideIndex];
  if (!slide) {
    throw new Error(`Slide ${slideIndex} not found`);
  }

  const theme = pptData.theme || {};
  
  // 计算实际尺寸
  const actualWidth = pptData.viewportSize || width;
  const actualHeight = Math.ceil(actualWidth * (pptData.viewportRatio || 0.5625));

  // 渲染元素
  const renderElements = (elements) => {
    if (!elements || elements.length === 0) return '';
    
    return elements.map(element => {
      const baseStyle = `
        position: absolute;
        left: ${element.left || 0}px;
        top: ${element.top || 0}px;
        width: ${element.width || 0}px;
        height: ${element.height || 0}px;
        z-index: ${element.zIndex || 1};
        transform: rotate(${element.rotate || 0}deg);
      `;

      let content = '';
      let specificStyles = '';

      switch (element.type) {
        case 'text':
          const fontFamily = element.fontName || 'Microsoft YaHei';
          const fontFallback = `${fontFamily}, 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'SimHei', 'SimSun', Arial, Helvetica, sans-serif`;
          
          specificStyles = `
            font-family: ${fontFallback};
            font-size: ${element.fontSize || 14}px;
            color: ${element.defaultColor || element.color || '#000'};
            font-weight: ${element.bold ? 'bold' : 'normal'};
            font-style: ${element.italic ? 'italic' : 'normal'};
            text-decoration: ${element.underline ? 'underline' : 'none'};
            text-align: ${element.align || 'left'};
            line-height: ${element.lineHeight || 1.2};
            padding: 10px;
            word-wrap: break-word;
            overflow: hidden;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
          `;
          content = element.content || '';
          break;

        case 'image':
          specificStyles = `
            background-image: url('${element.src}');
            background-size: ${element.objectFit || 'cover'};
            background-position: center;
            background-repeat: no-repeat;
          `;
          break;

        case 'shape':
          specificStyles = `
            background-color: ${element.fill || 'transparent'};
            border: ${element.outline?.width || 0}px ${element.outline?.style || 'solid'} ${element.outline?.color || 'transparent'};
            border-radius: ${element.shape === 'ellipse' ? '50%' : '0px'};
          `;
          break;
      }

      return `<div style="${baseStyle}${specificStyles}">${content}</div>`;
    }).join('');
  };

  // 生成样式
  const generateStyles = () => {
    const baseStyles = `
      * { box-sizing: border-box; margin: 0; padding: 0; }
      body { 
        font-family: 'Microsoft YaHei', 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'SimHei', 'SimSun', Arial, Helvetica, sans-serif;
        margin: 0; 
        padding: 0; 
      }
      .slide-container {
        position: relative;
        width: ${actualWidth}px;
        height: ${actualHeight}px;
        background: ${slide.background?.color || theme.backgroundColor || '#ffffff'};
        margin: 0 auto;
        overflow: hidden;
      }
    `;

    if (format === 'view') {
      return baseStyles + `
        html, body { 
          width: 100vw; 
          height: 100vh; 
          background: #000; 
          display: flex; 
          align-items: center; 
          justify-content: center; 
          overflow: hidden;
        }
        .slide-container {
          transform-origin: center center;
        }
      `;
    }

    return baseStyles;
  };

  // 生成JavaScript（仅用于view模式）
  const generateScript = () => {
    if (format !== 'view') return '';

    return `
      <script>
        function scalePPTToFitWindow() {
          const container = document.querySelector('.slide-container');
          if (!container) return;
          
          const windowWidth = window.innerWidth;
          const windowHeight = window.innerHeight;
          const pptWidth = ${actualWidth};
          const pptHeight = ${actualHeight};
          
          const scaleX = windowWidth / pptWidth;
          const scaleY = windowHeight / pptHeight;
          const scale = Math.min(scaleX, scaleY, 1);
          
          container.style.transform = 'scale(' + scale + ')';
        }
        
        window.addEventListener('load', scalePPTToFitWindow);
        window.addEventListener('resize', scalePPTToFitWindow);
        window.addEventListener('orientationchange', () => {
          setTimeout(scalePPTToFitWindow, 100);
        });
      </script>
    `;
  };

  return `<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>${pptData.title || 'PPT'} - Page ${slideIndex + 1}</title>
  <style>${generateStyles()}</style>
</head>
<body>
  <div class="slide-container">
    ${renderElements(slide.elements)}
  </div>
  ${generateScript()}
</body>
</html>`;
};

export const generateExportPage = (pptData, slideIndex, options = {}) => {
  const {
    format = 'jpeg',
    quality = 90,
    autoDownload = false
  } = options;

  const slideHTML = generateSlideHTML(pptData, slideIndex, {
    ...options,
    format: 'export'
  });

  // 提取slide-container内容
  const slideContent = slideHTML.match(/<div class="slide-container">(.*?)<\/div>/s)?.[1] || '';

  return `<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PPT Export - ${pptData.title}</title>
  <style>
    body {
      margin: 0;
      padding: 20px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      font-family: 'Microsoft YaHei', sans-serif;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .container {
      background: white;
      border-radius: 15px;
      padding: 30px;
      box-shadow: 0 20px 40px rgba(0,0,0,0.1);
      text-align: center;
    }
    .slide-container {
      position: relative;
      width: ${pptData.viewportSize || 1000}px;
      height: ${Math.ceil((pptData.viewportSize || 1000) * (pptData.viewportRatio || 0.5625))}px;
      background: ${pptData.slides[slideIndex].background?.color || '#ffffff'};
      margin: 20px auto;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      border-radius: 4px;
    }
    .btn {
      background: #4CAF50;
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 5px;
      cursor: pointer;
      margin: 5px;
      font-size: 16px;
      font-weight: bold;
    }
    .btn:hover { background: #45a049; }
    .btn:disabled { background: #cccccc; cursor: not-allowed; }
    .status {
      margin: 15px 0;
      padding: 10px;
      border-radius: 5px;
      font-size: 14px;
    }
    .status.success { background: #e8f5e8; color: #2e7d32; }
    .status.error { background: #fdeaea; color: #c62828; }
    .status.info { background: #e3f2fd; color: #1565c0; }
  </style>
</head>
<body>
  <div class="container">
    <h1>🚀 PPT Export</h1>
    <p>${pptData.title} - Slide ${slideIndex + 1}</p>
    
    <div class="slide-container" id="slideContainer">
      ${slideContent}
    </div>
    
    <button class="btn" onclick="generateScreenshot()">📸 Generate Screenshot</button>
    <button class="btn" onclick="downloadScreenshot()" id="downloadBtn" disabled>💾 Download</button>
    
    <div id="status" class="status info">Ready to generate screenshot</div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js"></script>
  <script>
    let currentScreenshot = null;
    
    async function generateScreenshot() {
      try {
        document.getElementById('status').textContent = 'Generating...';
        document.getElementById('status').className = 'status info';
        
        if (document.fonts && document.fonts.ready) {
          await document.fonts.ready;
        }
        await new Promise(resolve => setTimeout(resolve, 300));
        
        const canvas = await html2canvas(document.getElementById('slideContainer'), {
          scale: 2,
          useCORS: true,
          allowTaint: true,
          backgroundColor: null
        });
        
        currentScreenshot = canvas.toDataURL('image/${format}', ${quality / 100});
        
        document.getElementById('status').textContent = 'Screenshot generated successfully!';
        document.getElementById('status').className = 'status success';
        document.getElementById('downloadBtn').disabled = false;
        
        ${autoDownload ? 'downloadScreenshot();' : ''}
        
      } catch (error) {
        document.getElementById('status').textContent = 'Generation failed: ' + error.message;
        document.getElementById('status').className = 'status error';
      }
    }
    
    function downloadScreenshot() {
      if (!currentScreenshot) return;
      
      const link = document.createElement('a');
      link.download = 'ppt-slide-${slideIndex + 1}.${format}';
      link.href = currentScreenshot;
      link.click();
      
      document.getElementById('status').textContent = 'Downloaded successfully!';
      document.getElementById('status').className = 'status success';
    }
    
    window.addEventListener('load', function() {
      ${autoDownload ? 'setTimeout(generateScreenshot, 500);' : ''}
    });
  </script>
</body>
</html>`;
};

// 新增：前端导出功能的服务器端实现
export const exportPPTToJSON = (pptData) => {
  return {
    title: pptData.title,
    width: pptData.viewportSize || 1000,
    height: Math.ceil((pptData.viewportSize || 1000) * (pptData.viewportRatio || 0.5625)),
    theme: pptData.theme,
    slides: pptData.slides,
    exportedAt: new Date().toISOString(),
    format: 'json',
    version: '1.0'
  };
};

// 新增：生成完整的HTML演示文稿
export const generateHTMLPresentation = (pptData, options = {}) => {
  const { 
    includeInteractivity = true, 
    standalone = true, 
    includeCSS = true 
  } = options;
  
  const viewportSize = pptData.viewportSize || 1000;
  const viewportRatio = pptData.viewportRatio || 0.5625;
  const slideHeight = Math.round(viewportSize * viewportRatio);
  const theme = pptData.theme || {};
  
  // CSS样式
  const css = includeCSS ? `
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      
      body {
        font-family: '${theme.fontName || 'Microsoft YaHei'}', 'Microsoft YaHei', Arial, sans-serif;
        background: ${theme.backgroundColor || '#000'};
        color: ${theme.fontColor || '#333'};
        overflow: hidden;
      }
      
      .presentation-container {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #000;
      }
      
      .slide-container {
        width: ${viewportSize}px;
        height: ${slideHeight}px;
        background: #fff;
        position: relative;
        overflow: hidden;
        transform-origin: center;
        box-shadow: 0 8px 32px rgba(0,0,0,0.3);
      }
      
      .slide {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
      }
      
      .slide.active {
        display: block;
      }
      
      .element {
        position: absolute;
        word-wrap: break-word;
      }
      
      .text-element {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
      }
      
      .image-element img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      
      .shape-element {
        border-radius: var(--border-radius, 0);
      }
      
      .navigation {
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 10px;
        z-index: 1000;
      }
      
      .nav-btn {
        padding: 12px 20px;
        background: rgba(255,255,255,0.9);
        border: none;
        border-radius: 25px;
        cursor: pointer;
        font-size: 14px;
        font-weight: bold;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
      }
      
      .nav-btn:hover {
        background: rgba(255,255,255,1);
        transform: translateY(-2px);
      }
      
      .nav-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
      
      .slide-counter {
        position: fixed;
        top: 30px;
        right: 30px;
        background: rgba(0,0,0,0.7);
        color: white;
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 14px;
        z-index: 1000;
      }
      
      .fullscreen-btn {
        position: fixed;
        top: 30px;
        left: 30px;
        background: rgba(0,0,0,0.7);
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 20px;
        cursor: pointer;
        font-size: 14px;
        z-index: 1000;
      }
      
      /* 响应式缩放 */
      @media (max-width: 1200px) {
        .slide-container {
          transform: scale(0.8);
        }
      }
      
      @media (max-width: 800px) {
        .slide-container {
          transform: scale(0.6);
        }
      }
      
      @media (max-width: 600px) {
        .slide-container {
          transform: scale(0.4);
        }
      }
    </style>
  ` : '';
  
  // JavaScript交互功能
  const javascript = includeInteractivity ? `
    <script>
      class PPTViewer {
        constructor() {
          this.currentSlide = 0;
          this.totalSlides = ${pptData.slides.length};
          this.init();
        }
        
        init() {
          this.updateSlide();
          this.bindEvents();
          this.autoScale();
          window.addEventListener('resize', () => this.autoScale());
        }
        
        bindEvents() {
          document.addEventListener('keydown', (e) => {
            switch(e.key) {
              case 'ArrowLeft':
              case 'ArrowUp':
                this.prevSlide();
                break;
              case 'ArrowRight':
              case 'ArrowDown':
              case ' ':
                this.nextSlide();
                break;
              case 'Home':
                this.goToSlide(0);
                break;
              case 'End':
                this.goToSlide(this.totalSlides - 1);
                break;
              case 'F11':
                this.toggleFullscreen();
                break;
            }
          });
        }
        
        nextSlide() {
          if (this.currentSlide < this.totalSlides - 1) {
            this.currentSlide++;
            this.updateSlide();
          }
        }
        
        prevSlide() {
          if (this.currentSlide > 0) {
            this.currentSlide--;
            this.updateSlide();
          }
        }
        
        goToSlide(index) {
          if (index >= 0 && index < this.totalSlides) {
            this.currentSlide = index;
            this.updateSlide();
          }
        }
        
        updateSlide() {
          document.querySelectorAll('.slide').forEach(slide => {
            slide.classList.remove('active');
          });
          
          const currentSlideEl = document.getElementById('slide-' + this.currentSlide);
          if (currentSlideEl) {
            currentSlideEl.classList.add('active');
          }
          
          const counter = document.querySelector('.slide-counter');
          if (counter) {
            counter.textContent = \`\${this.currentSlide + 1} / \${this.totalSlides}\`;
          }
          
          const prevBtn = document.getElementById('prevBtn');
          const nextBtn = document.getElementById('nextBtn');
          if (prevBtn) prevBtn.disabled = this.currentSlide === 0;
          if (nextBtn) nextBtn.disabled = this.currentSlide === this.totalSlides - 1;
        }
        
        autoScale() {
          const container = document.querySelector('.slide-container');
          if (!container) return;
          
          const windowWidth = window.innerWidth;
          const windowHeight = window.innerHeight;
          const slideWidth = ${viewportSize};
          const slideHeight = ${slideHeight};
          
          const scaleX = (windowWidth * 0.9) / slideWidth;
          const scaleY = (windowHeight * 0.9) / slideHeight;
          const scale = Math.min(scaleX, scaleY, 1);
          
          container.style.transform = \`scale(\${scale})\`;
        }
        
        toggleFullscreen() {
          if (!document.fullscreenElement) {
            document.documentElement.requestFullscreen();
          } else {
            document.exitFullscreen();
          }
        }
      }
      
      // 初始化PPT查看器
      document.addEventListener('DOMContentLoaded', () => {
        window.pptViewer = new PPTViewer();
      });
    </script>
  ` : '';
  
  // 格式化幻灯片背景
  const formatSlideBackground = (background) => {
    if (!background) return 'background: #ffffff;';
    
    if (background.type === 'solid') {
      return `background: ${background.color || '#ffffff'};`;
    }
    
    if (background.type === 'gradient') {
      const { gradientType, colors } = background;
      if (gradientType === 'linear') {
        return `background: linear-gradient(${background.gradientRotate || 0}deg, ${colors.map(c => c.color).join(', ')});`;
      }
      return `background: radial-gradient(${colors.map(c => c.color).join(', ')});`;
    }
    
    if (background.type === 'image' && background.image) {
      return `background-image: url(${background.image.src}); background-size: cover; background-position: center;`;
    }
    
    return 'background: #ffffff;';
  };
  
  // 格式化元素
  const formatElement = (element) => {
    const baseStyle = `
      left: ${element.left || 0}px;
      top: ${element.top || 0}px;
      width: ${element.width || 100}px;
      height: ${element.height || 100}px;
      transform: rotate(${element.rotate || 0}deg);
    `;
    
    if (element.type === 'text') {
      const fontFamily = element.fontName || 'Microsoft YaHei';
      const fontFallback = `${fontFamily}, 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'SimHei', 'SimSun', Arial, Helvetica, sans-serif`;
      
      const textStyle = `
        font-size: ${element.fontSize || 16}px;
        font-family: ${fontFallback};
        color: ${element.defaultColor || element.color || '#000000'};
        font-weight: ${element.bold ? 'bold' : 'normal'};
        font-style: ${element.italic ? 'italic' : 'normal'};
        text-decoration: ${element.underline ? 'underline' : 'none'};
        text-align: ${element.align || 'left'};
        line-height: ${element.lineHeight || 1.5};
        padding: 10px;
        word-wrap: break-word;
        overflow: hidden;
        box-sizing: border-box;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
      `;
      
      return `<div class="element text-element" style="${baseStyle}${textStyle}">${element.content || ''}</div>`;
    }
    
    if (element.type === 'image' && element.src) {
      return `<div class="element image-element" style="${baseStyle}"><img src="${element.src}" alt="图片" /></div>`;
    }
    
    if (element.type === 'shape') {
      const shapeStyle = `
        background: ${element.fill || '#ffffff'};
        border: ${element.outline?.width || 0}px solid ${element.outline?.color || '#000000'};
        border-radius: ${element.borderRadius || 0}px;
      `;
      
      return `<div class="element shape-element" style="${baseStyle}${shapeStyle}"></div>`;
    }
    
    // 其他元素类型的基本处理
    return `<div class="element" style="${baseStyle}"></div>`;
  };
  
  // 生成幻灯片HTML
  const slidesHTML = pptData.slides.map((slide, index) => {
    const slideBackground = formatSlideBackground(slide.background);
    const elementsHTML = slide.elements.map(element => formatElement(element)).join('');
    
    return `
      <div id="slide-${index}" class="slide ${index === 0 ? 'active' : ''}" style="${slideBackground}">
        ${elementsHTML}
      </div>
    `;
  }).join('');
  
  // 导航控件HTML
  const navigationHTML = includeInteractivity ? `
    <div class="navigation">
      <button id="prevBtn" class="nav-btn" onclick="window.pptViewer?.prevSlide()">上一页</button>
      <button id="nextBtn" class="nav-btn" onclick="window.pptViewer?.nextSlide()">下一页</button>
    </div>
    <div class="slide-counter">1 / ${pptData.slides.length}</div>
    <button class="fullscreen-btn" onclick="window.pptViewer?.toggleFullscreen()">全屏</button>
  ` : '';
  
  // 组装完整HTML
  return `<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>${pptData.title}</title>
  <meta name="description" content="PPTist导出的HTML演示文稿">
  <meta name="generator" content="PPTist">
  ${css}
</head>
<body>
  <div class="presentation-container">
    <div class="slide-container">
      ${slidesHTML}
    </div>
  </div>
  ${navigationHTML}
  ${javascript}
</body>
</html>`;
};