foliko 1.1.1 → 1.1.2

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

@@ -0,0 +1,230 @@
+/**
+ * 装饰边框组件 - 多种风格
+ */
+
+const paper = require('paper')
+
+/**
+ * 创建边框
+ */
+function createFrame(project, args) {
+  const {
+    x = 0,
+    y = 0,
+    width = 400,
+    height = 300,
+    style = 'simple', // simple, double, dashed, dotted, corner, vintage, modern, floral
+    color = '#000000',
+    borderWidth = 2,
+    radius = 0,
+    padding = 0,
+    opacity = 1,
+  } = args
+
+  const items = []
+  const effectiveX = x + padding
+  const effectiveY = y + padding
+  const effectiveWidth = width - padding * 2
+  const effectiveHeight = height - padding * 2
+
+  const strokeOpts = {
+    strokeColor: new paper.Color(color),
+    strokeWidth: borderWidth,
+  }
+
+  switch (style) {
+    case 'simple':
+      // 简单矩形
+      items.push(new paper.Path.Rectangle({
+        point: [effectiveX, effectiveY],
+        size: [effectiveWidth, effectiveHeight],
+        radius: radius,
+        ...strokeOpts,
+      }))
+      break
+
+    case 'double':
+      // 双线边框
+      items.push(new paper.Path.Rectangle({
+        point: [effectiveX, effectiveY],
+        size: [effectiveWidth, effectiveHeight],
+        radius: radius,
+        ...strokeOpts,
+      }))
+      items.push(new paper.Path.Rectangle({
+        point: [effectiveX + 8, effectiveY + 8],
+        size: [effectiveWidth - 16, effectiveHeight - 16],
+        radius: radius,
+        ...strokeOpts,
+      }))
+      break
+
+    case 'dashed':
+      // 虚线边框
+      const dashed = new paper.Path.Rectangle({
+        point: [effectiveX, effectiveY],
+        size: [effectiveWidth, effectiveHeight],
+        radius: radius,
+        ...strokeOpts,
+      })
+      dashed.dashArray = [10, 5]
+      items.push(dashed)
+      break
+
+    case 'dotted':
+      // 点线边框
+      const dotted = new paper.Path.Rectangle({
+        point: [effectiveX, effectiveY],
+        size: [effectiveWidth, effectiveHeight],
+        radius: radius,
+        strokeColor: new paper.Color(color),
+        strokeWidth: borderWidth,
+        dashArray: [2, 4],
+      })
+      items.push(dotted)
+      break
+
+    case 'corner':
+      // 四角装饰
+      const cornerSize = Math.min(30, effectiveWidth / 4, effectiveHeight / 4)
+      // 左上角
+      items.push(new paper.Path.Line(
+        [effectiveX, effectiveY + cornerSize],
+        [effectiveX, effectiveY],
+        { ...strokeOpts }
+      ))
+      items.push(new paper.Path.Line(
+        [effectiveX, effectiveY],
+        [effectiveX + cornerSize, effectiveY],
+        { ...strokeOpts }
+      ))
+      // 右上角
+      items.push(new paper.Path.Line(
+        [effectiveX + effectiveWidth - cornerSize, effectiveY],
+        [effectiveX + effectiveWidth, effectiveY],
+        { ...strokeOpts }
+      ))
+      items.push(new paper.Path.Line(
+        [effectiveX + effectiveWidth, effectiveY],
+        [effectiveX + effectiveWidth, effectiveY + cornerSize],
+        { ...strokeOpts }
+      ))
+      // 左下角
+      items.push(new paper.Path.Line(
+        [effectiveX, effectiveY + effectiveHeight - cornerSize],
+        [effectiveX, effectiveY + effectiveHeight],
+        { ...strokeOpts }
+      ))
+      items.push(new paper.Path.Line(
+        [effectiveX, effectiveY + effectiveHeight],
+        [effectiveX + cornerSize, effectiveY + effectiveHeight],
+        { ...strokeOpts }
+      ))
+      // 右下角
+      items.push(new paper.Path.Line(
+        [effectiveX + effectiveWidth - cornerSize, effectiveY + effectiveHeight],
+        [effectiveX + effectiveWidth, effectiveY + effectiveHeight],
+        { ...strokeOpts }
+      ))
+      items.push(new paper.Path.Line(
+        [effectiveX + effectiveWidth, effectiveY + effectiveHeight - cornerSize],
+        [effectiveX + effectiveWidth, effectiveY + effectiveHeight],
+        { ...strokeOpts }
+      ))
+      break
+
+    case 'vintage':
+      // 复古边框 - 双线+角装饰
+      const vintageOuter = new paper.Path.Rectangle({
+        point: [effectiveX, effectiveY],
+        size: [effectiveWidth, effectiveHeight],
+        ...strokeOpts,
+      })
+      items.push(vintageOuter)
+      const vintageInner = new paper.Path.Rectangle({
+        point: [effectiveX + 6, effectiveY + 6],
+        size: [effectiveWidth - 12, effectiveHeight - 12],
+        ...strokeOpts,
+      })
+      items.push(vintageInner)
+      // 四角小方块
+      const cornerBlockSize = 8
+      const corners = [
+        [effectiveX, effectiveY],
+        [effectiveX + effectiveWidth - cornerBlockSize, effectiveY],
+        [effectiveX, effectiveY + effectiveHeight - cornerBlockSize],
+        [effectiveX + effectiveWidth - cornerBlockSize, effectiveY + effectiveHeight - cornerBlockSize],
+      ]
+      corners.forEach(([cx, cy]) => {
+        items.push(new paper.Path.Rectangle({
+          point: [cx, cy],
+          size: [cornerBlockSize, cornerBlockSize],
+          fillColor: new paper.Color(color),
+        }))
+      })
+      break
+
+    case 'modern':
+      // 现代边框 - 粗细交替
+      const modernPath = new paper.Path.Rectangle({
+        point: [effectiveX, effectiveY],
+        size: [effectiveWidth, effectiveHeight],
+        radius: radius,
+        ...strokeOpts,
+      })
+      modernPath.dashArray = [20, 5, 5, 5]
+      items.push(modernPath)
+      break
+
+    case 'floral':
+      // 花纹边框 - 角装饰+边线
+      const floral = new paper.Path.Rectangle({
+        point: [effectiveX, effectiveY],
+        size: [effectiveWidth, effectiveHeight],
+        ...strokeOpts,
+      })
+      items.push(floral)
+      // 四个角的花纹
+      const fCornerSize = Math.min(25, effectiveWidth / 6, effectiveHeight / 6)
+      const fCorners = [
+        { x: effectiveX, y: effectiveY, rotation: 0 },
+        { x: effectiveX + effectiveWidth - fCornerSize, y: effectiveY, rotation: 90 },
+        { x: effectiveX, y: effectiveY + effectiveHeight - fCornerSize, rotation: 270 },
+        { x: effectiveX + effectiveWidth - fCornerSize, y: effectiveY + effectiveHeight - fCornerSize, rotation: 180 },
+      ]
+      fCorners.forEach(({ x: fx, y: fy, rotation }) => {
+        const ornament = new paper.Path()
+        ornament.add(new paper.Point(fx + fCornerSize / 2, fy + fCornerSize))
+        ornament.add(new paper.Point(fx + fCornerSize, fy + fCornerSize / 2))
+        ornament.add(new paper.Point(fx + fCornerSize, fy + fCornerSize))
+        ornament.strokeColor = new paper.Color(color)
+        ornament.strokeWidth = borderWidth
+        ornament.rotate(rotation, new paper.Point(fx + fCornerSize, fy + fCornerSize))
+        items.push(ornament)
+      })
+      break
+
+    default:
+      items.push(new paper.Path.Rectangle({
+        point: [effectiveX, effectiveY],
+        size: [effectiveWidth, effectiveHeight],
+        radius: radius,
+        ...strokeOpts,
+      }))
+  }
+
+  // 应用透明度
+  if (opacity !== 1) {
+    items.forEach(item => {
+      item.opacity = opacity
+    })
+  }
+
+  return {
+    success: true,
+    type: 'frame',
+    items: items.map(i => i.id),
+  }
+}
+
+module.exports = createFrame

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

