Upload 57 files

frontend/src/services/dataSyncService.ts

@@ -1,13 +1,13 @@
 import api from '@/services'
 import { debounce } from 'lodash'
-// 添加前端截图支持
-import { toPng, toJpeg, toSvg } from 'html-to-image'
+// Using html2canvas instead of html-to-image for better compatibility
+// import { toJpeg } from 'html-to-image'
 
 class DataSyncService {
   private currentPPTId: string | null = null
   private saveTimeout: number | null = null
   private isOnline = true
-  private autoSaveDelay = 300000 // 默认5分钟，可配置
+  private autoSaveDelay = 300000 // Default 5 minutes, configurable
   private isInitialized = false
   private debouncedSave: any = null
 
@@ -15,32 +15,32 @@ class DataSyncService {
     this.setupNetworkMonitoring()
   }
 
-  // 延迟初始化，在 Pinia 可用后调用
+  // Delayed initialization, called after Pinia is available
   async initialize() {
     if (this.isInitialized) return
     await this.setupAutoSave()
     this.isInitialized = true
   }
 
-  // 设置自动保存延迟时间（毫秒）
+  // Set auto-save delay time (milliseconds)
   setAutoSaveDelay(delay: number) {
-    this.autoSaveDelay = Math.max(500, delay) // 最小500ms
+    this.autoSaveDelay = Math.max(500, delay) // Minimum 500ms
     if (this.isInitialized) {
-      this.setupAutoSave() // 重新设置自动保存
+      this.setupAutoSave() // Reset auto-save
     }
   }
 
-  // 获取当前自动保存延迟时间
+  // Get current auto-save delay time
   getAutoSaveDelay(): number {
     return this.autoSaveDelay
   }
 
-  // 设置当前PPT ID
+  // Set current PPT ID
   setCurrentPPTId(pptId: string) {
     this.currentPPTId = pptId
   }
 
-  // 自动保存功能
+  // Auto-save functionality
   private async setupAutoSave() {
     if (this.debouncedSave) {
       this.debouncedSave.cancel()
@@ -48,9 +48,9 @@ class DataSyncService {
 
     this.debouncedSave = debounce(async () => {
       await this.savePPT()
-    }, this.autoSaveDelay) // 使用可配置的延迟时间
+    }, this.autoSaveDelay) // Use configurable delay time
 
-    // 监听slides变化
+    // Listen for slides changes
     try {
       const { useSlidesStore } = await import('@/store')
       const slidesStore = useSlidesStore()
@@ -61,26 +61,26 @@ class DataSyncService {
       })
     } 
     catch (error) {
-      // console.warn('无法设置自动保存，store 未就绪:', error)
+      // console.warn('Unable to set up auto-save, store not ready:', error)
     }
   }
 
-  // 网络状态监控
+  // Network status monitoring
   private setupNetworkMonitoring() {
     window.addEventListener('online', () => {
       this.isOnline = true
-      // console.log('网络已连接，恢复自动保存')
+      // console.log('Network connected, resuming auto-save')
     })
 
     window.addEventListener('offline', () => {
       this.isOnline = false
-      // console.log('网络已断开，暂停自动保存')
+      // console.log('Network disconnected, pausing auto-save')
     })
   }
 
