Upload 8 files

.env

@@ -0,0 +1,12 @@
+# PPTist Huggingface Space 环境配置
+
+# GitHub 配置
+GITHUB_TOKEN=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
+GITHUB_REPOS=https://github.com/CaPaCaptain/PPTist_huggingface_db
+
+# JWT 配置
+JWT_SECRET=pptist-secret-key-2025-huggingface
+
+# 应用配置
+NODE_ENV=production
+PORT=7860

.gitignore

@@ -0,0 +1,56 @@
+# Dependencies
+node_modules/
+*/node_modules/
+
+# Production builds
+dist/
+build/
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage directory used by tools like istanbul
+coverage/
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Editor directories and files
+.vscode/
+.idea/
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Package files
+*.tgz
+*.zip
+
+# Temporary files
+tmp/
+temp/

Dockerfile

@@ -0,0 +1,107 @@
+FROM node:18-alpine
+
+# 安装系统依赖（无头浏览器已禁用）
+RUN apk add --no-cache \
+    freetype \
+    freetype-dev \
+    harfbuzz \
+    ca-certificates \
+    ttf-freefont \
+    git \
+    python3 \
+    make \
+    g++ \
+    curl \
+    && rm -rf /var/cache/apk/*
+
+# 无头浏览器功能已禁用
+# ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true \
+#     PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser \
+#     PUPPETEER_CACHE_DIR=/tmp/.puppeteer_cache \
+#     PUPPETEER_ARGS="--no-sandbox --disable-setuid-sandbox --disable-dev-shm-usage" \
+#     PUPPETEER_DISABLE_HEADLESS_WARNING=true
+
+# 设置Playwright环境变量 - 强制使用系统chromium
+# ENV PLAYWRIGHT_BROWSERS_PATH=/usr/bin \
+#     PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=true \
+#     PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH=/usr/bin/chromium-browser \
+#     PLAYWRIGHT_SKIP_VALIDATE_HOST_REQUIREMENTS=true \
+#     PLAYWRIGHT_CHROMIUM_USE_HEADLESS_NEW=true
+
+# 创建非root用户
+RUN addgroup -g 1001 -S nodejs
+RUN adduser -S nodejs -u 1001
+
+# 创建数据目录并设置权限
+RUN mkdir -p /data /data/images /data/metadata /data/users && \
+    chown -R nodejs:nodejs /data
+
+# 创建缓存目录并设置权限
+RUN mkdir -p /home/node/.cache && chown -R nodejs:nodejs /home/node/.cache
+
+# 设置工作目录
+WORKDIR /app
+
+# 复制共享模块
+COPY shared/ ./shared/
+RUN chown -R nodejs:nodejs ./shared
+
+# 复制前端所有文件（包括配置文件）
+COPY frontend/ ./frontend/
+RUN chown -R nodejs:nodejs ./frontend
+
+# 复制根目录package.json
+COPY package*.json ./
+
+# 复制后端package.json和配置文件
+COPY backend/package*.json ./backend/
+COPY backend/.eslintrc.js ./backend/
+COPY backend/.prettierrc ./backend/
+COPY backend/babel.config.js ./backend/
+
+# 安装前端依赖并构建
+WORKDIR /app/frontend
+USER nodejs
+# 优化npm配置以提高构建稳定性
+RUN npm config set fetch-retry-mintimeout 20000 && \
+    npm config set fetch-retry-maxtimeout 120000 && \
+    npm config set fetch-timeout 300000
+RUN npm install
+RUN npm run build
+
+# 切换回root安装依赖
+USER root
+WORKDIR /app
+RUN npm install --omit=dev
+
+WORKDIR /app/backend
+RUN npm install --omit=dev
+
+# 验证系统依赖安装（chromium验证已移除）
+RUN echo "System dependencies installed successfully"
+
+# Playwright配置已禁用
+# RUN mkdir -p /home/node/.cache/ms-playwright && \
+#     echo '{"browsers":[{"name":"chromium","executablePath":"/usr/bin/chromium-browser"}]}' > /home/node/.cache/ms-playwright/browsers.json && \
+#     chown -R node:node /home/node/.cache
+
+# 复制后端代码
+WORKDIR /app
+COPY backend/ ./backend/
+RUN chown -R nodejs:nodejs ./backend
+
+# 设置工作目录为后端
+WORKDIR /app/backend
+
+# 切换到nodejs用户
+USER nodejs
+
+# 暴露端口
+EXPOSE 7860
+
+# 健康检查
+HEALTHCHECK --interval=30s --timeout=10s --start-period=15s --retries=3 \
+  CMD curl -f http://localhost:7860/api/health || exit 1
+
+# 启动应用
+CMD ["npm", "start"]

data/backup-state.json

@@ -0,0 +1,10 @@
+{
+  "lastBackupTime": null,
+  "backupStats": {
+    "totalBackups": 0,
+    "successfulBackups": 0,
+    "failedBackups": 0,
+    "lastBackupResult": null
+  },
+  "savedAt": "2025-07-01T08:20:12.496Z"
+}

data/persistent-links/link-map.json

@@ -0,0 +1,16 @@
+{
+  "version": "1.0",
+  "lastUpdated": "2025-06-30T08:51:50.490Z",
+  "persistentLinks": {
+    "bc11955adbe140b379d8": {
+      "linkId": "bc11955adbe140b379d8",
+      "userId": "PS02",
+      "pptId": "77330288-0b80-4c3b-987d-440b20282bc5",
+      "pageIndex": 0,
+      "createdAt": "2025-06-30T08:51:50.490Z",
+      "lastUpdated": "2025-06-30T08:51:50.490Z",
+      "updateCount": 0,
+      "hasImage": false
+    }
+  }
+}

requirements.md

@@ -0,0 +1,280 @@
+# 网页PPT后端系统需求文档
+
+## 项目概述
+
+本项目为网页PPT前端系统配套的后端服务，主要功能包括用户认证、PPT数据管理、分享功能、历史记录管理等。系统设计为部署在Hugging Face Space上，使用Docker容器化部署。
+
+## 技术架构
+
+### 部署环境
+- **平台**: Hugging Face Space
+- **容器化**: Docker
+- **运行时**: Node.js 18 Alpine
+- **端口**: 7860
+
+### 技术栈
+- **后端框架**: Express.js + TypeScript
+- **数据存储**: 
+  - 临时数据库：内存存储（最大12GB）
+  - 永久数据库：GitHub仓库
+- **图片处理**: Sharp
+- **定时任务**: node-cron
+- **安全**: Helmet, bcryptjs, express-rate-limit
+
+## 功能需求
+
+### 1. 用户认证系统
+
+#### 1.1 内置账户
+系统不支持公开注册，仅提供4个预配置账户：
+
+| 用户名 | 密码 | 角色 |
+|--------|------|------|
+| PS01 | admin_cybercity2025 | admin |
+| PS02 | cybercity2025 | user |
+| PS03 | cybercity2025 | user |
+| PS04 | cybercity2025 | user |
+
+#### 1.2 认证功能
+- JWT token认证
+- 登录失败锁定机制（5次失败锁定30分钟）
+- 密码加密存储（bcrypt）
+- 会话管理
+
+### 2. 数据存储架构
+
+#### 2.1 临时数据库（内存）
+- **存储介质**: Hugging Face Space内存
+- **容量限制**: 最大12GB
+- **数据类型**:
+  - 用户信息
+  - PPT编辑数据
+  - 导出的PPT页面截图
+  - 分享链接数据
+- **自动保存**: 每10分钟自动保存修改的数据
+
+#### 2.2 永久数据库（GitHub）
+- **存储介质**: GitHub仓库
+- **同步策略**: 每天03:00自动同步修改的数据
+- **配置方式**: Space环境变量
+  - `GITHUB_TOKEN`: GitHub访问令牌
+  - `GITHUB_REPO`: 仓库地址（格式：owner/repo）
+- **数据恢复**: Space重启时自动从GitHub同步数据
+
+#### 2.3 数据同步规则
+- **增量同步**: 仅同步修改的数据，未修改数据不同步
+- **容量控制**: 同步数据量超过7GB时，仅同步最近的数据
+- **按需加载**: 用户访问早期数据时，临时从GitHub拉取
+
+### 3. PPT分享功能
+
+#### 3.1 分享机制
+- 在前端PPT页面缩略图上添加分享按钮
+- 点击按钮调用前端导出图片功能
+- 导出JPEG格式截图
+- 保存到内存临时数据库
+- 生成永久唯一公网链接
+
+#### 3.2 链接管理
+- 链接是长期有效并且唯一的
+- 链接格式：`/api/sharelink/{PPT的slideID}`
+- 外网可通过链接直接访问图片
+- 如果ppt修改，保存后将自动更新图片并按同样的流程上传内存数据库替换旧图片，外界通过这个链接读取更新的图片
+- 访问日志记录
+
+#### 3.3 自动更新
+- PPT页面修改后，用户保存数据时自动重新生成截图
+- 覆盖内存中的原截图
+- 公网链接保持不变
+- 外网访问获得更新后的页面
+
+### 4. 历史PPT管理
+
+#### 4.1 管理界面
+- 前端页面顶部添加历史PPT管理按钮
+- 弹出历史PPT管理界面
+- 支持分页显示（默认20条/页）
+- 支持搜索和筛选功能
+
+#### 4.2 数据加载策略
+- 优先从内存数据库读取
+- 内存中不存在需要的数据再从GitHub仓库拉取，这部分数据编辑后保存自动同步回内存数据库
+- 支持按需加载早期数据
+- 提供加载状态指示
+
+#### 4.3 管理功能
+- 查看PPT列表
+- 打开历史PPT
+- 复制PPT
+- 删除PPT
+- 导出PPT
+
+### 5. API接口设计
+
+#### 5.1 认证接口
+```
+POST /api/auth/login          # 用户登录
+GET  /api/auth/verify         # 验证token
+POST /api/auth/logout         # 用户登出
+GET  /api/auth/me             # 获取用户信息
+```
+
+#### 5.2 PPT管理接口
+```
+POST /api/ppt/save            # 保存PPT
+PUT  /api/ppt/:id             # 更新PPT
+GET  /api/ppt/:id             # 获取PPT详情
+DELETE /api/ppt/:id           # 删除PPT
+GET  /api/ppt                 # 获取PPT列表
+POST /api/ppt/:id/copy        # 复制PPT
+```
+
+#### 5.3 分享接口
+```
+POST /api/share/slide         # 分享幻灯片
+GET  /api/share/view/:shareId # 查看分享截图
+GET  /api/share/info/:shareId # 获取分享信息
+GET  /api/share/my-shares     # 获取我的分享
+DELETE /api/share/:shareId    # 删除分享
+```
+
+#### 5.4 历史管理接口
+```
+GET  /api/history/ppts        # 获取历史PPT列表
+GET  /api/history/ppts/:id/from-github # 从GitHub获取PPT
+POST /api/history/search      # 搜索历史PPT
+GET  /api/history/stats       # 获取统计信息
+```
+
+### 6. 安全要求
+
+#### 6.1 认证安全
+- JWT token过期时间：24小时
+- 密码加密：bcrypt（12轮）
+- 登录失败锁定：5次失败锁定30分钟
+
+#### 6.2 API安全
+- 请求频率限制：100请求/15分钟
+- CORS配置
+- Helmet安全头
+- 输入验证和清理
+
+#### 6.3 数据安全
+- 用户数据隔离
+- 敏感信息不记录日志
+- GitHub token安全存储
+
+### 7. 性能要求
+
+#### 7.1 响应时间
+- API响应时间 < 500ms
+- 图片加载时间 < 2s
+- PPT列表加载 < 1s
+
+#### 7.2 并发处理
+- 支持同时100个用户在线
+- 数据库操作异步处理
+- 图片压缩优化
+
+#### 7.3 内存管理
+- 内存使用监控
+- 自动清理过期数据
+- 数据压缩存储
+
+### 8. 监控和日志
+
+#### 8.1 日志记录
+- 用户操作日志
+- 系统错误日志
+- 性能监控日志
+- GitHub同步日志
+
+#### 8.2 健康检查
+- 服务健康状态检查
+- 数据库连接状态
+- GitHub连接状态
+- 内存使用情况
+
+### 9. 部署配置
+
+#### 9.1 环境变量
+```bash
+# 基础配置
+PORT=5000
+NODE_ENV=production
+
+# GitHub配置
+GITHUB_TOKEN=your-github-token
+GITHUB_REPO=owner/repo-name
+GITHUB_BRANCH=main
+
+# 可选配置
+MAX_MEMORY_GB=7
+AUTO_SAVE_INTERVAL=10
+SYNC_HOUR=0
+```
+
+#### 9.2 Docker配置
+- 基础镜像：node:18-alpine
+- 工作目录：/app
+- 数据目录：/app/data
+- 健康检查：GET /health
+
+### 10. 维护和扩展
+
+#### 10.1 数据备份
+- 自动GitHub同步
+- 手动备份功能
+- 数据恢复机制
+
+#### 10.2 系统维护
+- 日志轮转
+- 内存清理
+- 性能优化
+
+#### 10.3 功能扩展
+- 支持更多用户
+- 增加协作功能
+- 优化存储策略
+
+## 项目结构
+
+```
+backend/
+├── src/
+│   ├── config/           # 配置文件
+│   ├── middleware/       # 中间件
+│   ├── routes/          # 路由
+│   ├── services/        # 服务层
+│   ├── types/           # 类型定义
+│   ├── utils/           # 工具函数
+│   └── index.ts         # 入口文件
+├── data/                # 数据目录
+├── Dockerfile           # Docker配置
+├── package.json         # 依赖配置
+├── tsconfig.json        # TypeScript配置
+└── requirements.md      # 需求文档
+```
+
+## 开发和测试
+
+### 开发环境
+```bash
+npm install
+npm run dev
+```
+
+### 生产构建
+```bash
+npm run build
+npm start
+```
+
+### 测试
+```bash
+npm test
+```
+
+## 总结
+
+本后端系统为网页PPT应用提供完整的数据管理、用户认证、分享功能和历史记录管理。通过内存+GitHub的双重存储策略，确保数据的可靠性和访问性能。系统设计考虑了Hugging Face Space的特点和限制，提供了完整的解决方案。

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/html2canvas@1.4.1/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>`;
+};

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"
+}