@@ -0,0 +1,144 @@
+/**
+ * 高亮文字组件 - 荧光笔效果
+ */
+
+const paper = require('paper')
+
+/**
+ * 创建高亮文字
+ */
+function createHighlightText(project, args) {
+  const {
+    x = 0,
+    y = 0,
+    text = '',
+    fontSize = 48,
+    fontFamily,
+    color = '#000000',
+    highlightColor = '#ffff00',
+    highlightStyle = 'marker', // marker, underline, background, stroke
+    highlightWidth = 20,
+    strokeWidth = 2,
+    shadow,
+    opacity = 1,
+  } = args
+
+  const items = []
+
+  // 创建文字以获取尺寸
+  const textItem = new paper.PointText({
+    point: [x, y + fontSize],
+    content: text,
+    fontSize,
+    fontFamily: fontFamily || 'sans-serif',
+    fillColor: new paper.Color(color),
+    justification: 'left',
+  })
+
+  const textBounds = textItem.bounds
+
+  // 根据样式添加高亮
+  switch (highlightStyle) {
+    case 'marker':
+      // 荧光笔效果 - 倾斜的矩形
+      const markerHeight = fontSize * 0.8
+      const marker = new paper.Path.Rectangle({
+        point: [textBounds.x - 5, textBounds.y + fontSize * 0.3],
+        size: [textBounds.width + 10, markerHeight],
+      })
+      marker.fillColor = new paper.Color(highlightColor)
+      marker.opacity = 0.5
+      marker.rotate(-5, marker.bounds.center)
+      if (shadow) {
+        marker.shadowColor = new paper.Color(shadow.color || '#000000')
+        marker.shadowBlur = shadow.blur || 5
+        marker.shadowOffset = new paper.Point(shadow.offsetX || 2, shadow.offsetY || 2)
+      }
+      if (opacity !== 1) marker.opacity *= opacity
+      items.push(marker)
+      break
+
+    case 'underline':
+      // 下划线
+      const underlineY = textBounds.y + fontSize + 5
+      const underline = new paper.Path.Line(
+        [textBounds.x, underlineY],
+        [textBounds.x + textBounds.width, underlineY]
+      )
+      underline.strokeColor = new paper.Color(highlightColor)
+      underline.strokeWidth = highlightWidth
+      underline.strokeCap = 'round'
+      if (shadow) {
+        underline.shadowColor = new paper.Color(shadow.color || '#000000')
+        underline.shadowBlur = shadow.blur || 5
+        underline.shadowOffset = new paper.Point(shadow.offsetX || 2, shadow.offsetY || 2)
+      }
+      if (opacity !== 1) underline.opacity = opacity
+      items.push(underline)
+      break
+
+    case 'background':
+      // 背景色块
+      const padding = 8
+      const bg = new paper.Path.Rectangle({
+        point: [textBounds.x - padding, textBounds.y - 5],
+        size: [textBounds.width + padding * 2, fontSize + 10],
+        radius: 4,
+      })
+      bg.fillColor = new paper.Color(highlightColor)
+      bg.opacity = 0.6
+      if (shadow) {
+        bg.shadowColor = new paper.Color(shadow.color || '#000000')
+        bg.shadowBlur = shadow.blur || 5
+        bg.shadowOffset = new paper.Point(shadow.offsetX || 2, shadow.offsetY || 2)
+      }
+      if (opacity !== 1) bg.opacity *= opacity
+      items.push(bg)
+      break
+
+    case 'stroke':
+      // 描边效果
+      textItem.strokeColor = new paper.Color(highlightColor)
+      textItem.strokeWidth = strokeWidth
+      if (shadow) {
+        textItem.shadowColor = new paper.Color(shadow.color || '#000000')
+        textItem.shadowBlur = shadow.blur || 5
+        textItem.shadowOffset = new paper.Point(shadow.offsetX || 2, shadow.offsetY || 2)
+      }
+      if (opacity !== 1) textItem.opacity = opacity
+      items.push(textItem)
+      break
+
+    case 'neon':
+      // 霓虹效果
+      textItem.strokeColor = new paper.Color(highlightColor)
+      textItem.strokeWidth = strokeWidth * 2
+      const neonClone = textItem.clone()
+      neonClone.strokeWidth = strokeWidth * 4
+      neonClone.strokeColor = new paper.Color(highlightColor)
+      neonClone.fillColor = null
+      neonClone.opacity = 0.3
+      if (opacity !== 1) {
+        textItem.opacity = opacity
+        neonClone.opacity *= opacity
+      }
+      items.push(neonClone)
+      items.push(textItem)
+      break
+  }
+
+  // 如果不是 stroke 样式，需要重新添加文字
+  if (highlightStyle !== 'stroke' && highlightStyle !== 'neon') {
+    if (opacity !== 1) textItem.opacity = opacity
+    items.push(textItem)
+  }
+
+  return {
+    success: true,
+    type: 'highlightText',
+    items: items.map(i => i.id),
+    bounds: textBounds,
+  }
+}
+
+module.exports = createHighlightText

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