-  // 保存PPT到后端
+  // Save PPT to backend
   async savePPT(force = false): Promise<boolean> {
-    // 动态导入 store，避免初始化时的依赖问题
+    // Dynamically import store to avoid dependency issues during initialization
     const { useAuthStore, useSlidesStore } = await import('@/store')
     
     try {
@@ -88,34 +88,34 @@ class DataSyncService {
       const slidesStore = useSlidesStore()
 
       if (!authStore.isLoggedIn) {
-        // console.warn('用户未登录，无法保存')
+        // console.warn('User not logged in, unable to save')
         return false
       }
 
-      // 如果没有当前PPT ID且是强制保存，创建新PPT
+      // If no current PPT ID and forced save, create new PPT
       if (!this.currentPPTId && force) {
         try {
-          const response = await api.createPPT(slidesStore.title || '未命名演示文稿')
+          const response = await api.createPPT(slidesStore.title || 'Untitled Presentation')
           this.currentPPTId = response.pptId
           
-          // 更新slides store中的数据以匹配新创建的PPT
+          // Update slides store data to match newly created PPT
           if (response.ppt) {
             slidesStore.setSlides(response.ppt.slides)
             slidesStore.setTitle(response.ppt.title)
             slidesStore.setTheme(response.ppt.theme)
           }
           
-          // console.log('创建新PPT并保存成功')
+          // console.log('Created new PPT and saved successfully')
           return true
         } 
         catch (createError) {
-          // console.error('创建新PPT失败:', createError)
+          // console.error('Failed to create new PPT:', createError)
           return false
         }
       }
 
       if (!this.currentPPTId && !force) {
-        // console.warn('没有当前PPT ID')
+        // console.warn('No current PPT ID')
         return false
       }
 
@@ -124,28 +124,28 @@ class DataSyncService {
         title: slidesStore.title,
         slides: slidesStore.slides,
         theme: slidesStore.theme,
-        // 添加关键的尺��信息
+        // Add critical size information
         viewportSize: slidesStore.viewportSize,
         viewportRatio: slidesStore.viewportRatio
       }
 
       await api.savePPT(pptData)
-      // console.log('PPT保存成功')
+      // console.log('PPT saved successfully')
       return true
     } 
     catch (error) {
-      // console.error('PPT保存失败:', error)
+      // console.error('Failed to save PPT:', error)
       return false
     }
   }
 
-  // 创建新PPT
+  // Create new PPT
   async createNewPPT(title: string): Promise<string | null> {
     const { useAuthStore } = await import('@/store')
     const authStore = useAuthStore()
 
     if (!authStore.isLoggedIn) {
-      throw new Error('用户未登录')
+      throw new Error('User not logged in')
     }
 
     try {
@@ -154,85 +154,155 @@ class DataSyncService {
       return response.pptId
     } 
     catch (error) {
-      // console.error('创建PPT失败:', error)
+      // console.error('Failed to create PPT:', error)
       throw error
     }
   }
 
-  // 加载PPT
+  // Load PPT
   async loadPPT(pptId: string): Promise<boolean> {
     const { useAuthStore, useSlidesStore } = await import('@/store')
     const authStore = useAuthStore()
     const slidesStore = useSlidesStore()
-
+    
     if (!authStore.isLoggedIn) {
-      throw new Error('用户未登录')
+      throw new Error('User not logged in')
     }
-
+    
     try {
+      // console.log(`🔍 Starting to load PPT: ${pptId}`)
       const pptData = await api.getPPT(pptId)
       
-      slidesStore.setSlides(pptData.slides)
-      slidesStore.setTitle(pptData.title)
+      if (!pptData) {
+        throw new Error('PPT data is empty')
+      }
+      
+      // console.log('📋 PPT data loaded successfully, updating store:', {...})
+      
+      // Fix: Ensure complete PPT data is loaded and set in correct order
+      
+      // 1. First set viewport information to ensure correct canvas size
+      if (pptData.viewportSize && pptData.viewportSize > 0) {
+        slidesStore.setViewportSize(pptData.viewportSize)
+        // console.log('✅ Viewport size set successfully:', pptData.viewportSize)
+      }
+      else {
+        // console.log('⚠️ Using default viewport size: 1000')
+        slidesStore.setViewportSize(1000)
+      }
+      
+      if (pptData.viewportRatio && pptData.viewportRatio > 0) {
+        slidesStore.setViewportRatio(pptData.viewportRatio)
+        // console.log('✅ Viewport ratio set successfully:', pptData.viewportRatio)
+      }
+      else {
+        // console.log('⚠️ Using default viewport ratio: 0.5625')
+        slidesStore.setViewportRatio(0.5625)
+      }
+      
+      // 2. Set theme
       if (pptData.theme) {
         slidesStore.setTheme(pptData.theme)
+        // console.log('✅ Theme set successfully')
       }
       
-      this.setCurrentPPTId(pptId)
-      // console.log('PPT加载成功')
+      // 3. Set title
+      slidesStore.setTitle(pptData.title || 'Untitled Presentation')
+      // console.log('✅ Title set successfully:', pptData.title)
+      
+      // 4. Finally set slides, ensuring it is done after viewport information is set
+      if (Array.isArray(pptData.slides) && pptData.slides.length > 0) {
+        // Validate slides data integrity
+        const validSlides = pptData.slides.filter((slide: any) => 
+          slide && typeof slide === 'object' && Array.isArray(slide.elements)
+        )
+        
+        if (validSlides.length !== pptData.slides.length) {
+          // console.warn(`⚠️ Found ${pptData.slides.length - validSlides.length} invalid slides, filtered out`)
+        }
+        
+        slidesStore.setSlides(validSlides)
+        // console.log('✅ Slides set successfully:', validSlides.length, 'pages')
+      }
+      else {
+        // console.warn('⚠️ PPT has no valid slides, creating default slide')
+        slidesStore.setSlides([{
+          id: 'default-slide',
+          elements: [],
+          background: { type: 'solid', color: '#ffffff' }
+        }])
+      }
+      
+      // 5. Set current PPT ID
+      const actualPptId = pptData.id || pptData.pptId || pptId
+      this.setCurrentPPTId(actualPptId)
+      // console.log('✅ PPT ID set successfully:', actualPptId)
+      
+      // console.log('🎉 PPT loaded successfully!')
       return true
     } 
-    catch (error) {
-      // console.error('PPT加载失败:', error)
-      throw error
+    catch (error: any) {
+      // console.error('❌ Failed to load PPT:', { pptId, error: error.message, stack: error.stack })
+      
+      // Provide more specific error information
+      if (error.message?.includes('404') || error.message?.includes('not found')) {
+        throw new Error(`PPT not found (ID: ${pptId})`)
+      }
+      if (error.message?.includes('403') || error.message?.includes('unauthorized')) {
+        throw new Error('No access permission')
+      }
+      if (error.message?.includes('Network')) {
+        throw new Error('Network connection failed, please check network status')
+      }
+      throw new Error(`Failed to load: ${error.message}`)
     }
   }
 
-  // 获取PPT列表
+  // Get PPT list
   async getPPTList() {
     const { useAuthStore } = await import('@/store')
     const authStore = useAuthStore()
 
     if (!authStore.isLoggedIn) {
-      throw new Error('用户未登录')
+      throw new Error('User not logged in')
     }
 
     return await api.getPPTList()
   }
 
-  // 删除PPT
+  // Delete PPT
   async deletePPT(pptId: string): Promise<boolean> {
     const { useAuthStore } = await import('@/store')
     const authStore = useAuthStore()
 
     if (!authStore.isLoggedIn) {
-      throw new Error('用户未登录')
+      throw new Error('User not logged in')
     }
 
     try {
       await api.deletePPT(pptId)
       
-      // 如果删除的是当前PPT，清除当前PPT ID
+      // If the deleted PPT is the current PPT, clear the current PPT ID
       if (this.currentPPTId === pptId) {
         this.currentPPTId = null
       }
       
-      // console.log('PPT删除成功')
+      // console.log('PPT deleted successfully')
       return true
     } 
     catch (error) {
-      // console.error('PPT删除失败:', error)
+      // console.error('Failed to delete PPT:', error)
       throw error
     }
   }
 
-  // 生成分享链接
+  // Generate share link
   async generateShareLink(slideIndex = 0) {
     const { useAuthStore } = await import('@/store')
     const authStore = useAuthStore()
 
     if (!authStore.isLoggedIn || !this.currentPPTId) {
-      throw new Error('用户未登录或没有当前PPT')
+      throw new Error('User not logged in or no current PPT')
     }
 
     try {
@@ -244,83 +314,293 @@ class DataSyncService {
       return response
     } 
     catch (error) {
-      // console.error('生成分享链接失败:', error)
+      // console.error('Failed to generate share link:', error)
       throw error
     }
   }
 
-  // 手动保存
+  // Manual save
   async manualSave(): Promise<boolean> {
     return await this.savePPT(true)
   }
 
-  // 前端截图功能 - 作为后端截图的备用方案
-  async generateFrontendScreenshot(elementId = 'slideContainer', options = {}) {
-    try {
-      const element = document.getElementById(elementId)
-      if (!element) {
-        throw new Error(`Element with id '${elementId}' not found`)
-      }
+  // New screenshot solution: use direct image API
+  async generateScreenshotUrl(slideIndex = 0, options: any = {}) {
+    const { useAuth = true, format = 'jpeg', quality = 90 } = options;
+    
+    if (useAuth) {
+      const { useAuthStore } = await import('@/store')
+      const authStore = useAuthStore()
 
-      const defaultOptions = {
-        quality: 0.95,
-        pixelRatio: 1,
-        backgroundColor: '#ffffff',
-        ...options
+      if (!authStore.isLoggedIn || !this.currentPPTId) {
+        throw new Error('User not logged in or no current PPT')
       }
 
-      console.log('🖼️ 开始前端截图生成...')
+      const baseUrl = window.location.origin
       
-      // 使用html-to-image生成截图
-      const imageDataUrl = await toJpeg(element, defaultOptions)
+      // 🔧 NEW: Use frontend screenshot data API for direct generation
+      console.log('🚀 Using new frontend screenshot strategy...')
       
-      console.log('✅ 前端截图生成成功')
-      return imageDataUrl
-    } catch (error) {
-      console.error('❌ 前端截图生成失败:', error)
-      throw error
+      try {
+        // Get PPT data for frontend generation
+        const dataResponse = await fetch(`${baseUrl}/api/public/screenshot-data/${authStore.currentUser!.id}/${this.currentPPTId}/${slideIndex}`)
+        
+        if (dataResponse.ok) {
+          const screenshotData = await dataResponse.json()
+          
+          // Return data for frontend direct generation
+          return {
+            type: 'frontend-data',
+            data: screenshotData,
+            isDataUrl: false,
+            info: {
+              format,
+              quality,
+              strategy: 'frontend-direct-generation',
+              pptTitle: screenshotData.pptData?.title,
+              slideIndex: screenshotData.slideIndex,
+              dimensions: `${screenshotData.exportConfig?.width}x${screenshotData.exportConfig?.height}`
+            }
+          }
+        }
+      } catch (error) {
+        console.warn('Frontend data API failed, falling back to export page:', error)
+      }
+      
+      // Fallback: Frontend export page (user opens in new tab)
+      const frontendExportUrl = `${baseUrl}/api/public/image/${authStore.currentUser!.id}/${this.currentPPTId}/${slideIndex}?format=${format}&quality=${quality}`
+      
+      return {
+        type: 'frontend-export-page',
+        url: frontendExportUrl,
+        isDataUrl: false,
+        info: {
+          format,
+          quality,
+          strategy: 'frontend-export-page',
+          usage: 'Open this URL in a new tab to generate and download screenshot'
+        }
+      }
+    } else {
+      // Public access mode
+      const baseUrl = window.location.origin
+      return {
+        type: 'frontend-export-page-public',
+        url: `${baseUrl}/api/public/image/public/public/${slideIndex}?format=${format}&quality=${quality}`,
+        isDataUrl: false
+      }
     }
   }
 
-  // 生成PPT截图链接（优先使用后端，失败时尝试前端）
-  async generateScreenshotUrl(slideIndex = 0, useFrontend = false) {
+  // Get PPT screenshot data (for frontend direct rendering)
+  async getScreenshotData(slideIndex = 0) {
     const { useAuthStore } = await import('@/store')
     const authStore = useAuthStore()
 
     if (!authStore.isLoggedIn || !this.currentPPTId) {
-      throw new Error('用户未登录或没有当前PPT')
+      throw new Error('User not logged in or no current PPT')
+    }
+
+    try {
+      const baseUrl = window.location.origin
+      const response = await fetch(`${baseUrl}/api/public/screenshot-data/${authStore.currentUser!.id}/${this.currentPPTId}/${slideIndex}`)
+      
+      if (!response.ok) {
+        throw new Error(`Failed to get screenshot data: ${response.status}`)
+      }
+
+      const data = await response.json()
+      return data
+    } catch (error: any) {
+      console.error('❌ Failed to get screenshot data:', error)
+      throw new Error(`Failed to get screenshot data: ${error.message}`)
     }
+  }
 
-    const baseUrl = window.location.origin
-    const backendScreenshotUrl = `${baseUrl}/api/public/screenshot/${authStore.currentUser!.id}/${this.currentPPTId}/${slideIndex}`
+  // Generate screenshot directly in current page (best solution)
+  async generateDirectScreenshot(slideIndex = 0, options: any = {}) {
+    try {
+      const { useSlidesStore } = await import('@/store')
+      const slidesStore = useSlidesStore()
+      
+      // Check if slide data is available
+      if (!slidesStore.slides || slideIndex >= slidesStore.slides.length) {
+        throw new Error('Invalid slide index or no slides available')
+      }
 
-    if (useFrontend) {
-      try {
-        // 尝试前端截图
-        const frontendScreenshot = await this.generateFrontendScreenshot()
-        return {
-          type: 'frontend',
-          url: frontendScreenshot,
-          isDataUrl: true
+      const {
+        format = 'jpeg',
+        quality = 90,
+        width = slidesStore.viewportSize || 1000,
+        height = Math.ceil((slidesStore.viewportSize || 1000) * (slidesStore.viewportRatio || 0.562)),
+        elementSelector = '.canvas-main, .slide-container, .editor-main'
+      } = options
+
+      // Find screenshot target element
+      let targetElement: HTMLElement | null = null
+      const selectors = elementSelector.split(',').map((s: string) => s.trim())
+      
+      for (const selector of selectors) {
+        targetElement = document.querySelector(selector) as HTMLElement
+        if (targetElement) {
+          console.log(`✅ Found screenshot target element: ${selector}`)
+          break
         }
-      } catch (frontendError) {
-        console.warn('前端截图失败，回退到后端URL:', frontendError.message)
-        return {
-          type: 'backend',
-          url: backendScreenshotUrl,
-          isDataUrl: false
+      }
+
+      if (!targetElement) {
+        throw new Error(`Screenshot target element not found. Tried selectors: ${selectors.join(', ')}`)
+      }
+
+      // Dynamically load html2canvas
+      const html2canvas = await this.loadHtml2Canvas()
+      
+      console.log('🖼️ Starting to generate direct screenshot...', { width, height, quality })
+      
+      // Wait for fonts and images to load
+      await this.ensureResourcesReady()
+      
+      // Generate screenshot
+      const canvas = await html2canvas(targetElement, {
+        width,
+        height,
+        scale: 2, // High resolution
+        useCORS: true,
+        allowTaint: true,
+        backgroundColor: slidesStore.theme?.backgroundColor || '#ffffff',
+        logging: false,
+        onclone: function(clonedDoc) {
+          // Ensure correct fonts in cloned document
+          const clonedElements = clonedDoc.querySelectorAll('*')
+          clonedElements.forEach((el: any) => {
+            if (el.style) {
+              el.style.fontFamily = 'Microsoft YaHei, PingFang SC, Hiragino Sans GB, Source Han Sans SC, Noto Sans SC, WenQuanYi Micro Hei, SimHei, SimSun, Arial, Helvetica, sans-serif'
+            }
+          })
         }
+      })
+
+      // Convert to specified format
+      const imageDataUrl = canvas.toDataURL(`image/${format}`, quality / 100)
+      
+      console.log('✅ Direct screenshot generated successfully, size:', imageDataUrl.length)
+      
+      return {
+        type: 'direct-frontend',
+        url: imageDataUrl,
+        isDataUrl: true,
+        width: canvas.width,
+        height: canvas.height,
+        format,
+        quality
       }
+      
+    } catch (error: any) {
+      console.error('❌ Failed to generate direct screenshot:', error)
+      
+      // Fallback to frontend export page solution
+      console.log('🔄 Falling back to frontend export page solution...')
+      return await this.generateScreenshotUrl(slideIndex, options)
     }
+  }
 
-    return {
-      type: 'backend',
-      url: backendScreenshotUrl,
-      isDataUrl: false
+  // Dynamically load html2canvas library
+  private async loadHtml2Canvas(): Promise<any> {
+    // Check if already loaded
+    if ((window as any).html2canvas) {
+      return (window as any).html2canvas
     }
+
+    return new Promise((resolve, reject) => {
+      const script = document.createElement('script')
+      script.src = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js'
+      script.onload = () => {
+        resolve((window as any).html2canvas)
+      }
+      script.onerror = (error) => {
+        reject(new Error('Failed to load html2canvas library'))
+      }
+      document.head.appendChild(script)
+    })
+  }
+
+  // Wait for resources to be ready
+  private async ensureResourcesReady(): Promise<void> {
+    // Wait for font loading
+    if (document.fonts && document.fonts.ready) {
+      await document.fonts.ready
+    }
+
+    // Wait for image loading
+    const images = document.querySelectorAll('img')
+    const imagePromises = Array.from(images).map(img => {
+      if (img.complete) return Promise.resolve()
+      
+      return new Promise((resolve) => {
+        img.onload = () => resolve(void 0)
+        img.onerror = () => resolve(void 0) // Continue even if failed
+        setTimeout(() => resolve(void 0), 2000) // 2 second timeout
+      })
+    })
+
+    await Promise.all(imagePromises)
+    
+    // Additional wait to ensure rendering is complete
+    await new Promise(resolve => setTimeout(resolve, 300))
+  }
+
+  // Simplified frontend screenshot generation (for compatibility)
+  async generateFrontendScreenshot(elementId = 'slideContainer', options: any = {}) {
+    console.warn('⚠️ generateFrontendScreenshot is deprecated, use generateDirectScreenshot instead')
+    return await this.generateDirectScreenshot(0, { ...options, elementSelector: `#${elementId}` })
+  }
+
+  // Ensure element is fully rendered (for compatibility)
+  ensureElementReady(element: HTMLElement) {
+    console.warn('⚠️ ensureElementReady is deprecated, now using ensureResourcesReady')
+    return this.ensureResourcesReady()
+  }
+
+  // Generate frontend fallback screenshot (for compatibility)
+  generateFallbackScreenshot(width = 1000, height = 562) {
+    const canvas = document.createElement('canvas')
+    canvas.width = width
+    canvas.height = height
+    const ctx = canvas.getContext('2d')
+
+    if (!ctx) return ''
+
+    // Draw background
+    const gradient = ctx.createLinearGradient(0, 0, width, height)
+    gradient.addColorStop(0, '#f8f9fa')
+    gradient.addColorStop(1, '#e9ecef')
+    ctx.fillStyle = gradient
+    ctx.fillRect(0, 0, width, height)
+
+    // Draw border
+    ctx.strokeStyle = '#dee2e6'
+    ctx.lineWidth = 3
+    ctx.setLineDash([15, 10])
+    ctx.strokeRect(20, 20, width - 40, height - 40)
+
+    // Optimized font rendering
+    ctx.fillStyle = '#495057'
+    ctx.font = 'bold 32px "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans SC", "WenQuanYi Micro Hei", "SimHei", "SimSun", Arial, sans-serif'
+    ctx.textAlign = 'center'
+    ctx.fillText('PPT Preview', width / 2, height * 0.35)
+
+    ctx.fillStyle = '#6c757d'
+    ctx.font = '18px "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans SC", "WenQuanYi Micro Hei", "SimHei", "SimSun", Arial, sans-serif'
+    ctx.fillText('Frontend Screenshot Service', width / 2, height * 0.5)
+
+    ctx.fillStyle = '#adb5bd'
+    ctx.font = '16px "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans SC", "WenQuanYi Micro Hei", "SimHei", "SimSun", Arial, sans-serif'
+    ctx.fillText(`Size: ${width} × ${height}`, width / 2, height * 0.6)
+
+    return canvas.toDataURL('image/jpeg', 0.9)
   }
 }
 
-// 创建单例实例
+// Create singleton instance
 export const dataSyncService = new DataSyncService()
 export default dataSyncService

frontend/src/store/auth.ts

@@ -1,85 +1,85 @@
-import { defineStore } from 'pinia'
-import api from '@/services'
-
-interface User {
-  id: string
-  username: string
-  role: string
-}
-
-interface AuthState {
-  user: User | null
-  token: string | null
-  isAuthenticated: boolean
-}
-
-export const useAuthStore = defineStore('auth', {
-  state: (): AuthState => ({
-    user: null,
-    token: localStorage.getItem('pptist_token'),
-    isAuthenticated: false
-  }),
-
-  getters: {
-    currentUser: (state) => state.user,
-    isLoggedIn: (state) => state.isAuthenticated && !!state.token,
-    userRole: (state) => state.user?.role || 'guest'
-  },
-
-  actions: {
-    async login(username: string, password: string) {
-      try {
-        const response = await api.login(username, password)
-        this.token = response.token
-        this.user = response.user
-        this.isAuthenticated = true
-        
-        localStorage.setItem('pptist_token', response.token)
-        localStorage.setItem('pptist_user', JSON.stringify(response.user))
-        
-        return response
-      } catch (error) {
-        this.logout()
-        throw error
-      }
-    },
-
-    async verifyToken() {
-      if (!this.token) {
-        this.logout()
-        return false
-      }
-
-      try {
-        const response = await api.verifyToken()
-        this.user = response.user
-        this.isAuthenticated = true
-        return true
-      } catch (error) {
-        this.logout()
-        return false
-      }
-    },
-
-    logout() {
-      this.user = null
-      this.token = null
-      this.isAuthenticated = false
-      
-      localStorage.removeItem('pptist_token')
-      localStorage.removeItem('pptist_user')
-    },
-
-    async initAuth() {
-      const savedUser = localStorage.getItem('pptist_user')
-      if (savedUser && this.token) {
-        try {
-          this.user = JSON.parse(savedUser)
-          await this.verifyToken()
-        } catch (error) {
-          this.logout()
-        }
-      }
-    }
-  }
+import { defineStore } from 'pinia'
+import api from '@/services'
+
+interface User {
+  id: string
+  username: string
+  role: string
+}
+
+interface AuthState {
+  user: User | null
+  token: string | null
+  isAuthenticated: boolean
+}
+
+export const useAuthStore = defineStore('auth', {
+  state: (): AuthState => ({
+    user: null,
+    token: localStorage.getItem('pptist_token'),
+    isAuthenticated: false
+  }),
+
+  getters: {
+    currentUser: (state) => state.user,
+    isLoggedIn: (state) => state.isAuthenticated && !!state.token,
+    userRole: (state) => state.user?.role || 'guest'
+  },
+
+  actions: {
+    async login(username: string, password: string) {
+      try {
+        const response = await api.login(username, password)
+        this.token = response.token
+        this.user = response.user
+        this.isAuthenticated = true
+        
+        localStorage.setItem('pptist_token', response.token)
+        localStorage.setItem('pptist_user', JSON.stringify(response.user))
+        
+        return response
+      } catch (error) {
+        this.logout()
+        throw error
+      }
+    },
+
+    async verifyToken() {
+      if (!this.token) {
+        this.logout()
+        return false
+      }
+
+      try {
+        const response = await api.verifyToken()
+        this.user = response.user
+        this.isAuthenticated = true
+        return true
+      } catch (error) {
+        this.logout()
+        return false
+      }
+    },
+
+    logout() {
+      this.user = null
+      this.token = null
+      this.isAuthenticated = false
+      
+      localStorage.removeItem('pptist_token')
+      localStorage.removeItem('pptist_user')
+    },
+
+    async initAuth() {
+      const savedUser = localStorage.getItem('pptist_user')
+      if (savedUser && this.token) {
+        try {
+          this.user = JSON.parse(savedUser)
+          await this.verifyToken()
+        } catch (error) {
+          this.logout()
+        }
+      }
+    }
+  }
 })

frontend/src/store/slides.ts

@@ -118,11 +118,26 @@ export const useSlidesStore = defineStore('slides', {
     },
   
     setViewportSize(size: number) {
-      this.viewportSize = size
+      // 🔧 修复：确保视口尺寸的合理性和精度
+      if (typeof size !== 'number' || size <= 0 || size > 2000) {
+        console.warn(`⚠️ Invalid viewportSize: ${size}, using default 1000`)
+        this.viewportSize = 1000
+      } else {
+        // 保持整数精度，避免浮点误差
+        this.viewportSize = Math.round(size)
+      }
     },
   
     setViewportRatio(viewportRatio: number) {
-      this.viewportRatio = viewportRatio
+      // 🔧 修复：确保视口比例的合理性和高精度
+      if (typeof viewportRatio !== 'number' || viewportRatio <= 0 || viewportRatio > 2) {
+        console.warn(`⚠️ Invalid viewportRatio: ${viewportRatio}, using default 0.5625`)
+        this.viewportRatio = 0.5625
+      } else {
+        // 🔧 关键修复：保持极高精度，防止累积误差
+        // 使用8位小数精度确保视口比例的准确性
+        this.viewportRatio = Math.round(viewportRatio * 100000000) / 100000000
+      }
     },
   
     setSlides(slides: Slide[]) {

frontend/src/types/edit.ts

@@ -1,126 +1,126 @@
-import type { ShapePoolItem } from '@/configs/shapes'
-import type { LinePoolItem } from '@/configs/lines'
-import type { ImageClipDataRange, PPTElementOutline, PPTElementShadow, Gradient } from './slides'
-
-export enum ElementOrderCommands {
-  UP = 'up',
-  DOWN = 'down',
-  TOP = 'top',
-  BOTTOM = 'bottom',
-}
-
-export enum ElementAlignCommands {
-  TOP = 'top',
-  BOTTOM = 'bottom',
-  LEFT = 'left',
-  RIGHT = 'right',
-  VERTICAL = 'vertical',
-  HORIZONTAL = 'horizontal',
-  CENTER = 'center',
-}
-
-export const enum OperateBorderLines {
-  T = 'top',
-  B = 'bottom',
-  L = 'left',
-  R = 'right',
-}
-
-export const enum OperateResizeHandlers {
-  LEFT_TOP = 'left-top',
-  TOP = 'top',
-  RIGHT_TOP = 'right-top',
-  LEFT = 'left',
-  RIGHT = 'right',
-  LEFT_BOTTOM = 'left-bottom',
-  BOTTOM = 'bottom',
-  RIGHT_BOTTOM = 'right-bottom',
-}
-
-export const enum OperateLineHandlers {
-  START = 'start',
-  END = 'end',
-  C = 'ctrl',
-  C1 = 'ctrl1',
-  C2 = 'ctrl2',
-}
-
-export interface AlignmentLineAxis {
-  x: number
-  y: number
-}
-
-export interface AlignmentLineProps {
-  type: 'vertical' | 'horizontal'
-  axis: AlignmentLineAxis
-  length: number
-}
-
-export interface MultiSelectRange {
-  minX: number
-  maxX: number
-  minY: number
-  maxY: number
-}
-
-export interface ImageClipedEmitData {
-  range: ImageClipDataRange
-  position: {
-    left: number
-    top: number
-    width: number
-    height: number
-  }
-}
-
-export interface CreateElementSelectionData {
-  start: [number, number]
-  end: [number, number]
-}
-
-export interface CreateCustomShapeData {
-  start: [number, number]
-  end: [number, number]
-  path: string
-  viewBox: [number, number]
-  fill?: string
-  outline?: PPTElementOutline
-}
-
-export interface CreatingTextElement {
-  type: 'text'
-  vertical?: boolean
-}
-export interface CreatingShapeElement {
-  type: 'shape'
-  data: ShapePoolItem
-}
-export interface CreatingLineElement {
-  type: 'line'
-  data: LinePoolItem
-}
-export type CreatingElement = CreatingTextElement | CreatingShapeElement | CreatingLineElement
-
-export type TextFormatPainterKeys = 'bold' | 'em' | 'underline' | 'strikethrough' | 'color' | 'backcolor' | 'fontsize' | 'fontname' | 'align'
-
-export interface TextFormatPainter {
-  keep: boolean
-  bold?: boolean
-  em?: boolean
-  underline?: boolean
-  strikethrough?: boolean
-  color?: string
-  backcolor?: string
-  fontsize?: string
-  fontname?: string
-  align?: 'left' | 'right' | 'center'
-}
-
-export interface ShapeFormatPainter {
-  keep: boolean
-  fill?: string
-  gradient?: Gradient
-  outline?: PPTElementOutline
-  opacity?: number
-  shadow?: PPTElementShadow
+import type { ShapePoolItem } from '@/configs/shapes'
+import type { LinePoolItem } from '@/configs/lines'
+import type { ImageClipDataRange, PPTElementOutline, PPTElementShadow, Gradient } from './slides'
+
+export enum ElementOrderCommands {
+  UP = 'up',
+  DOWN = 'down',
+  TOP = 'top',
+  BOTTOM = 'bottom',
+}
+
+export enum ElementAlignCommands {
+  TOP = 'top',
+  BOTTOM = 'bottom',
+  LEFT = 'left',
+  RIGHT = 'right',
+  VERTICAL = 'vertical',
+  HORIZONTAL = 'horizontal',
+  CENTER = 'center',
+}
+
+export const enum OperateBorderLines {
+  T = 'top',
+  B = 'bottom',
+  L = 'left',
+  R = 'right',
+}
+
+export const enum OperateResizeHandlers {
+  LEFT_TOP = 'left-top',
+  TOP = 'top',
+  RIGHT_TOP = 'right-top',
+  LEFT = 'left',
+  RIGHT = 'right',
+  LEFT_BOTTOM = 'left-bottom',
+  BOTTOM = 'bottom',
+  RIGHT_BOTTOM = 'right-bottom',
+}
+
+export const enum OperateLineHandlers {
+  START = 'start',
+  END = 'end',
+  C = 'ctrl',
+  C1 = 'ctrl1',
+  C2 = 'ctrl2',
+}
+
+export interface AlignmentLineAxis {
+  x: number
+  y: number
+}
+
+export interface AlignmentLineProps {
+  type: 'vertical' | 'horizontal'
+  axis: AlignmentLineAxis
+  length: number
+}
+
+export interface MultiSelectRange {
+  minX: number
+  maxX: number
+  minY: number
+  maxY: number
+}
+
+export interface ImageClipedEmitData {
+  range: ImageClipDataRange
+  position: {
+    left: number
+    top: number
+    width: number
+    height: number
+  }
+}
+
+export interface CreateElementSelectionData {
+  start: [number, number]
+  end: [number, number]
+}
+
+export interface CreateCustomShapeData {
+  start: [number, number]
+  end: [number, number]
+  path: string
+  viewBox: [number, number]
+  fill?: string
+  outline?: PPTElementOutline
+}
+
+export interface CreatingTextElement {
+  type: 'text'
+  vertical?: boolean
+}
+export interface CreatingShapeElement {
+  type: 'shape'
+  data: ShapePoolItem
+}
+export interface CreatingLineElement {
+  type: 'line'
+  data: LinePoolItem
+}
+export type CreatingElement = CreatingTextElement | CreatingShapeElement | CreatingLineElement
+
+export type TextFormatPainterKeys = 'bold' | 'em' | 'underline' | 'strikethrough' | 'color' | 'backcolor' | 'fontsize' | 'fontname' | 'align'
+
+export interface TextFormatPainter {
+  keep: boolean
+  bold?: boolean
+  em?: boolean
+  underline?: boolean
+  strikethrough?: boolean
+  color?: string
+  backcolor?: string
+  fontsize?: string
+  fontname?: string
+  align?: 'left' | 'right' | 'center'
+}
+
+export interface ShapeFormatPainter {
+  keep: boolean
+  fill?: string
+  gradient?: Gradient
+  outline?: PPTElementOutline
+  opacity?: number
+  shadow?: PPTElementShadow
 }

frontend/src/types/export.ts

@@ -1 +1 @@
-export type DialogForExportTypes = 'image' | 'pdf' | 'json' | 'pptx' | 'pptist' | ''
+export type DialogForExportTypes = 'image' | 'pdf' | 'json' | 'pptx' | 'pptist' | 'html' | ''

frontend/src/utils/element.ts

@@ -1,259 +1,259 @@
-import tinycolor from 'tinycolor2'
-import { nanoid } from 'nanoid'
-import type { PPTElement, PPTLineElement, Slide } from '@/types/slides'
-
-interface RotatedElementData {
-  left: number
-  top: number
-  width: number
-  height: number
-  rotate: number
-}
-
-interface IdMap {
-  [id: string]: string
-}
-
-/**
- * 计算元素在画布中的矩形范围旋转后的新位置范围
- * @param element 元素的位置大小和旋转角度信息
- */
-export const getRectRotatedRange = (element: RotatedElementData) => {
-  const { left, top, width, height, rotate = 0 } = element
-
-  const radius = Math.sqrt( Math.pow(width, 2) + Math.pow(height, 2) ) / 2
-  const auxiliaryAngle = Math.atan(height / width) * 180 / Math.PI
-
-  const tlbraRadian = (180 - rotate - auxiliaryAngle) * Math.PI / 180
-  const trblaRadian = (auxiliaryAngle - rotate) * Math.PI / 180
-
-  const middleLeft = left + width / 2
-  const middleTop = top + height / 2
-
-  const xAxis = [
-    middleLeft + radius * Math.cos(tlbraRadian),
-    middleLeft + radius * Math.cos(trblaRadian),
-    middleLeft - radius * Math.cos(tlbraRadian),
-    middleLeft - radius * Math.cos(trblaRadian),
-  ]
-  const yAxis = [
-    middleTop - radius * Math.sin(tlbraRadian),
-    middleTop - radius * Math.sin(trblaRadian),
-    middleTop + radius * Math.sin(tlbraRadian),
-    middleTop + radius * Math.sin(trblaRadian),
-  ]
-
-  return {
-    xRange: [Math.min(...xAxis), Math.max(...xAxis)],
-    yRange: [Math.min(...yAxis), Math.max(...yAxis)],
-  }
-}
-
-/**
- * 计算元素在画布中的矩形范围旋转后的新位置与旋转之前位置的偏离距离
- * @param element 元素的位置大小和旋转角度信息
- */
-export const getRectRotatedOffset = (element: RotatedElementData) => {
-  const { xRange: originXRange, yRange: originYRange } = getRectRotatedRange({
-    left: element.left,
-    top: element.top,
-    width: element.width,
-    height: element.height,
-    rotate: 0,
-  })
-  const { xRange: rotatedXRange, yRange: rotatedYRange } = getRectRotatedRange({
-    left: element.left,
-    top: element.top,
-    width: element.width,
-    height: element.height,
-    rotate: element.rotate,
-  })
-  return {
-    offsetX: rotatedXRange[0] - originXRange[0],
-    offsetY: rotatedYRange[0] - originYRange[0],
-  }
-}
-
-/**
- * 计算元素在画布中的位置范围
- * @param element 元素信息
- */
-export const getElementRange = (element: PPTElement) => {
-  let minX, maxX, minY, maxY
-
-  if (element.type === 'line') {
-    minX = element.left
-    maxX = element.left + Math.max(element.start[0], element.end[0])
-    minY = element.top
-    maxY = element.top + Math.max(element.start[1], element.end[1])
-  }
-  else if ('rotate' in element && element.rotate) {
-    const { left, top, width, height, rotate } = element
-    const { xRange, yRange } = getRectRotatedRange({ left, top, width, height, rotate })
-    minX = xRange[0]
-    maxX = xRange[1]
-    minY = yRange[0]
-    maxY = yRange[1]
-  }
-  else {
-    minX = element.left
-    maxX = element.left + element.width
-    minY = element.top
-    maxY = element.top + element.height
-  }
-  return { minX, maxX, minY, maxY }
-}
-
-/**
- * 计算一组元素在画布中的位置范围
- * @param elementList 一组元素信息
- */
-export const getElementListRange = (elementList: PPTElement[]) => {
-  const leftValues: number[] = []
-  const topValues: number[] = []
-  const rightValues: number[] = []
-  const bottomValues: number[] = []
-
-  elementList.forEach(element => {
-    const { minX, maxX, minY, maxY } = getElementRange(element)
-    leftValues.push(minX)
-    topValues.push(minY)
-    rightValues.push(maxX)
-    bottomValues.push(maxY)
-  })
-
-  const minX = Math.min(...leftValues)
-  const maxX = Math.max(...rightValues)
-  const minY = Math.min(...topValues)
-  const maxY = Math.max(...bottomValues)
-
-  return { minX, maxX, minY, maxY }
-}
-
-/**
- * 计算线条元素的长度
- * @param element 线条元素
- */
-export const getLineElementLength = (element: PPTLineElement) => {
-  const deltaX = element.end[0] - element.start[0]
-  const deltaY = element.end[1] - element.start[1]
-  const len = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
-  return len
-}
-
-export interface AlignLine {
-  value: number
-  range: [number, number]
-}
-
-/**
- * 将一组对齐吸附线进行去重：同位置的的多条对齐吸附线仅留下一条，取该位置所有对齐吸附线的最大值和最小值为新的范围
- * @param lines 一组对齐吸附线信息
- */
-export const uniqAlignLines = (lines: AlignLine[]) => {
-  const uniqLines: AlignLine[] = []
-  lines.forEach(line => {
-    const index = uniqLines.findIndex(_line => _line.value === line.value)
-    if (index === -1) uniqLines.push(line)
-    else {
-      const uniqLine = uniqLines[index]
-      const rangeMin = Math.min(uniqLine.range[0], line.range[0])
-      const rangeMax = Math.max(uniqLine.range[1], line.range[1])
-      const range: [number, number] = [rangeMin, rangeMax]
-      const _line = { value: line.value, range }
-      uniqLines[index] = _line
-    }
-  })
-  return uniqLines
-}
-
-/**
- * 以页面列表为基础，为每一个页面生成新的ID，并关联到旧ID形成一个字典
- * 主要用于页面元素时，维持数据中各处页面ID原有的关系
- * @param slides 页面列表
- */
-export const createSlideIdMap = (slides: Slide[]) => {
-  const slideIdMap: IdMap = {}
-  for (const slide of slides) {
-    slideIdMap[slide.id] = nanoid(10)
-  }
-  return slideIdMap
-}
-
-/**
-   * 以元素列表为基础，为每一个元素生成新的ID，并关联到旧ID形成一个字典
-   * 主要用于复制元素时，维持数据中各处元素ID原有的关系
-   * 例如：原本两个组合的元素拥有相同的groupId，复制后依然会拥有另一个相同的groupId
-   * @param elements 元素列表数据
-   */
-export const createElementIdMap = (elements: PPTElement[]) => {
-  const groupIdMap: IdMap = {}
-  const elIdMap: IdMap = {}
-  for (const element of elements) {
-    const groupId = element.groupId
-    if (groupId && !groupIdMap[groupId]) {
-      groupIdMap[groupId] = nanoid(10)
-    }
-    elIdMap[element.id] = nanoid(10)
-  }
-  return {
-    groupIdMap,
-    elIdMap,
-  }
-}
-
-/**
- * 根据表格的主题色，获取对应用于配色的子颜色
- * @param themeColor 主题色
- */
-export const getTableSubThemeColor = (themeColor: string) => {
-  const rgba = tinycolor(themeColor)
-  return [
-    rgba.setAlpha(0.3).toRgbString(),
-    rgba.setAlpha(0.1).toRgbString(),
-  ]
-}
-
-/**
- * 获取线条元素路径字符串
- * @param element 线条元素
- */
-export const getLineElementPath = (element: PPTLineElement) => {
-  const start = element.start.join(',')
-  const end = element.end.join(',')
-  if (element.broken) {
-    const mid = element.broken.join(',')
-    return `M${start} L${mid} L${end}`
-  }
-  else if (element.broken2) {
-    const { minX, maxX, minY, maxY } = getElementRange(element)
-    if (maxX - minX >= maxY - minY) return `M${start} L${element.broken2[0]},${element.start[1]} L${element.broken2[0]},${element.end[1]} ${end}`
-    return `M${start} L${element.start[0]},${element.broken2[1]} L${element.end[0]},${element.broken2[1]} ${end}`
-  }
-  else if (element.curve) {
-    const mid = element.curve.join(',')
-    return `M${start} Q${mid} ${end}`
-  }
-  else if (element.cubic) {
-    const [c1, c2] = element.cubic
-    const p1 = c1.join(',')
-    const p2 = c2.join(',')
-    return `M${start} C${p1} ${p2} ${end}`
-  }
-  return `M${start} L${end}`
-}
-
-/**
- * 判断一个元素是否在可视范围内
- * @param element 元素
- * @param parent 父元素
- */
-export const isElementInViewport = (element: HTMLElement, parent: HTMLElement): boolean => {
-  const elementRect = element.getBoundingClientRect()
-  const parentRect = parent.getBoundingClientRect()
-
-  return (
-    elementRect.top >= parentRect.top &&
-    elementRect.bottom <= parentRect.bottom
-  )
+import tinycolor from 'tinycolor2'
+import { nanoid } from 'nanoid'
+import type { PPTElement, PPTLineElement, Slide } from '@/types/slides'
+
+interface RotatedElementData {
+  left: number
+  top: number
+  width: number
+  height: number
+  rotate: number
+}
+
+interface IdMap {
+  [id: string]: string
+}
+
+/**
+ * 计算元素在画布中的矩形范围旋转后的新位置范围
+ * @param element 元素的位置大小和旋转角度信息
+ */
+export const getRectRotatedRange = (element: RotatedElementData) => {
+  const { left, top, width, height, rotate = 0 } = element
+
+  const radius = Math.sqrt( Math.pow(width, 2) + Math.pow(height, 2) ) / 2
+  const auxiliaryAngle = Math.atan(height / width) * 180 / Math.PI
+
+  const tlbraRadian = (180 - rotate - auxiliaryAngle) * Math.PI / 180
+  const trblaRadian = (auxiliaryAngle - rotate) * Math.PI / 180
+
+  const middleLeft = left + width / 2
+  const middleTop = top + height / 2
+
+  const xAxis = [
+    middleLeft + radius * Math.cos(tlbraRadian),
+    middleLeft + radius * Math.cos(trblaRadian),
+    middleLeft - radius * Math.cos(tlbraRadian),
+    middleLeft - radius * Math.cos(trblaRadian),
+  ]
+  const yAxis = [
+    middleTop - radius * Math.sin(tlbraRadian),
+    middleTop - radius * Math.sin(trblaRadian),
+    middleTop + radius * Math.sin(tlbraRadian),
+    middleTop + radius * Math.sin(trblaRadian),
+  ]
+
+  return {
+    xRange: [Math.min(...xAxis), Math.max(...xAxis)],
+    yRange: [Math.min(...yAxis), Math.max(...yAxis)],
+  }
+}
+
+/**
+ * 计算元素在画布中的矩形范围旋转后的新位置与旋转之前位置的偏离距离
+ * @param element 元素的位置大小和旋转角度信息
+ */
+export const getRectRotatedOffset = (element: RotatedElementData) => {
+  const { xRange: originXRange, yRange: originYRange } = getRectRotatedRange({
+    left: element.left,
+    top: element.top,
+    width: element.width,
+    height: element.height,
+    rotate: 0,
+  })
+  const { xRange: rotatedXRange, yRange: rotatedYRange } = getRectRotatedRange({
+    left: element.left,
+    top: element.top,
+    width: element.width,
+    height: element.height,
+    rotate: element.rotate,
+  })
+  return {
+    offsetX: rotatedXRange[0] - originXRange[0],
+    offsetY: rotatedYRange[0] - originYRange[0],
+  }
+}
+
+/**
+ * 计算元素在画布中的位置范围
+ * @param element 元素信息
+ */
+export const getElementRange = (element: PPTElement) => {
+  let minX, maxX, minY, maxY
+
+  if (element.type === 'line') {
+    minX = element.left
+    maxX = element.left + Math.max(element.start[0], element.end[0])
+    minY = element.top
+    maxY = element.top + Math.max(element.start[1], element.end[1])
+  }
+  else if ('rotate' in element && element.rotate) {
+    const { left, top, width, height, rotate } = element
+    const { xRange, yRange } = getRectRotatedRange({ left, top, width, height, rotate })
+    minX = xRange[0]
+    maxX = xRange[1]
+    minY = yRange[0]
+    maxY = yRange[1]
+  }
+  else {
+    minX = element.left
+    maxX = element.left + element.width
+    minY = element.top
+    maxY = element.top + element.height
+  }
+  return { minX, maxX, minY, maxY }
+}
+
+/**
+ * 计算一组元素在画布中的位置范围
+ * @param elementList 一组元素信息
+ */
+export const getElementListRange = (elementList: PPTElement[]) => {
+  const leftValues: number[] = []
+  const topValues: number[] = []
+  const rightValues: number[] = []
+  const bottomValues: number[] = []
+
+  elementList.forEach(element => {
+    const { minX, maxX, minY, maxY } = getElementRange(element)
+    leftValues.push(minX)
+    topValues.push(minY)
+    rightValues.push(maxX)
+    bottomValues.push(maxY)
+  })
+
+  const minX = Math.min(...leftValues)
+  const maxX = Math.max(...rightValues)
+  const minY = Math.min(...topValues)
+  const maxY = Math.max(...bottomValues)
+
+  return { minX, maxX, minY, maxY }
+}
+
+/**
+ * 计算线条元素的长度
+ * @param element 线条元素
+ */
+export const getLineElementLength = (element: PPTLineElement) => {
+  const deltaX = element.end[0] - element.start[0]
+  const deltaY = element.end[1] - element.start[1]
+  const len = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
+  return len
+}
+
+export interface AlignLine {
+  value: number
+  range: [number, number]
+}
+
+/**
+ * 将一组对齐吸附线进行去重：同位置的的多条对齐吸附线仅留下一条，取该位置所有对齐吸附线的最大值和最小值为新的范围
+ * @param lines 一组对齐吸附线信息
+ */
+export const uniqAlignLines = (lines: AlignLine[]) => {
+  const uniqLines: AlignLine[] = []
+  lines.forEach(line => {
+    const index = uniqLines.findIndex(_line => _line.value === line.value)
+    if (index === -1) uniqLines.push(line)
+    else {
+      const uniqLine = uniqLines[index]
+      const rangeMin = Math.min(uniqLine.range[0], line.range[0])
+      const rangeMax = Math.max(uniqLine.range[1], line.range[1])
+      const range: [number, number] = [rangeMin, rangeMax]
+      const _line = { value: line.value, range }
+      uniqLines[index] = _line
+    }
+  })
+  return uniqLines
+}
+
+/**
+ * 以页面列表为基础，为每一个页面生成新的ID，并关联到旧ID形成一个字典
+ * 主要用于页面元素时，维持数据中各处页面ID原有的关系
+ * @param slides 页面列表
+ */
+export const createSlideIdMap = (slides: Slide[]) => {
+  const slideIdMap: IdMap = {}
+  for (const slide of slides) {
+    slideIdMap[slide.id] = nanoid(10)
+  }
+  return slideIdMap
+}
+
+/**
+   * 以元素列表为基础，为每一个元素生成新的ID，并关联到旧ID形成一个字典
+   * 主要用于复制元素时，维持数据中各处元素ID原有的关系
+   * 例如：原本两个组合的元素拥有相同的groupId，复制后依然会拥有另一个相同的groupId
+   * @param elements 元素列表数据
+   */
+export const createElementIdMap = (elements: PPTElement[]) => {
+  const groupIdMap: IdMap = {}
+  const elIdMap: IdMap = {}
+  for (const element of elements) {
+    const groupId = element.groupId
+    if (groupId && !groupIdMap[groupId]) {
+      groupIdMap[groupId] = nanoid(10)
+    }
+    elIdMap[element.id] = nanoid(10)
+  }
+  return {
+    groupIdMap,
+    elIdMap,
+  }
+}
+
+/**
+ * 根据表格的主题色，获取对应用于配色的子颜色
+ * @param themeColor 主题色
+ */
+export const getTableSubThemeColor = (themeColor: string) => {
+  const rgba = tinycolor(themeColor)
+  return [
+    rgba.setAlpha(0.3).toRgbString(),
+    rgba.setAlpha(0.1).toRgbString(),
+  ]
+}
+
+/**
+ * 获取线条元素路径字符串
+ * @param element 线条元素
+ */
+export const getLineElementPath = (element: PPTLineElement) => {
+  const start = element.start.join(',')
+  const end = element.end.join(',')
+  if (element.broken) {
+    const mid = element.broken.join(',')
+    return `M${start} L${mid} L${end}`
+  }
+  else if (element.broken2) {
+    const { minX, maxX, minY, maxY } = getElementRange(element)
+    if (maxX - minX >= maxY - minY) return `M${start} L${element.broken2[0]},${element.start[1]} L${element.broken2[0]},${element.end[1]} ${end}`
+    return `M${start} L${element.start[0]},${element.broken2[1]} L${element.end[0]},${element.broken2[1]} ${end}`
+  }
+  else if (element.curve) {
+    const mid = element.curve.join(',')
+    return `M${start} Q${mid} ${end}`
+  }
+  else if (element.cubic) {
+    const [c1, c2] = element.cubic
+    const p1 = c1.join(',')
+    const p2 = c2.join(',')
+    return `M${start} C${p1} ${p2} ${end}`
+  }
+  return `M${start} L${end}`
+}
+
+/**
+ * 判断一个元素是否在可视范围内
+ * @param element 元素
+ * @param parent 父元素
+ */
+export const isElementInViewport = (element: HTMLElement, parent: HTMLElement): boolean => {
+  const elementRect = element.getBoundingClientRect()
+  const parentRect = parent.getBoundingClientRect()
+
+  return (
+    elementRect.top >= parentRect.top &&
+    elementRect.bottom <= parentRect.bottom
+  )
 }

frontend/src/utils/textParser.ts

@@ -1,13 +1,13 @@
-/**
- * 将普通文本转为带段落信息的HTML字符串
- * @param text 文本
- */
-export const parseText2Paragraphs = (text: string) => {
-  const htmlText = text.replace(/[\n\r]+/g, '<br>')
-  const paragraphs = htmlText.split('<br>')
-  let string = ''
-  for (const paragraph of paragraphs) {
-    if (paragraph) string += `<div>${paragraph}</div>`
-  }
-  return string
+/**
+ * 将普通文本转为带段落信息的HTML字符串
+ * @param text 文本
+ */
+export const parseText2Paragraphs = (text: string) => {
+  const htmlText = text.replace(/[\n\r]+/g, '<br>')
+  const paragraphs = htmlText.split('<br>')
+  let string = ''
+  for (const paragraph of paragraphs) {
+    if (paragraph) string += `<div>${paragraph}</div>`
+  }
+  return string
 }