foliko 1.0.86 → 1.1.0

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

@@ -0,0 +1,85 @@
+/**
+ * CTA（行动号召）按钮组件
+ */
+
+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,
+    background = '#007bff',
+    color = '#ffffff',
+    border,
+    fontSize = 20,
+    padding = 25,
+    radius = 8,
+    shadow,
+  } = args
+
+  const elements = []
+
+  // 计算按钮尺寸
+  const textWidth = text.length * fontSize * 0.7
+  const btnWidth = textWidth + padding * 2
+  const btnHeight = fontSize + padding * 2
+
+  const btnX = x - btnWidth / 2
+
+  // 绘制按钮背景
+  const button = new paper.Path.Rectangle({
+    point: [btnX, y],
+    size: [btnWidth, btnHeight],
+    radius: radius,
+  })
+  button.fillColor = new paper.Color(background)
+
+  if (border) {
+    button.strokeColor = new paper.Color(border)
+    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)
+  }
+
+  elements.push({ type: 'rectangle', id: button.id })
+
+  // 绘制文字
+  const buttonText = new paper.PointText({
+    point: [x, y + btnHeight / 2 + fontSize / 3],
+    content: text,
+    fontSize: fontSize,
+    fillColor: new paper.Color(color),
+    justification: 'center',
+  })
+  elements.push({ type: 'text', id: buttonText.id })
+
+  return {
+    success: true,
+    elements,
+    width: btnWidth,
+    height: btnHeight,
+  }
+}
+
+module.exports = createCTA

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

@@ -0,0 +1,55 @@
+/**
+ * 分隔线组件
+ */
+
+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.width - 宽度
+ * @param {string} args.color - 颜色
+ * @param {number} args.thickness - 厚度
+ * @param {string} args.style - 样式: solid, dashed
+ * @param {string} args.align - 对齐: left, center, right
+ */
+function createDivider(project, canvas, args) {
+  const {
+    x, y, width,
+    color = '#00d9ff',
+    thickness = 1,
+    style = 'solid',
+    align = 'center',
+  } = args
+
+  let startX = x
+  let endX = x + width
+
+  if (align === 'center') {
+    startX = x - width / 2
+    endX = x + width / 2
+  } else if (align === 'right') {
+    startX = x - width
+    endX = x
+  }
+
+  const line = new paper.Path.Line({
+    from: [startX, y],
+    to: [endX, y],
+    strokeColor: new paper.Color(color),
+    strokeWidth: thickness,
+  })
+
+  if (style === 'dashed') {
+    line.dashArray = [10, 5]
+  }
+
+  return { success: true, id: line.id, type: 'line' }
+}
+
+module.exports = createDivider

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

@@ -0,0 +1,85 @@
+/**
+ * 特性展示组件
+ */
+
+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.width - 总宽度
+ * @param {string} args.icon - 图标（emoji）
+ * @param {string} args.title - 标题
+ * @param {string} args.description - 描述
+ * @param {string} args.iconColor - 图标颜色
+ * @param {string} args.titleColor - 标题颜色
+ * @param {string} args.descColor - 描述颜色
+ * @param {number} args.iconSize - 图标大小
+ * @param {number} args.titleSize - 标题大小
+ * @param {number} args.descSize - 描述大小
+ */
+function createFeature(project, canvas, args) {
+  const {
+    x, y, width,
+    icon,
+    title,
+    description,
+    iconColor = '#007bff',
+    titleColor = '#ffffff',
+    descColor = '#aaaaaa',
+    iconSize = 32,
+    titleSize = 20,
+    descSize = 14,
+  } = args
+
+  const elements = []
+  const padding = 15
+  let currentY = y
+
+  // 绘制图标
+  if (icon) {
+    const iconText = new paper.PointText({
+      point: [x + padding, currentY + iconSize],
+      content: icon,
+      fontSize: iconSize,
+      fillColor: new paper.Color(iconColor),
+      justification: 'left',
+    })
+    elements.push({ type: 'text', id: iconText.id })
+  }
+
+  // 绘制标题
+  if (title) {
+    currentY += icon ? iconSize + 5 : 0
+    const titleText = new paper.PointText({
+      point: [x + padding, currentY + titleSize],
+      content: title,
+      fontSize: titleSize,
+      fillColor: new paper.Color(titleColor),
+      justification: 'left',
+    })
+    elements.push({ type: 'text', id: titleText.id })
+  }
+
+  // 绘制描述
+  if (description) {
+    currentY += title ? titleSize + 5 : 0
+    const descText = new paper.PointText({
+      point: [x + padding, currentY + descSize],
+      content: description,
+      fontSize: descSize,
+      fillColor: new paper.Color(descColor),
+      justification: 'left',
+    })
+    elements.push({ type: 'text', id: descText.id })
+  }
+
+  return { success: true, elements }
+}
+
+module.exports = createFeature

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