@@ -0,0 +1,94 @@
+/**
+ * 图标组件 - 支持 emoji、图片图标
+ */
+
+const paper = require('paper')
+const { loadImageAsRaster } = require('../utils/imageLoader')
+
+/**
+ * 创建图标
+ */
+async function createIcon(project, args) {
+  const {
+    x = 0,
+    y = 0,
+    size = 64,
+    icon, // emoji 或 图片URL
+    color,
+    backgroundColor,
+    borderColor,
+    borderWidth = 0,
+    radius = 0,
+    shadow,
+    opacity = 1,
+  } = args
+
+  const items = []
+
+  // 背景
+  if (backgroundColor || borderColor) {
+    const bg = new paper.Path.Rectangle({
+      point: [x, y],
+      size: [size, size],
+      radius: radius,
+    })
+
+    if (backgroundColor) {
+      bg.fillColor = new paper.Color(backgroundColor)
+    }
+
+    if (borderColor) {
+      bg.strokeColor = new paper.Color(borderColor)
+      bg.strokeWidth = borderWidth
+    }
+
+    if (shadow) {
+      bg.shadowColor = new paper.Color(shadow.color || '#000000')
+      bg.shadowBlur = shadow.blur || 5
+      bg.shadowOffset = new paper.Point(shadow.offsetX || 2, shadow.offsetY || 2)
+    }
+
+    if (opacity !== 1) {
+      bg.opacity = opacity
+    }
+
+    items.push(bg)
+  }
+
+  // 图标内容
+  if (icon) {
+    // 判断是否为图片路径（本地文件、http、data URL）
+    const isImagePath = icon.startsWith('http') || icon.startsWith('data:') ||
+                        (icon.match(/\.(png|jpg|jpeg|gif|svg|webp|bmp)$/i) && !icon.match(/[\u4e00-\u9fa5]/))
+
+    if (isImagePath) {
+      // 图片图标 - 使用 imageLoader
+      const padding = backgroundColor ? 8 : 0
+      const iconSize = size - padding * 2
+      const { raster } = await loadImageAsRaster(project, icon, { x: x + padding, y: y + padding, width: iconSize, height: iconSize }, opacity)
+      items.push(raster)
+    } else {
+      // Emoji 或文字图标
+      const fontSize = Math.min(size * 0.6, 64)
+      const textItem = new paper.PointText({
+        point: [x + size / 2, y + size / 2 + fontSize / 3],
+        content: icon,
+        fontSize,
+        justification: 'center',
+      })
+      if (color) {
+        textItem.fillColor = new paper.Color(color)
+      }
+      if (opacity !== 1) textItem.opacity = opacity
+      items.push(textItem)
+    }
+  }
+
+  return {
+    success: true,
+    type: 'icon',
+    items: items.map(i => i.id),
+  }
+}
+
+module.exports = createIcon

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

