Upload public.js

backend/src/routes/public.js

@@ -352,13 +352,13 @@ router.get('/screenshot/:userId/:pptId/:slideIndex?', async (req, res, next) =>
   }
 });
 
-// Image endpoint - Direct frontend export page
+// Image endpoint - 修改为直接返回图片，而不是截图工具页面
 router.get('/image/:userId/:pptId/:slideIndex?', async (req, res, next) => {
   try {
     const { userId, pptId, slideIndex = 0 } = req.params;
-    const { format = 'jpeg', quality = 90 } = req.query;
+    const { format = 'svg', quality = 90, width: requestWidth, height: requestHeight } = req.query;
     
-    console.log(`Image export request: userId=${userId}, pptId=${pptId}, slideIndex=${slideIndex}`);
+    console.log(`🖼️ Image request (direct): userId=${userId}, pptId=${pptId}, slideIndex=${slideIndex}, format=${format}`);
     
     // Get PPT data
     const fileName = `${pptId}.json`;
@@ -369,6 +369,7 @@ router.get('/image/:userId/:pptId/:slideIndex?', async (req, res, next) => {
         const result = await githubService.getFile(userId, fileName, i);
         if (result) {
           pptData = result.content;
+          console.log(`✅ PPT data found in repository ${i}`);
           break;
         }
       } catch (error) {
@@ -377,32 +378,78 @@ router.get('/image/:userId/:pptId/:slideIndex?', async (req, res, next) => {
     }
 
     if (!pptData) {
-      const errorPage = generateErrorPage('PPT Not Found', `PPT ${pptId} not found for user ${userId}`);
-      res.setHeader('Content-Type', 'text/html; charset=utf-8');
-      return res.status(404).send(errorPage);
+      console.log(`❌ PPT not found: ${pptId}`);
+      // 返回404图片SVG
+      const notFoundSvg = `<svg width="800" height="450" xmlns="http://www.w3.org/2000/svg">
+        <rect width="100%" height="100%" fill="#f8f9fa"/>
+        <text x="400" y="200" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" fill="#6c757d">PPT Not Found</text>
+        <text x="400" y="250" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6c757d">PPT ${pptId} does not exist</text>
+      </svg>`;
+      
+      res.setHeader('Content-Type', 'image/svg+xml; charset=utf-8');
+      res.setHeader('Cache-Control', 'no-cache');
+      res.setHeader('Access-Control-Allow-Origin', '*');
+      return res.send(notFoundSvg);
     }
 
     const slideIdx = parseInt(slideIndex);
     if (slideIdx >= pptData.slides.length || slideIdx < 0) {
-      const errorPage = generateErrorPage('Invalid Slide', `Slide ${slideIndex} not found in PPT`);
-      res.setHeader('Content-Type', 'text/html; charset=utf-8');
-      return res.status(404).send(errorPage);
+      console.log(`❌ Invalid slide index: ${slideIndex}`);
+      // 返回404幻灯片SVG
+      const invalidSlideSvg = `<svg width="800" height="450" xmlns="http://www.w3.org/2000/svg">
+        <rect width="100%" height="100%" fill="#f8f9fa"/>
+        <text x="400" y="200" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" fill="#6c757d">Invalid Slide</text>
+        <text x="400" y="250" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6c757d">Slide ${slideIndex} not found</text>
+      </svg>`;
+      
+      res.setHeader('Content-Type', 'image/svg+xml; charset=utf-8');
+      res.setHeader('Cache-Control', 'no-cache');
+      res.setHeader('Access-Control-Allow-Origin', '*');
+      return res.send(invalidSlideSvg);
     }
 
-    // 使用共享模块生成导出页面
-    const htmlPage = generateExportPage(pptData, slideIdx, {
-      format,
-      quality: parseInt(quality),
-      autoDownload: true // Auto-generate and download
+    console.log(`✅ Generating SVG for slide ${slideIdx}`);
+    
+    // 计算图片尺寸
+    const defaultWidth = pptData.viewportSize || 1000;
+    const defaultHeight = Math.ceil(defaultWidth * (pptData.viewportRatio || 0.5625));
+    const finalWidth = requestWidth ? parseInt(requestWidth) : defaultWidth;
+    const finalHeight = requestHeight ? parseInt(requestHeight) : defaultHeight;
+    
+    // 生成PPT幻灯片的SVG图片
+    const slide = pptData.slides[slideIdx];
+    const svgContent = generateSlideSVG(slide, pptData, { 
+      width: finalWidth, 
+      height: finalHeight 
     });
     
-    res.setHeader('Content-Type', 'text/html; charset=utf-8');
-    res.setHeader('X-Screenshot-Strategy', 'frontend-export-page');
-    res.setHeader('X-Generation-Time', '< 50ms');
-    res.send(htmlPage);
+    console.log(`✅ SVG generated successfully, size: ${svgContent.length} characters`);
+    
+    // 设置正确的响应头，使其可以被其他网站作为图片引用
+    res.setHeader('Content-Type', 'image/svg+xml; charset=utf-8');
+    res.setHeader('Cache-Control', 'public, max-age=3600'); // 缓存1小时
+    res.setHeader('Access-Control-Allow-Origin', '*'); // 允许跨域引用
+    res.setHeader('X-Generation-Time', '< 10ms');
+    res.setHeader('X-Content-Source', 'direct-svg-generation');
+    res.setHeader('Content-Disposition', 'inline'); // 确保浏览器内联显示图片
+    
+    // 直接返回SVG图片内容
+    res.send(svgContent);
     
   } catch (error) {
-    next(error);
+    console.error('❌ Image generation failed:', error);
+    
+    // 返回错误图片SVG
+    const errorSvg = `<svg width="800" height="450" xmlns="http://www.w3.org/2000/svg">
+      <rect width="100%" height="100%" fill="#ffe6e6"/>
+      <text x="400" y="200" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" fill="#cc0000">Generation Error</text>
+      <text x="400" y="250" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#cc0000">Failed to generate image: ${error.message}</text>
+    </svg>`;
+    
+    res.setHeader('Content-Type', 'image/svg+xml; charset=utf-8');
+    res.setHeader('Cache-Control', 'no-cache');
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    res.send(errorSvg);
   }
 });
 
@@ -508,6 +555,61 @@ router.get('/screenshot-health', async (req, res, next) => {
   }
 });
 
+// 新增：截图工具页面端点（原来的image端点功能）
+router.get('/screenshot-tool/:userId/:pptId/:slideIndex?', async (req, res, next) => {
+  try {
+    const { userId, pptId, slideIndex = 0 } = req.params;
+    const { format = 'jpeg', quality = 90 } = req.query;
+    
+    console.log(`Screenshot tool request: userId=${userId}, pptId=${pptId}, slideIndex=${slideIndex}`);
+    
+    // Get PPT data
+    const fileName = `${pptId}.json`;
+    let pptData = null;
+    
+    for (let i = 0; i < githubService.repositories.length; i++) {
+      try {
+        const result = await githubService.getFile(userId, fileName, i);
+        if (result) {
+          pptData = result.content;
+          console.log(`✅ PPT data found in repository ${i}`);
+          break;
+        }
+      } catch (error) {
+        continue;
+      }
+    }
+
+    if (!pptData) {
+      const errorPage = generateErrorPage('PPT Not Found', `PPT ${pptId} not found for user ${userId}`);
+      res.setHeader('Content-Type', 'text/html; charset=utf-8');
+      return res.status(404).send(errorPage);
+    }
+
+    const slideIdx = parseInt(slideIndex);
+    if (slideIdx >= pptData.slides.length || slideIdx < 0) {
+      const errorPage = generateErrorPage('Invalid Slide', `Slide ${slideIndex} not found in PPT`);
+      res.setHeader('Content-Type', 'text/html; charset=utf-8');
+      return res.status(404).send(errorPage);
+    }
+
+    // 使用共享模块生成导出页面
+    const htmlPage = generateExportPage(pptData, slideIdx, {
+      format,
+      quality: parseInt(quality),
+      autoDownload: false // 不自动下载，需要用户手动操作
+    });
+    
+    res.setHeader('Content-Type', 'text/html; charset=utf-8');
+    res.setHeader('X-Screenshot-Strategy', 'frontend-screenshot-tool');
+    res.setHeader('X-Generation-Time', '< 50ms');
+    res.send(htmlPage);
+    
+  } catch (error) {
+    next(error);
+  }
+});
+
 // 新增：PPT JSON导出端点
 router.get('/export-json/:userId/:pptId', async (req, res, next) => {
   try {
@@ -624,13 +726,13 @@ router.get('/presentation/:userId/:pptId', async (req, res, next) => {
   }
 });
 
-// 新增：直接返回图片的端点 - 返回纯SVG图片，可被其他网站直接引用
+// 新增：直接返回图片的端点 - 必须放在其他路由之前避免被覆盖
 router.get('/direct-image/:userId/:pptId/:slideIndex?', async (req, res, next) => {
   try {
     const { userId, pptId, slideIndex = 0 } = req.params;
     const { format = 'svg', quality = 90, width: requestWidth, height: requestHeight } = req.query;
     
-    console.log(`Direct image request: userId=${userId}, pptId=${pptId}, slideIndex=${slideIndex}, format=${format}`);
+    console.log(`🖼️ Direct image request: userId=${userId}, pptId=${pptId}, slideIndex=${slideIndex}, format=${format}`);
     
     // Get PPT data
     const fileName = `${pptId}.json`;
@@ -641,6 +743,7 @@ router.get('/direct-image/:userId/:pptId/:slideIndex?', async (req, res, next) =
         const result = await githubService.getFile(userId, fileName, i);
         if (result) {
           pptData = result.content;
+          console.log(`✅ PPT data found in repository ${i}`);
           break;
         }
       } catch (error) {
@@ -649,6 +752,7 @@ router.get('/direct-image/:userId/:pptId/:slideIndex?', async (req, res, next) =
     }
 
     if (!pptData) {
+      console.log(`❌ PPT not found: ${pptId}`);
       // 返回404图片SVG
       const notFoundSvg = `<svg width="800" height="450" xmlns="http://www.w3.org/2000/svg">
         <rect width="100%" height="100%" fill="#f8f9fa"/>
@@ -658,12 +762,13 @@ router.get('/direct-image/:userId/:pptId/:slideIndex?', async (req, res, next) =
       
       res.setHeader('Content-Type', 'image/svg+xml; charset=utf-8');
       res.setHeader('Cache-Control', 'no-cache');
-      res.setHeader('Access-Control-Allow-Origin', '*'); // 允许跨域引用
+      res.setHeader('Access-Control-Allow-Origin', '*');
       return res.send(notFoundSvg);
     }
 
     const slideIdx = parseInt(slideIndex);
     if (slideIdx >= pptData.slides.length || slideIdx < 0) {
+      console.log(`❌ Invalid slide index: ${slideIndex}`);
       // 返回404幻灯片SVG
       const invalidSlideSvg = `<svg width="800" height="450" xmlns="http://www.w3.org/2000/svg">
         <rect width="100%" height="100%" fill="#f8f9fa"/>
@@ -677,6 +782,8 @@ router.get('/direct-image/:userId/:pptId/:slideIndex?', async (req, res, next) =
       return res.send(invalidSlideSvg);
     }
 
+    console.log(`✅ Generating SVG for slide ${slideIdx}`);
+    
     // 计算图片尺寸
     const defaultWidth = pptData.viewportSize || 1000;
     const defaultHeight = Math.ceil(defaultWidth * (pptData.viewportRatio || 0.5625));
@@ -690,18 +797,21 @@ router.get('/direct-image/:userId/:pptId/:slideIndex?', async (req, res, next) =
       height: finalHeight 
     });
     
+    console.log(`✅ SVG generated successfully, size: ${svgContent.length} characters`);
+    
     // 设置正确的响应头，使其可以被其他网站作为图片引用
     res.setHeader('Content-Type', 'image/svg+xml; charset=utf-8');
     res.setHeader('Cache-Control', 'public, max-age=3600'); // 缓存1小时
     res.setHeader('Access-Control-Allow-Origin', '*'); // 允许跨域引用
     res.setHeader('X-Generation-Time', '< 10ms');
     res.setHeader('X-Content-Source', 'direct-svg-generation');
+    res.setHeader('Content-Disposition', 'inline'); // 确保浏览器内联显示图片
     
     // 直接返回SVG图片内容
     res.send(svgContent);
     
   } catch (error) {
-    console.error('Direct image generation failed:', error);
+    console.error('❌ Direct image generation failed:', error);
     
     // 返回错误图片SVG
     const errorSvg = `<svg width="800" height="450" xmlns="http://www.w3.org/2000/svg">