@@ -0,0 +1,112 @@
+/**
+ * 特性网格组件
+ */
+
+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 {
+    x, y,
+    columns = 3,
+    itemWidth = 200,
+    itemHeight = 120,
+    gap = 20,
+    items = [],
+    background = '#1a1a2e',
+    borderColor = '#00d9ff',
+    radius = 8,
+  } = args
+
+  const elements = []
+  const rows = Math.ceil(items.length / columns)
+
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i]
+    const col = i % columns
+    const row = Math.floor(i / columns)
+
+    const itemX = x + col * (itemWidth + gap)
+    const itemY = y + row * (itemHeight + gap)
+
+    // 绘制每个特性的背景
+    const bg = new paper.Path.Rectangle({
+      point: [itemX, itemY],
+      size: [itemWidth, itemHeight],
+      radius: radius,
+    })
+    bg.fillColor = new paper.Color(background)
+    bg.strokeColor = new paper.Color(borderColor)
+    bg.strokeWidth = 0.5
+    bg.opacity = 0.8
+    elements.push({ type: 'rectangle', id: bg.id })
+
+    const padding = 15
+    let itemYOffset = itemY + padding
+
+    // 绘制图标
+    if (item.icon) {
+      const iconText = new paper.PointText({
+        point: [itemX + padding, itemYOffset + 24],
+        content: item.icon,
+        fontSize: 28,
+        fillColor: new paper.Color(item.iconColor || '#00ff88'),
+        justification: 'left',
+      })
+      elements.push({ type: 'text', id: iconText.id })
+      itemYOffset += 35
+    }
+
+    // 绘制标题
+    if (item.title) {
+      const titleText = new paper.PointText({
+        point: [itemX + padding, itemYOffset + 18],
+        content: item.title,
+        fontSize: 16,
+        fillColor: new paper.Color(item.titleColor || '#ffffff'),
+        justification: 'left',
+      })
+      elements.push({ type: 'text', id: titleText.id })
+      itemYOffset += 22
+    }
+
+    // 绘制描述
+    if (item.description) {
+      const descText = new paper.PointText({
+        point: [itemX + padding, itemYOffset + 14],
+        content: item.description,
+        fontSize: 12,
+        fillColor: new paper.Color(item.descColor || '#888888'),
+        justification: 'left',
+      })
+      elements.push({ type: 'text', id: descText.id })
+    }
+  }
+
+  return {
+    success: true,
+    elements,
+    width: columns * itemWidth + (columns - 1) * gap,
+    height: rows * itemHeight + (rows - 1) * gap,
+    rows,
+    cols: columns,
+  }
+}
+
+module.exports = createFeatureGrid

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

@@ -0,0 +1,118 @@
+/**
+ * 网格布局组件
+ * 支持任意行列的网格布局
+ */
+
+const createGrid = (ctx) => ({
+  /**
+   * @param {Object} params
+   * @param {number} params.x - 起始X坐标
+   * @param {number} params.y - 起始Y坐标
+   * @param {number} params.width - 总宽度
+   * @param {number} params.height - 总高度
+   * @param {number} [params.columns=3] - 列数
+   * @param {number} [params.rows=2] - 行数
+   * @param {number} [params.gapX=20] - 水平间距
+   * @param {number} [params.gapY=20] - 垂直间距
+   * @param {string} [params.background] - 背景色
+   * @param {string} [params.borderColor] - 边框颜色
+   * @param {number} [params.borderWidth] - 边框宽度
+   * @param {number} [params.radius=0] - 圆角
+   * @param {string} [params.direction='row'] - 排列方向: row(行优先), column(列优先)
+   */
+  draw({
+    x,
+    y,
+    width,
+    height,
+    columns = 3,
+    rows = 2,
+    gapX = 20,
+    gapY = 20,
+    background,
+    borderColor,
+    borderWidth = 1,
+    radius = 0,
+    direction = 'row'
+  }) {
+    const elements = []
+    
+    // 计算单元格尺寸
+    const totalGapX = gapX * (columns - 1)
+    const totalGapY = gapY * (rows - 1)
+    const cellWidth = (width - totalGapX) / columns
+    const cellHeight = (height - totalGapY) / rows
+    
+    // 绘制背景
+    if (background) {
+      const bg = new ctx.Path.Rectangle({
+        point: [x, y],
+        size: [width, height],
+        radius: radius
+      })
+      bg.fillColor = new ctx.Color(background)
+      elements.push({ type: 'rectangle', id: bg.id })
+    }
+    
+    // 绘制边框
+    if (borderColor && borderWidth > 0) {
+      const border = new ctx.Path.Rectangle({
+        point: [x, y],
+        size: [width, height],
+        radius: radius
+      })
+      border.fillColor = new ctx.Color('transparent')
+      border.strokeColor = new ctx.Color(borderColor)
+      border.strokeWidth = borderWidth
+      elements.push({ type: 'rectangle', id: border.id })
+    }
+    
+    // 生成网格位置信息
+    const cellPositions = []
+    const totalCells = columns * rows
+    
+    for (let i = 0; i < totalCells; i++) {
+      let col, row
+      
+      if (direction === 'row') {
+        col = i % columns
+        row = Math.floor(i / columns)
+      } else {
+        row = i % rows
+        col = Math.floor(i / rows)
+      }
+      
+      const cellX = x + col * (cellWidth + gapX)
+      const cellY = y + row * (cellHeight + gapY)
+      
+      cellPositions.push({
+        index: i,
+        column: col,
+        row: row,
+        x: cellX,
+        y: cellY,
+        width: cellWidth,
+        height: cellHeight,
+        centerX: cellX + cellWidth / 2,
+        centerY: cellY + cellHeight / 2
+      })
+    }
+    
+    // 返回网格布局信息
+    return {
+      success: true,
+      elements,
+      cellPositions,
+      cellWidth,
+      cellHeight,
+      columns,
+      rows,
+      totalCells,
+      totalWidth: width,
+      totalHeight: height,
+      type: 'grid'
+    }
+  }
+})
+
+module.exports = createGrid

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

