foliko 1.1.1 → 1.1.2

package/.agent/plugins/poster-plugin/package.json

@@ -7,7 +7,8 @@
     "canvas": "^3.2.0",
     "fontkit": "^2.0.4",
     "jsdom": "^16.2.2",
-    "paper": "^0.12.18"
+    "paper": "^0.12.18",
+    "qrcode": "^1.5.4"
   },
   "overrides": {
     "canvas": "^3.2.0"

package/.agent/plugins/poster-plugin/src/canvas.js

@@ -4,6 +4,8 @@
 
 const paper = require('paper')
 const PRESETS = require('./presets')
+const fs = require('fs')
+const path = require('path')
 
 /**
  * 画布管理器类
@@ -20,7 +22,7 @@ class CanvasManager {
   /**
    * 创建画布
    */
-  create({ preset, width, height, background }) {
+  async create({ preset, width, height, background }) {
     let w, h
 
     if (preset) {
@@ -49,12 +51,21 @@ class CanvasManager {
 
     // 添加背景
     if (background) {
-      const bg = new paper.Path.Rectangle({
-        point: [0, 0],
-        size: [w, h],
-        fillColor: background,
-      })
-      bg.sendToBack()
+      if (typeof background === 'string' && path.isAbsolute(background)) {
+        // 背景是绝对路径图片
+        await this._addBackgroundImage(background, w, h)
+      } else if (typeof background === 'object' && background.image) {
+        // 背景是对象形式 { image: 'path' }
+        await this._addBackgroundImage(background.image, w, h)
+      } else {
+        // 背景是颜色
+        const bg = new paper.Path.Rectangle({
+          point: [0, 0],
+          size: [w, h],
+          fillColor: background,
+        })
+        bg.sendToBack()
+      }
     }
 
     return {
@@ -65,6 +76,58 @@ class CanvasManager {
     }
   }
 
+  /**
+   * 添加背景图片
+   */
+  async _addBackgroundImage(imageSrc, w, h) {
+    // 本地文件路径
+    let absolutePath = imageSrc
+    if (!path.isAbsolute(absolutePath)) {
+      absolutePath = path.join(process.cwd(), absolutePath)
+    }
+
+    if (!fs.existsSync(absolutePath)) {
+      throw new Error(`背景图片文件不存在: ${absolutePath}`)
+    }
+
+    // 使用 loadImage 获取图片数据
+    const { loadImage } = require('canvas')
+    const imageData = await loadImage(absolutePath)
+
+    // 创建 Paper.js Raster
+    const raster = new paper.Raster(imageData)
+
+    // 等待 raster 加载完成
+    await new Promise((resolve) => {
+      if (raster.loaded) {
+        resolve()
+      } else {
+        raster.onLoad = resolve
+      }
+    })
+
+    // 计算 cover 模式缩放
+    const canvasRatio = w / h
+    const imageRatio = raster.width / raster.height
+
+    let scaledWidth, scaledHeight, offsetX, offsetY
+
+    if (imageRatio > canvasRatio) {
+      scaledHeight = h
+      scaledWidth = raster.width * (h / raster.height)
+      offsetX = (w - scaledWidth) / 2
+      offsetY = 0
+    } else {
+      scaledWidth = w
+      scaledHeight = raster.height * (w / raster.width)
+      offsetX = 0
+      offsetY = (h - scaledHeight) / 2
+    }
+
+    raster.bounds = new paper.Rectangle(offsetX, offsetY, scaledWidth, scaledHeight)
+    raster.sendToBack()
+  }
+
   /**
    * 获取画布
    */

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

@@ -0,0 +1,120 @@
+/**
+ * 条形码组件 - 静态图片
+ */
+
+const paper = require('paper')
+const { loadImageAsRaster, downloadImage } = require('../utils/imageLoader')
+
+/**
+ * 创建条形码
+ */
+async function createBarcode(project, args) {
+  const {
+    x = 0,
+    y = 0,
+    width = 300,
+    height = 100,
+    content = '1234567890',
+    showText = true,
+    textColor = '#000000',
+    fontSize = 16,
+    opacity = 1,
+  } = args
+
+  // 内容太短或像URL，回退到简单条形码
+  if (content.length < 8 || content.startsWith('http')) {
+    return createSimpleBarcode(project, { x, y, width, height, content, showText, textColor, fontSize, opacity })
+  }
+
+  try {
+    const barcodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=${width}x${height}&data=${encodeURIComponent(content)}&format=png`
+    const { raster } = await loadImageAsRaster(project, barcodeUrl, { x, y, width, height }, opacity)
+    const items = [raster]
+
+    // 文字
+    if (showText) {
+      const textItem = new paper.PointText({
+        point: [x + width / 2, y + height + fontSize + 5],
+        content: content,
+        fontSize,
+        fontFamily: 'monospace',
+        fillColor: new paper.Color(textColor),
+        justification: 'center',
+      })
+      if (opacity !== 1) textItem.opacity = opacity
+      items.push(textItem)
+    }
+
+    return {
+      success: true,
+      type: 'barcode',
+      items: items.map(i => i.id),
+    }
+  } catch (err) {
+    // 回退到简单条形码
+    return createSimpleBarcode(project, { x, y, width, height, content, showText, textColor, fontSize, opacity })
+  }
+}
+
+/**
+ * 创建简单的条形码（使用线条绘制）
+ */
+function createSimpleBarcode(project, args) {
+  const {
+    x = 0,
+    y = 0,
+    width = 300,
+    height = 80,
+    content = '123456',
+    color = '#000000',
+    showText = true,
+    textColor = '#000000',
+    fontSize = 14,
+    opacity = 1,
+  } = args
+
+  const items = []
+  const barHeight = showText ? height - 25 : height
+  const barWidth = width / (content.length * 15)
+
+  // 生成简单的条形图案
+  for (let i = 0; i < content.length; i++) {
+    const charCode = content.charCodeAt(i)
+    const density = (charCode % 3) + 1
+
+    for (let d = 0; d < density; d++) {
+      const isWide = (charCode + d) % 2 === 0
+      const barW = isWide ? barWidth * 2 : barWidth
+
+      const bar = new paper.Path.Rectangle({
+        point: [x + (i * density + d) * barWidth, y],
+        size: [barW * 0.8, barHeight],
+        fillColor: new paper.Color(color),
+      })
+      if (opacity !== 1) bar.opacity = opacity
+      items.push(bar)
+    }
+  }
+
+  // 文字
+  if (showText) {
+    const textItem = new paper.PointText({
+      point: [x + width / 2, y + barHeight + fontSize + 3],
+      content: content,
+      fontSize,
+      fontFamily: 'monospace',
+      fillColor: new paper.Color(textColor),
+      justification: 'center',
+    })
+    if (opacity !== 1) textItem.opacity = opacity
+    items.push(textItem)
+  }
+
+  return {
+    success: true,
+    type: 'barcode',
+    items: items.map(i => i.id),
+  }
+}
+
+module.exports = createBarcode

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

@@ -0,0 +1,153 @@
+/**
+ * 对话气泡组件
+ */
+
+const paper = require('paper')
+
+/**
+ * 创建对话气泡
+ */
+function createBubble(project, args) {
+  const {
+    x = 0,
+    y = 0,
+    width = 300,
+    height = 100,
+    text = '',
+    fontSize = 24,
+    fontFamily,
+    color = '#000000',
+    backgroundColor = '#ffffff',
+    borderColor,
+    borderWidth = 1,
+    radius = 20,
+    tailDirection = 'bottom', // bottom, top, left, right
+    tailPosition = 'left', // left, center, right
+    shadow,
+    opacity = 1,
+  } = args
+
+  const items = []
+
+  // 气泡主体
+  const bubbleX = tailDirection === 'left' ? x + 15 : x
+  const bubbleY = tailDirection === 'top' ? y + 15 : y
+  const bubbleWidth = tailDirection === 'left' ? width - 15 : width
+  const bubbleHeight = tailDirection === 'top' ? height - 15 : height
+
+  const bgOpts = {
+    point: [bubbleX, bubbleY],
+    size: [bubbleWidth, bubbleHeight],
+    radius: radius,
+  }
+
+  if (borderColor) {
+    bgOpts.strokeColor = new paper.Color(borderColor)
+    bgOpts.strokeWidth = borderWidth
+  }
+
+  const bg = new paper.Path.Rectangle(bgOpts)
+  bg.fillColor = new paper.Color(backgroundColor)
+
+  if (shadow) {
+    bg.shadowColor = new paper.Color(shadow.color || '#000000')
+    bg.shadowBlur = shadow.blur || 10
+    bg.shadowOffset = new paper.Point(shadow.offsetX || 3, shadow.offsetY || 3)
+  }
+
+  if (opacity !== 1) bg.opacity = opacity
+  items.push(bg)
+
+  // 气泡尾巴
+  const tailSize = 20
+  let tailX, tailY, tailRotation
+
+  // 计算尾巴位置
+  switch (tailDirection) {
+    case 'bottom':
+      tailY = bubbleY + bubbleHeight - 5
+      if (tailPosition === 'left') tailX = bubbleX + 30
+      else if (tailPosition === 'right') tailX = bubbleX + bubbleWidth - 30
+      else tailX = bubbleX + bubbleWidth / 2
+      tailRotation = 0
+      break
+    case 'top':
+      tailY = bubbleY + 5
+      if (tailPosition === 'left') tailX = bubbleX + 30
+      else if (tailPosition === 'right') tailX = bubbleX + bubbleWidth - 30
+      else tailX = bubbleX + bubbleWidth / 2
+      tailRotation = 180
+      break
+    case 'left':
+      tailX = bubbleX + 5
+      if (tailPosition === 'left') tailY = bubbleY + 30
+      else if (tailPosition === 'right') tailY = bubbleY + bubbleHeight - 30
+      else tailY = bubbleY + bubbleHeight / 2
+      tailRotation = 90
+      break
+    case 'right':
+      tailX = bubbleX + bubbleWidth - 5
+      if (tailPosition === 'left') tailY = bubbleY + 30
+      else if (tailPosition === 'right') tailY = bubbleY + bubbleHeight - 30
+      else tailY = bubbleY + bubbleHeight / 2
+      tailRotation = 270
+      break
+  }
+
+  const tail = new paper.Path()
+  tail.add(new paper.Point(tailX - tailSize, tailY))
+  tail.add(new paper.Point(tailX, tailY + tailSize * 0.7))
+  tail.add(new paper.Point(tailX, tailY - tailSize * 0.7))
+  tail.closed = true
+  tail.fillColor = new paper.Color(backgroundColor)
+  if (borderColor) {
+    tail.strokeColor = new paper.Color(borderColor)
+    tail.strokeWidth = borderWidth
+  }
+  tail.rotate(tailRotation, new paper.Point(tailX, tailY))
+
+  if (opacity !== 1) tail.opacity = opacity
+  items.push(tail)
+
+  // 文字
+  const padding = 25
+  const textItem = new paper.PointText({
+    point: [bubbleX + padding, bubbleY + bubbleHeight / 2 + fontSize / 3],
+    content: text,
+    fontSize,
+    fontFamily: fontFamily || 'sans-serif',
+    fillColor: new paper.Color(color),
+    justification: tailPosition === 'left' ? 'left' : tailPosition === 'right' ? 'right' : 'center',
+  })
+
+  // 限制文字宽度
+  const maxTextWidth = bubbleWidth - padding * 2
+  if (textItem.bounds.width > maxTextWidth) {
+    textItem.justification = 'left'
+    const charsPerLine = Math.floor((text.length * maxTextWidth) / textItem.bounds.width)
+    // 简单换行处理
+    let lines = []
+    let currentLine = ''
+    for (const char of text) {
+      currentLine += char
+      const testText = new paper.PointText({ content: currentLine, fontSize, fontFamily: fontFamily || 'sans-serif' })
+      if (testText.bounds.width > maxTextWidth) {
+        lines.push(currentLine.slice(0, -1))
+        currentLine = char
+      }
+    }
+    if (currentLine) lines.push(currentLine)
+    textItem.content = lines.join('\n')
+  }
+
+  if (opacity !== 1) textItem.opacity = opacity
+  items.push(textItem)
+
+  return {
+    success: true,
+    type: 'bubble',
+    items: items.map(i => i.id),
+  }
+}
+
+module.exports = createBubble

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

@@ -0,0 +1,124 @@
+/**
+ * 按钮组件
+ */
+
+const paper = require('paper')
+const { loadImageAsRaster } = require('../utils/imageLoader')
+
+/**
+ * 创建按钮
+ */
+async function createButton(project, args) {
+  const {
+    x = 0,
+    y = 0,
+    width = 200,
+    height = 60,
+    text = '按钮',
+    fontSize = 24,
+    fontFamily,
+    color = '#ffffff',
+    backgroundColor = '#3b82f6',
+    borderColor,
+    borderWidth = 0,
+    radius = 8,
+    shadow,
+    gradient,
+    icon,
+    iconPosition = 'left',
+    opacity = 1,
+  } = args
+
+  // 创建按钮背景
+  const bgOptions = {
+    point: [x, y],
+    size: [width, height],
+    radius: radius,
+  }
+
+  if (borderColor) {
+    bgOptions.strokeColor = new paper.Color(borderColor)
+    bgOptions.strokeWidth = borderWidth
+  }
+
+  const bg = new paper.Path.Rectangle(bgOptions)
+
+  // 渐变或纯色填充
+  if (gradient && gradient.colors && gradient.colors.length > 0) {
+    const colors = gradient.colors.map(c => new paper.Color(c))
+    bg.fillColor = new paper.Color({
+      gradient: { stops: colors },
+      origin: bg.bounds.topLeft,
+      destination: bg.bounds.bottomLeft,
+    })
+  } else {
+    bg.fillColor = new paper.Color(backgroundColor)
+  }
+
+  // 阴影
+  if (shadow) {
+    bg.shadowColor = new paper.Color(shadow.color || '#000000')
+    bg.shadowBlur = shadow.blur || 10
+    bg.shadowOffset = new paper.Point(shadow.offsetX || 0, shadow.offsetY || 4)
+  }
+
+  if (opacity !== 1) {
+    bg.opacity = opacity
+  }
+
+  const items = [bg]
+  let textX = x + width / 2
+
+  // 添加图标
+  if (icon) {
+    const iconSize = Math.min(height * 0.5, 40)
+    const iconX = iconPosition === 'left' ? x + 20 : x + width - 40 - iconSize
+
+    if (icon.startsWith('http') || icon.startsWith('data:')) {
+      // URL图片图标
+      const { raster } = await loadImageAsRaster(project, icon, {
+        x: iconX,
+        y: y + (height - iconSize) / 2,
+        width: iconSize,
+        height: iconSize
+      }, opacity)
+      items.push(raster)
+    } else {
+      // Emoji 或文本图标
+      const iconText = new paper.PointText({
+        point: [iconX + iconSize / 2, y + height / 2 + fontSize / 3],
+        content: icon,
+        fontSize: iconSize,
+        justification: 'center',
+      })
+      if (opacity !== 1) iconText.opacity = opacity
+      items.push(iconText)
+    }
+
+    textX = iconPosition === 'left' ? x + width / 2 + 25 : x + width / 2 - 25
+  }
+
+  // 添加文字
+  const textItem = new paper.PointText({
+    point: [textX, y + height / 2 + fontSize / 3],
+    content: text,
+    fontSize,
+    fontFamily: fontFamily || 'sans-serif',
+    fillColor: new paper.Color(color),
+    justification: 'center',
+  })
+
+  if (opacity !== 1) {
+    textItem.opacity = opacity
+  }
+
+  items.push(textItem)
+
+  return {
+    success: true,
+    type: 'button',
+    items: items.map(i => i.id),
+  }
+}
+
+module.exports = createButton

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

@@ -6,25 +6,11 @@ const paper = require('paper')
 
 /**
  * 创建 CTA 按钮
- * 
- * @param {Object} project - Paper.js 项目
- * @param {Object} canvas - 画布对象
- * @param {Object} args - 组件参数
- * @param {number} args.x - X坐标（居中）
- * @param {number} args.y - Y坐标
- * @param {string} args.text - 按钮文字
- * @param {string} args.background - 背景色
- * @param {string} args.color - 文字颜色
- * @param {string} args.border - 边框颜色
- * @param {number} args.fontSize - 字体大小
- * @param {number} args.padding - 内边距
- * @param {number} args.radius - 圆角半径
- * @param {Object} args.shadow - 阴影设置
  */
 function createCTA(project, canvas, args) {
   const {
-    x, y,
-    text,
+    x = 0, y = 0,
+    text = '',
     background = '#007bff',
     color = '#ffffff',
     border,
@@ -32,13 +18,18 @@ function createCTA(project, canvas, args) {
     padding = 25,
     radius = 8,
     shadow,
+    width: customWidth,
   } = args
 
   const elements = []
 
-  // 计算按钮尺寸
-  const textWidth = text.length * fontSize * 0.7
-  const btnWidth = textWidth + padding * 2
+  // 确保 text 是字符串
+  const textStr = String(text || '')
+  // 使用更准确的字符宽度估算：中文约1.0，英文约0.5
+  const chineseChars = (textStr.match(/[\u4e00-\u9fa5]/g) || []).length
+  const otherChars = textStr.length - chineseChars
+  const textWidth = chineseChars * fontSize * 1.0 + otherChars * fontSize * 0.5
+  const btnWidth = customWidth || (textWidth + padding * 2)
   const btnHeight = fontSize + padding * 2
 
   const btnX = x - btnWidth / 2
@@ -56,22 +47,32 @@ function createCTA(project, canvas, args) {
     button.strokeWidth = 1
   }
 
-  if (shadow) {
-    button.shadowColor = new paper.Color(shadow.color || 'rgba(0,0,0,0.3)')
-    button.shadowBlur = shadow.blur || 10
-    button.shadowOffset = new paper.Point(shadow.offsetX || 0, shadow.offsetY || 4)
+  if (shadow && typeof shadow === 'object') {
+    try {
+      if (shadow.color) button.shadowColor = new paper.Color(shadow.color)
+      button.shadowBlur = shadow.blur || 10
+      button.shadowOffset = new paper.Point(shadow.offsetX || 0, shadow.offsetY || 4)
+    } catch (e) {
+      // 忽略阴影错误
+    }
   }
 
+  if (project && project.activeLayer) {
+    project.activeLayer.addChild(button)
+  }
   elements.push({ type: 'rectangle', id: button.id })
 
   // 绘制文字
   const buttonText = new paper.PointText({
     point: [x, y + btnHeight / 2 + fontSize / 3],
-    content: text,
+    content: textStr,
     fontSize: fontSize,
     fillColor: new paper.Color(color),
     justification: 'center',
   })
+  if (project && project.activeLayer) {
+    project.activeLayer.addChild(buttonText)
+  }
   elements.push({ type: 'text', id: buttonText.id })
 
   return {
@@ -79,6 +80,7 @@ function createCTA(project, canvas, args) {
     elements,
     width: btnWidth,
     height: btnHeight,
+    type: 'cta',
   }
 }
 

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

@@ -6,20 +6,6 @@ const paper = require('paper')
 
 /**
  * 创建特性网格
- * 
- * @param {Object} project - Paper.js 项目
- * @param {Object} canvas - 画布对象
- * @param {Object} args - 组件参数
- * @param {number} args.x - X坐标
- * @param {number} args.y - Y坐标
- * @param {number} args.columns - 列数
- * @param {number} args.itemWidth - 每个特性宽度
- * @param {number} args.itemHeight - 每个特性高度
- * @param {number} args.gap - 间距
- * @param {Array} args.items - 特性数组 [{icon, title, description}]
- * @param {string} args.background - 背景色
- * @param {string} args.borderColor - 边框颜色
- * @param {number} args.radius - 圆角半径
  */
 function createFeatureGrid(project, canvas, args) {
   const {
@@ -35,7 +21,13 @@ function createFeatureGrid(project, canvas, args) {
   } = args
 
   const elements = []
-  const rows = Math.ceil(items.length / columns)
+
+  // 确保 items 是数组
+  if (!Array.isArray(items)) {
+    items = []
+  }
+
+  const rows = items.length > 0 ? Math.ceil(items.length / columns) : 0
 
   for (let i = 0; i < items.length; i++) {
     const item = items[i]
@@ -55,6 +47,9 @@ function createFeatureGrid(project, canvas, args) {
     bg.strokeColor = new paper.Color(borderColor)
     bg.strokeWidth = 0.5
     bg.opacity = 0.8
+    if (project && project.activeLayer) {
+      project.activeLayer.addChild(bg)
+    }
     elements.push({ type: 'rectangle', id: bg.id })
 
     const padding = 15
@@ -69,6 +64,9 @@ function createFeatureGrid(project, canvas, args) {
         fillColor: new paper.Color(item.iconColor || '#00ff88'),
         justification: 'left',
       })
+      if (project && project.activeLayer) {
+        project.activeLayer.addChild(iconText)
+      }
       elements.push({ type: 'text', id: iconText.id })
       itemYOffset += 35
     }
@@ -82,6 +80,9 @@ function createFeatureGrid(project, canvas, args) {
         fillColor: new paper.Color(item.titleColor || '#ffffff'),
         justification: 'left',
       })
+      if (project && project.activeLayer) {
+        project.activeLayer.addChild(titleText)
+      }
       elements.push({ type: 'text', id: titleText.id })
       itemYOffset += 22
     }
@@ -95,6 +96,9 @@ function createFeatureGrid(project, canvas, args) {
         fillColor: new paper.Color(item.descColor || '#888888'),
         justification: 'left',
       })
+      if (project && project.activeLayer) {
+        project.activeLayer.addChild(descText)
+      }
       elements.push({ type: 'text', id: descText.id })
     }
   }
@@ -102,10 +106,11 @@ function createFeatureGrid(project, canvas, args) {
   return {
     success: true,
     elements,
-    width: columns * itemWidth + (columns - 1) * gap,
-    height: rows * itemHeight + (rows - 1) * gap,
+    width: columns * itemWidth + Math.max(0, columns - 1) * gap,
+    height: rows * itemHeight + Math.max(0, rows - 1) * gap,
     rows,
     cols: columns,
+    type: 'featureGrid',
   }
 }