@@ -28,6 +28,15 @@ const createChip = require('./chip')
 const createChart = require('./chart')
 const createWatermark = require('./watermark')
 const createTable = require('./table')
+const createButton = require('./button')
+const createIcon = require('./icon')
+const createQRCode = require('./qrcode')
+const createFrame = require('./frame')
+const createBubble = require('./bubble')
+const createRibbon = require('./ribbon')
+const createSeal = require('./seal')
+const createHighlightText = require('./highlightText')
+const createBarcode = require('./barcode')
 
 module.exports = {
   // 原有组件
@@ -59,4 +68,14 @@ module.exports = {
   createChart,
   createWatermark,
   createTable,
+  // 新增设计组件
+  createButton,
+  createIcon,
+  createQRCode,
+  createFrame,
+  createBubble,
+  createRibbon,
+  createSeal,
+  createHighlightText,
+  createBarcode,
 }

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

@@ -26,7 +26,8 @@ const paper = require('paper')
  */
 function createListItem(project, canvas, args) {
   const {
-    x, y,
+    x = 0,
+    y = 0,
     width = 400,
     icon = '→',
     title,
@@ -109,7 +110,7 @@ function createListItem(project, canvas, args) {
     elements.push({ type: 'text', id: badgeText.id })
   }
 
-  return { success: true, elements }
+  return { success: true, elements, type: 'listItem' }
 }
 
 /**
@@ -117,7 +118,7 @@ function createListItem(project, canvas, args) {
  */
 function createList(project, canvas, args) {
   const {
-    x, y,
+    x = 0, y = 0,
     items = [],
     gap = 10,
     width = 400,
@@ -139,8 +140,8 @@ function createList(project, canvas, args) {
     success: true,
     elements,
     height: currentY - y,
+    type: 'list',
   }
 }
 
-module.exports = createListItem
-module.exports.createList = createList
+module.exports = { createListItem, createList }

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

@@ -0,0 +1,74 @@
+/**
+ * 二维码组件 - 本地生成
+ */
+
+const paper = require('paper')
+const QRCode = require('qrcode')
+
+/**
+ * 创建二维码
+ */
+async function createQRCode(project, args) {
+  const {
+    x = 0,
+    y = 0,
+    size = 200,
+    content = '',
+    color = '#000000',
+    backgroundColor = '#ffffff',
+    logo,
+    logoSize,
+    opacity = 1,
+  } = args
+
+  try {
+    // 生成 QR 码图片
+    const qrDataUrl = await QRCode.toDataURL(content, {
+      width: size,
+      margin: 2,
+      color: {
+        dark: color,
+        light: backgroundColor,
+      },
+    })
+
+    // 使用 imageLoader 加载
+    const { loadImageAsRaster } = require('../utils/imageLoader')
+    const { raster } = await loadImageAsRaster(project, qrDataUrl, { x, y, width: size, height: size }, opacity)
+    const items = [raster]
+
+    // 添加logo
+    if (logo) {
+      const ls = logoSize || size * 0.2
+      const { raster: logoRaster } = await loadImageAsRaster(project, logo, {
+        x: x + (size - ls) / 2,
+        y: y + (size - ls) / 2,
+        width: ls,
+        height: ls
+      }, opacity)
+
+      // 添加白色背景
+      const logoBg = new paper.Path.Rectangle({
+        point: [x + (size - ls) / 2 - 5, y + (size - ls) / 2 - 5],
+        size: [ls + 10, ls + 10],
+        fillColor: new paper.Color(backgroundColor),
+        radius: 4,
+      })
+      logoBg.sendToBack()
+      items.push(logoRaster)
+    }
+
+    return {
+      success: true,
+      type: 'qrcode',
+      items: items.map(i => i.id),
+    }
+  } catch (err) {
+    return {
+      success: false,
+      error: `Failed to generate QR code: ${err.message}`,
+    }
+  }
+}
+
+module.exports = createQRCode