foliko 1.1.7 → 1.1.8

package/.agent/plugins/poster-plugin/src/components/imageFrame.js

@@ -1,28 +1,19 @@
 /**
  * 图片框组件 - 带装饰边框的图片
+ * 使用 Paper.js API 实现
  */
-const createImageFrame = (ctx) => ({
-  /**
-   * @param {Object} params
-   * @param {string} params.src - 图片路径或URL
-   * @param {number} params.x - X坐标
-   * @param {number} params.y - Y坐标
-   * @param {number} params.width - 图片宽度
-   * @param {number} params.height - 图片高度
-   * @param {string} [params.borderColor='#ffffff'] - 边框颜色
-   * @param {number} [params.borderWidth=3] - 边框宽度
-   * @param {string} [params.outerColor='#1a1a2e'] - 外边框颜色
-   * @param {number} [params.outerWidth=6] - 外边框宽度
-   * @param {number} [params.shadowBlur=0] - 阴影模糊
-   * @param {number} [params.shadowOffsetX=0] - 阴影X偏移
-   * @param {number} [params.shadowOffsetY=0] - 阴影Y偏移
-   * @param {string} [params.shadowColor='rgba(0,0,0,0.3)'] - 阴影颜色
-   * @param {number} [params.radius=0] - 圆角半径
-   * @param {string} [params.overlayColor] - 叠加颜色
-   * @param {number} [params.overlayOpacity=0] - 叠加透明度
-   * @param {string} [params.fit='cover'] - 图片填充方式: cover, contain, fill
-   */
-  async draw({
+
+const paper = require('paper')
+
+/**
+ * 创建图片框组件
+ * 
+ * @param {Object} project - Paper.js 项目
+ * @param {Object} canvas - 画布对象
+ * @param {Object} params - 组件参数
+ */
+function createImageFrame(project, canvas, params) {
+  const {
     src,
     x,
     y,
@@ -40,33 +31,77 @@ const createImageFrame = (ctx) => ({
     overlayColor,
     overlayOpacity = 0,
     fit = 'cover'
-  }) {
-    // 绘制外边框（装饰层）
-    if (outerWidth > 0) {
-      ctx.fillStyle = outerColor
-      await _roundRect(ctx, x - outerWidth, y - outerWidth, width + outerWidth * 2, height + outerWidth * 2, radius + outerWidth)
-      ctx.fill()
-    }
+  } = params
+
+  const elements = []
 
-    // 绘制内边框
-    if (borderWidth > 0) {
-      ctx.fillStyle = borderColor
-      await _roundRect(ctx, x - borderWidth, y - borderWidth, width + borderWidth * 2, height + borderWidth * 2, radius + borderWidth)
-      ctx.fill()
+  // 辅助函数：创建圆角矩形路径
+  function createRoundedRectPath(x, y, w, h, r) {
+    const rect = new paper.Path.Rectangle({
+      point: [x, y],
+      size: [w, h],
+      radius: r
+    })
+    return rect
+  }
+
+  // 绘制阴影
+  if (shadowBlur > 0) {
+    // 使用 Paper.js 的 shadow 功能
+    // 注意：Paper.js 对阴影支持有限，这里使用简单实现
+  }
+
+  // 绘制外边框（装饰层）
+  if (outerWidth > 0) {
+    const outerRect = createRoundedRectPath(
+      x - outerWidth, 
+      y - outerWidth, 
+      width + outerWidth * 2, 
+      height + outerWidth * 2, 
+      radius + outerWidth
+    )
+    outerRect.fillColor = new paper.Color(outerColor)
+    if (project && project.activeLayer) {
+      project.activeLayer.addChild(outerRect)
     }
+    elements.push({ type: 'path', id: outerRect.id })
+  }
 
-    // 绘制阴影
-    if (shadowBlur > 0) {
-      ctx.shadowColor = shadowColor
-      ctx.shadowBlur = shadowBlur
-      ctx.shadowOffsetX = shadowOffsetX
-      ctx.shadowOffsetY = shadowOffsetY
+  // 绘制内边框
+  if (borderWidth > 0) {
+    const borderRect = createRoundedRectPath(
+      x - borderWidth, 
+      y - borderWidth, 
+      width + borderWidth * 2, 
+      height + borderWidth * 2, 
+      radius + borderWidth
+    )
+    borderRect.fillColor = new paper.Color(borderColor)
+    if (project && project.activeLayer) {
+      project.activeLayer.addChild(borderRect)
     }
+    elements.push({ type: 'path', id: borderRect.id })
+  }
+
+  // 创建图片容器（裁剪区域）
+  const clipRect = createRoundedRectPath(x, y, width, height, radius)
+  
+  // 创建裁剪组
+  const clipGroup = new paper.Group()
+  clipGroup.addChild(clipRect)
+  
+  if (project && project.activeLayer) {
+    project.activeLayer.addChild(clipGroup)
+  }
+  elements.push({ type: 'group', id: clipGroup.id })
 
-    // 加载并绘制图片
-    const image = await _loadImage(src)
-    const imgWidth = image.width
-    const imgHeight = image.height
+  // 加载并添加图片
+  loadImageAsync(src).then((loadedRaster) => {
+    if (!loadedRaster) return
+
+    // loadedRaster 已经是 Raster 对象
+    const imgWidth = loadedRaster.width
+    const imgHeight = loadedRaster.height
     const imgRatio = imgWidth / imgHeight
     const boxRatio = width / height
 
@@ -94,61 +129,76 @@ const createImageFrame = (ctx) => ({
       }
     }
 
-    // 裁剪并绘制图片
-    ctx.save()
-    await _roundRect(ctx, x, y, width, height, radius)
-    ctx.clip()
-    ctx.drawImage(image, drawX, drawY, drawW, drawH)
-    ctx.restore()
-
-    // 重置阴影
-    ctx.shadowColor = 'transparent'
-    ctx.shadowBlur = 0
-    ctx.shadowOffsetX = 0
-    ctx.shadowOffsetY = 0
-
-    // 叠加颜色
-    if (overlayColor && overlayOpacity > 0) {
-      ctx.fillStyle = overlayColor
-      ctx.globalAlpha = overlayOpacity
-      await _roundRect(ctx, x, y, width, height, radius)
-      ctx.fill()
-      ctx.globalAlpha = 1
+    loadedRaster.bounds = new paper.Rectangle(drawX, drawY, drawW, drawH)
+    
+    // 应用裁剪
+    loadedRaster.clipped = true
+    loadedRaster.clipMask = clipRect
+    
+    if (project && project.activeLayer) {
+      // 将图片添加到裁剪组
+      clipGroup.addChild(loadedRaster)
     }
+  })
+
+  // 叠加颜色
+  if (overlayColor && overlayOpacity > 0) {
+    const overlayRect = createRoundedRectPath(x, y, width, height, radius)
+    overlayRect.fillColor = new paper.Color(overlayColor)
+    overlayRect.fillColor.alpha = overlayOpacity
+    if (project && project.activeLayer) {
+      project.activeLayer.addChild(overlayRect)
+    }
+    elements.push({ type: 'path', id: overlayRect.id })
+  }
+
+  return {
+    success: true,
+    elements,
+    width: width,
+    height: height,
+    type: 'imageFrame'
   }
-})
-
-// 辅助函数：圆角矩形
-async function _roundRect(ctx, x, y, width, height, radius) {
-  const r = Math.min(radius, width / 2, height / 2)
-  ctx.beginPath()
-  ctx.moveTo(x + r, y)
-  ctx.lineTo(x + width - r, y)
-  ctx.quadraticCurveTo(x + width, y, x + width, y + r)
-  ctx.lineTo(x + width, y + height - r)
-  ctx.quadraticCurveTo(x + width, y + height, x + width - r, y + height)
-  ctx.lineTo(x + r, y + height)
-  ctx.quadraticCurveTo(x, y + height, x, y + height - r)
-  ctx.lineTo(x, y + r)
-  ctx.quadraticCurveTo(x, y, x + r, y)
-  ctx.closePath()
 }
 
-// 辅助函数：加载图片
-async function _loadImage(src) {
-  return new Promise((resolve, reject) => {
-    const img = new Image()
-    img.crossOrigin = 'anonymous'
-    img.onload = () => resolve(img)
-    img.onerror = (e) => {
-      // 尝试 data URL 格式
-      if (src.startsWith('data:')) {
-        img.src = src
-      } else {
-        reject(new Error(`Failed to load image: ${src}`))
+// 异步加载图片
+function loadImageAsync(src) {
+  return new Promise((resolve) => {
+    try {
+      // 尝试作为 URL 加载
+      const raster = new paper.Raster(src)
+      
+      raster.onLoad = () => {
+        // Paper.js Raster 本身就可以使用，不需要 .image
+        resolve(raster)
+      }
+      
+      raster.onError = () => {
+        // 尝试作为本地文件
+        const fs = require('fs')
+        const path = require('path')
+        
+        if (fs.existsSync(src)) {
+          const data = fs.readFileSync(src)
+          const base64 = data.toString('base64')
+          const ext = path.extname(src).slice(1).toLowerCase()
+          const mimeType = ext === 'jpg' ? 'jpeg' : ext
+          const dataUrl = `data:image/${mimeType};base64,${base64}`
+          
+          const raster2 = new paper.Raster(dataUrl)
+          raster2.onLoad = () => {
+            resolve(raster2)
+          }
+          raster2.onError = () => {
+            resolve(null)
+          }
+        } else {
+          resolve(null)
+        }
       }
+    } catch (e) {
+      resolve(null)
     }
-    img.src = src
   })
 }
 

package/.agent/plugins/poster-plugin/src/components/quote.js

@@ -1,8 +1,55 @@
 /**
- * 引用块组件
+ * 引用块组件 - 支持自动换行
  */
 
 const paper = require('paper')
+const { getFontFallbackChain } = require('../fonts')
+
+/**
+ * 手动实现文本自动换行
+ */
+function wrapText(text, maxWidth, fontSize, font) {
+  if (!maxWidth || maxWidth <= 0) return [text]
+  
+  const tempText = new paper.PointText({
+    fontSize,
+    fontFamily: font,
+  })
+  
+  const lines = []
+  const paragraphs = text.split('\n')
+  
+  for (let p = 0; p < paragraphs.length; p++) {
+    let currentLine = ''
+    const paragraph = paragraphs[p]
+    let i = 0
+    
+    while (i < paragraph.length) {
+      // 尝试获取下一个字符
+      let char = paragraph[i]
+      let testLine = currentLine + char
+      
+      tempText.content = testLine
+      let testWidth = tempText.bounds.width
+      
+      // 如果加上下一个字符超过宽度
+      if (testWidth > maxWidth && currentLine.length > 0) {
+        lines.push(currentLine)
+        currentLine = char
+      } else {
+        currentLine = testLine
+      }
+      i++
+    }
+    
+    if (currentLine.length > 0) {
+      lines.push(currentLine)
+    }
+  }
+  
+  tempText.remove()
+  return lines
+}
 
 /**
  * 创建引用块
@@ -38,14 +85,31 @@ function createQuote(project, canvas, args) {
     textColor = '#1e293b',
     authorColor = '#64748b',
     fontSize = 18,
+    fontFamily,
   } = args
 
+  // 获取字体回退链
+  const quoteFont = getFontFallbackChain(fontFamily, text || '').join(', ')
+
   const elements = []
+  
+  // 计算文本换行
+  const textPadding = padding + 30 // 左边距 + 引号宽度
+  const maxTextWidth = width - textPadding - padding
+  const textLines = wrapText(text, maxTextWidth, fontSize, quoteFont)
+  const lineHeight = fontSize * 1.5
+  const textBlockHeight = textLines.length * lineHeight
+  
+  // 计算背景高度
+  const authorHeight = author ? fontSize * 1.5 : 0
+  const totalHeight = padding * 2 + textBlockHeight + authorHeight
+  const minHeight = 80
+  const finalHeight = Math.max(totalHeight, minHeight)
 
   // 绘制背景
   const bg = new paper.Path.Rectangle({
     point: [x, y],
-    size: [width, author ? 80 + fontSize * 2 : 40 + fontSize * 1.5],
+    size: [width, finalHeight],
     radius: radius,
   })
   bg.fillColor = new paper.Color(background)
@@ -54,7 +118,7 @@ function createQuote(project, canvas, args) {
   // 绘制左边框
   const border = new paper.Path.Rectangle({
     point: [x, y],
-    size: [borderWidth, author ? 80 + fontSize * 2 : 40 + fontSize * 1.5],
+    size: [borderWidth, finalHeight],
   })
   border.fillColor = new paper.Color(borderColor)
   elements.push({ type: 'rectangle', id: border.id })
@@ -64,27 +128,35 @@ function createQuote(project, canvas, args) {
     point: [x + padding + 10, y + padding + fontSize],
     content: '"',
     fontSize: fontSize * 2,
+    fontFamily: quoteFont,
     fillColor: new paper.Color(borderColor),
     justification: 'left',
   })
   elements.push({ type: 'text', id: quoteMark.id })
 
-  // 绘制引用文字
-  const quoteText = new paper.PointText({
-    point: [x + padding + 30, y + padding + fontSize * 1.5],
-    content: text,
-    fontSize: fontSize,
-    fillColor: new paper.Color(textColor),
-    justification: 'left',
+  // 绘制引用文字（多行）
+  textLines.forEach((line, index) => {
+    const lineY = y + padding + fontSize + index * lineHeight
+    const quoteText = new paper.PointText({
+      point: [x + padding + 30, lineY],
+      content: line,
+      fontSize: fontSize,
+      fontFamily: quoteFont,
+      fillColor: new paper.Color(textColor),
+      justification: 'left',
+    })
+    elements.push({ type: 'text', id: quoteText.id })
   })
-  elements.push({ type: 'text', id: quoteText.id })
 
   // 绘制作者
   if (author) {
+    const authorY = y + padding + textBlockHeight + fontSize * 1.3
+    const authorFont = getFontFallbackChain(fontFamily, author).join(', ')
     const authorText = new paper.PointText({
-      point: [x + padding, y + padding + fontSize * 2.5 + 10],
+      point: [x + padding, authorY],
       content: `— ${author}`,
-      fontSize: fontSize * 0.8,
+      fontSize: fontSize * 0.85,
+      fontFamily: authorFont,
       fillColor: new paper.Color(authorColor),
       justification: 'left',
     })

package/.agent/plugins/poster-plugin/src/components/ribbon.js

@@ -3,6 +3,7 @@
  */
 
 const paper = require('paper')
+const { getFontFallbackChain, validateFont } = require('../fonts')
 
 /**
  * 创建丝带
@@ -27,6 +28,9 @@ function createRibbon(project, args) {
 
   const items = []
 
+  // 获取字体回退链
+  const ribbonFont = getFontFallbackChain(fontFamily, text).join(', ')
+
   if (style === 'diagonal') {
     // 对角丝带
     const diagonalLength = Math.sqrt(width ** 2 + 60 ** 2)
@@ -59,7 +63,7 @@ function createRibbon(project, args) {
       point: [x + diagonalLength / 2, y + 60 / 2 + fontSize / 3],
       content: text,
       fontSize,
-      fontFamily: fontFamily || 'sans-serif',
+      fontFamily: ribbonFont,
       fillColor: new paper.Color(color),
       justification: 'center',
     })
@@ -112,17 +116,17 @@ function createRibbon(project, args) {
     items.push(fold)
 
     // 文字
-    const textItem = new paper.PointText({
+    const cornerTextItem = new paper.PointText({
       point: [x + ribbonWidth / 2, y + ribbonHeight / 2 + fontSize / 3],
       content: text,
       fontSize,
-      fontFamily: fontFamily || 'sans-serif',
+      fontFamily: ribbonFont,
       fillColor: new paper.Color(color),
       justification: 'center',
     })
 
-    if (opacity !== 1) textItem.opacity = opacity
-    items.push(textItem)
+    if (opacity !== 1) cornerTextItem.opacity = opacity
+    items.push(cornerTextItem)
 
   } else {
     // 折叠丝带 (默认)
@@ -170,17 +174,17 @@ function createRibbon(project, args) {
     items.push(rightFold)
 
     // 文字
-    const textItem = new paper.PointText({
+    const foldTextItem = new paper.PointText({
       point: [x + width / 2, y + ribbonHeight / 2 + fontSize / 3],
       content: text,
       fontSize,
-      fontFamily: fontFamily || 'sans-serif',
+      fontFamily: ribbonFont,
       fillColor: new paper.Color(color),
       justification: 'center',
     })
 
-    if (opacity !== 1) textItem.opacity = opacity
-    items.push(textItem)
+    if (opacity !== 1) foldTextItem.opacity = opacity
+    items.push(foldTextItem)
   }
 
   return {

package/.agent/plugins/poster-plugin/src/components/seal.js

@@ -3,6 +3,7 @@
  */
 
 const paper = require('paper')
+const { getFontFallbackChain, validateFont } = require('../fonts')
 
 /**
  * 创建印章
@@ -70,11 +71,12 @@ function createSeal(project, args) {
   items.push(innerBorder)
 
   // 文字
+  const mainFont = getFontFallbackChain(fontFamily, text).join(', ')
   const textItem = new paper.PointText({
     point: [centerX, centerY + fontSize / 3],
     content: text,
     fontSize,
-    fontFamily: fontFamily || 'serif',
+    fontFamily: mainFont,
     fillColor: new paper.Color(color),
     justification: 'center',
   })
@@ -87,7 +89,7 @@ function createSeal(project, args) {
     point: [centerX, centerY - size / 4],
     content: '★',
     fontSize: 16,
-    fontFamily: fontFamily || 'serif',
+    fontFamily: mainFont,
     fillColor: new paper.Color(color),
     justification: 'center',
   })
@@ -99,7 +101,7 @@ function createSeal(project, args) {
     point: [centerX, centerY + size / 3],
     content: '★ ★ ★',
     fontSize: 12,
-    fontFamily: fontFamily || 'serif',
+    fontFamily: mainFont,
     fillColor: new paper.Color(color),
     justification: 'center',
     letterSpacing: 8,

package/.agent/plugins/poster-plugin/src/components/star.js

@@ -15,7 +15,7 @@ function createStar(project, canvas, params) {
     cx,
     cy,
     points = 5,
-    innerRadius: providedInnerRadius,
+    innerRadius,
     outerRadius,
     fill,
     stroke,
@@ -25,14 +25,14 @@ function createStar(project, canvas, params) {
   } = params
 
   // 计算内半径
-  const innerRadius = providedInnerRadius || outerRadius * 0.4
+  const actualInnerRadius = innerRadius || outerRadius * 0.4
 
   // 创建星形路径
   const path = new paper.Path()
   const angleStep = Math.PI / points
 
   for (let i = 0; i < points * 2; i++) {
-    const radius = i % 2 === 0 ? outerRadius : innerRadius
+    const radius = i % 2 === 0 ? outerRadius : actualInnerRadius
     const angle = i * angleStep - Math.PI / 2 + (rotation * Math.PI / 180)
     const x = cx + radius * Math.cos(angle)
     const y = cy + radius * Math.sin(angle)

package/.agent/plugins/poster-plugin/src/components/table.js

@@ -125,7 +125,7 @@ function createTable(project, canvas, params) {
     // 行分隔线
     const rowLine = new paper.Path.Line({
       from: [x, rowY],
-      to: [x + width, rowY]
+      to: [x + tableWidth, rowY]
     })
     rowLine.strokeColor = new paper.Color(borderColor)
     rowLine.strokeWidth = 0.5

package/.agent/plugins/poster-plugin/src/components/watermark.js

@@ -3,6 +3,7 @@
  */
 
 const paper = require('paper')
+const { getFontFallbackChain, validateFont } = require('../fonts')
 
 /**
  * 创建水印组件
@@ -14,7 +15,7 @@ function createWatermark(project, canvas, params) {
     cy,
     color = 'rgba(0,0,0,0.1)',
     fontSize = 48,
-    fontFamily = 'sans-serif',
+    fontFamily = 'Microsoft YaHei',
     opacity = 0.1,
     rotation = 0,
     align = 'center'
@@ -22,11 +23,12 @@ function createWatermark(project, canvas, params) {
 
   const elements = []
 
+  const finalFont = getFontFallbackChain(fontFamily, text).join(', ')
   const label = new paper.PointText({
     point: [cx, cy],
     content: text,
     fontSize: fontSize,
-    fontFamily: fontFamily,
+    fontFamily: finalFont,
     fillColor: new paper.Color(color),
     justification: align,
     opacity: opacity