@@ -0,0 +1,155 @@
+/**
+ * 图片框组件 - 带装饰边框的图片
+ */
+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({
+    src,
+    x,
+    y,
+    width,
+    height,
+    borderColor = '#ffffff',
+    borderWidth = 3,
+    outerColor = '#1a1a2e',
+    outerWidth = 6,
+    shadowBlur = 0,
+    shadowOffsetX = 0,
+    shadowOffsetY = 0,
+    shadowColor = 'rgba(0,0,0,0.3)',
+    radius = 0,
+    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()
+    }
+
+    // 绘制内边框
+    if (borderWidth > 0) {
+      ctx.fillStyle = borderColor
+      await _roundRect(ctx, x - borderWidth, y - borderWidth, width + borderWidth * 2, height + borderWidth * 2, radius + borderWidth)
+      ctx.fill()
+    }
+
+    // 绘制阴影
+    if (shadowBlur > 0) {
+      ctx.shadowColor = shadowColor
+      ctx.shadowBlur = shadowBlur
+      ctx.shadowOffsetX = shadowOffsetX
+      ctx.shadowOffsetY = shadowOffsetY
+    }
+
+    // 加载并绘制图片
+    const image = await _loadImage(src)
+    const imgWidth = image.width
+    const imgHeight = image.height
+    const imgRatio = imgWidth / imgHeight
+    const boxRatio = width / height
+
+    let drawX = x, drawY = y, drawW = width, drawH = height
+
+    if (fit === 'cover') {
+      if (imgRatio > boxRatio) {
+        drawH = height
+        drawW = height * imgRatio
+        drawX = x - (drawW - width) / 2
+      } else {
+        drawW = width
+        drawH = width / imgRatio
+        drawY = y - (drawH - height) / 2
+      }
+    } else if (fit === 'contain') {
+      if (imgRatio > boxRatio) {
+        drawW = width
+        drawH = width / imgRatio
+        drawY = y + (height - drawH) / 2
+      } else {
+        drawH = height
+        drawW = height * imgRatio
+        drawX = x + (width - drawW) / 2
+      }
+    }
+
+    // 裁剪并绘制图片
+    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
+    }
+  }
+})
+
+// 辅助函数：圆角矩形
+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}`))
+      }
+    }
+    img.src = src
+  })
+}
+
+module.exports = createImageFrame

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

@@ -0,0 +1,62 @@
+/**
+ * 高级组件模块导出
+ */
+
+const createCard = require('./card')
+const createBadge = require('./badge')
+const createCTA = require('./cta')
+const createFeature = require('./feature')
+const createFeatureGrid = require('./featureGrid')
+const createDivider = require('./divider')
+const createAvatar = require('./avatar')
+const createProgress = require('./progress')
+const createRating = require('./rating')
+const createQuote = require('./quote')
+const createStatCard = require('./statCard')
+const createTagCloud = require('./tagCloud')
+const createStepper = require('./stepper')
+const createTimeline = require('./timeline')
+const { createListItem, createList } = require('./listItem')
+const createNotification = require('./notification')
+const createImageFrame = require('./imageFrame')
+const createColumns = require('./columns')
+const createGrid = require('./grid')
+const createStar = require('./star')
+const createArrow = require('./arrow')
+const createProgressCircle = require('./progressCircle')
+const createChip = require('./chip')
+const createChart = require('./chart')
+const createWatermark = require('./watermark')
+const createTable = require('./table')
+
+module.exports = {
+  // 原有组件
+  createCard,
+  createBadge,
+  createCTA,
+  createFeature,
+  createFeatureGrid,
+  createDivider,
+  createAvatar,
+  createProgress,
+  createRating,
+  createQuote,
+  createStatCard,
+  createTagCloud,
+  createStepper,
+  createTimeline,
+  createListItem,
+  createList,
+  createNotification,
+  createImageFrame,
+  createColumns,
+  createGrid,
+  // 新增组件
+  createStar,
+  createArrow,
+  createProgressCircle,
+  createChip,
+  createChart,
+  createWatermark,
+  createTable,
+}