Upload 3 files

Dockerfile

@@ -27,6 +27,10 @@ RUN adduser -S nodejs -u 1001
 # 设置工作目录
 WORKDIR /app
 
+# 复制共享模块
+COPY shared/ ./shared/
+RUN chown -R nodejs:nodejs ./shared
+
 # 复制前端所有文件（包括配置文件）
 COPY frontend/ ./frontend/
 RUN chown -R nodejs:nodejs ./frontend

shared/export-utils.js

@@ -0,0 +1,730 @@
+// 前后端共享的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.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>`;
+};

shared/package.json

@@ -0,0 +1,6 @@
+{
+  "type": "module",
+  "name": "shared-export-utils",
+  "version": "1.0.0",
+  "description": "Shared export utilities for PPTist frontend and backend"
+}