foliko 1.0.87 → 1.1.1

package/.agent/plugins/poster-plugin/src/components/badge.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 {string} args.text - 徽章文字
+ * @param {string} args.background - 背景色
+ * @param {string} args.color - 文字颜色
+ * @param {string} args.border - 边框颜色
+ * @param {number} args.fontSize - 字体大小
+ * @param {string} args.align - 对齐方式: left, center, right
+ * @param {number} args.padding - 内边距
+ * @param {number} args.radius - 圆角半径
+ */
+function createBadge(project, canvas, args) {
+  const {
+    x, y,
+    text,
+    background = '#007bff',
+    color = '#ffffff',
+    border,
+    fontSize = 18,
+    align = 'center',
+    padding = 15,
+    radius = 4,
+  } = args
+
+  const elements = []
+
+  // 计算文字宽度（估算）
+  const textWidth = text.length * fontSize * 0.6
+  const badgeWidth = textWidth + padding * 2
+  const badgeHeight = fontSize + padding * 2
+
+  // 计算X位置
+  let badgeX = x
+  if (align === 'center') {
+    badgeX = x - badgeWidth / 2
+  } else if (align === 'right') {
+    badgeX = x - badgeWidth
+  }
+
+  // 绘制徽章背景
+  const badge = new paper.Path.Rectangle({
+    point: [badgeX, y],
+    size: [badgeWidth, badgeHeight],
+    radius: radius,
+  })
+  badge.fillColor = new paper.Color(background)
+
+  if (border) {
+    badge.strokeColor = new paper.Color(border)
+    badge.strokeWidth = 1
+  }
+
+  elements.push({ type: 'rectangle', id: badge.id })
+
+  // 绘制文字
+  const badgeText = new paper.PointText({
+    point: [badgeX + badgeWidth / 2, y + badgeHeight / 2 + fontSize / 3],
+    content: text,
+    fontSize: fontSize,
+    fillColor: new paper.Color(color),
+    justification: 'center',
+  })
+  elements.push({ type: 'text', id: badgeText.id })
+
+  return {
+    success: true,
+    elements,
+    width: badgeWidth,
+    height: badgeHeight,
+  }
+}
+
+module.exports = createBadge

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

@@ -0,0 +1,88 @@
+/**
+ * 卡片组件
+ */
+
+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 {number} args.height - 卡片高度
+ * @param {string} args.background - 背景色
+ * @param {string} args.border - 边框颜色
+ * @param {number} args.borderWidth - 边框宽度
+ * @param {number} args.radius - 圆角半径
+ * @param {string} args.title - 标题文字
+ * @param {number} args.titleSize - 标题字体大小
+ * @param {string} args.titleColor - 标题颜色
+ * @param {string} args.subtitle - 副标题
+ * @param {number} args.subtitleSize - 副标题字体大小
+ * @param {string} args.subtitleColor - 副标题颜色
+ * @param {number} args.padding - 内边距
+ */
+function createCard(project, canvas, args) {
+  const {
+    x, y, width, height,
+    background, border, borderWidth, radius,
+    title, titleSize, titleColor,
+    subtitle, subtitleSize, subtitleColor,
+    padding = 20,
+  } = args
+
+  const elements = []
+
+  // 绘制卡片背景
+  const card = new paper.Path.Rectangle({
+    point: [x, y],
+    size: [width, height],
+    radius: radius || 0,
+  })
+
+  if (background) {
+    card.fillColor = new paper.Color(background)
+  } else {
+    card.fillColor = new paper.Color('#ffffff')
+  }
+
+  if (border) {
+    card.strokeColor = new paper.Color(border)
+    card.strokeWidth = borderWidth || 1
+  }
+
+  elements.push({ type: 'rectangle', id: card.id })
+
+  // 绘制标题
+  if (title) {
+    const titleText = new paper.PointText({
+      point: [x + padding, y + padding + (titleSize || 24)],
+      content: title,
+      fontSize: titleSize || 24,
+      fillColor: new paper.Color(titleColor || '#000000'),
+      justification: 'left',
+    })
+    elements.push({ type: 'text', id: titleText.id })
+  }
+
+  // 绘制副标题
+  if (subtitle) {
+    const titleHeight = title ? (titleSize || 24) + padding : padding
+    const subtitleText = new paper.PointText({
+      point: [x + padding, y + titleHeight + (subtitleSize || 16) + 10],
+      content: subtitle,
+      fontSize: subtitleSize || 16,
+      fillColor: new paper.Color(subtitleColor || '#666666'),
+      justification: 'left',
+    })
+    elements.push({ type: 'text', id: subtitleText.id })
+  }
+
+  return { success: true, elements }
+}
+
+module.exports = createCard

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

@@ -0,0 +1,127 @@
+/**
+ * 图表组件
+ */
+
+const paper = require('paper')
+
+/**
+ * 创建图表组件
+ */
+function createChart(project, canvas, params) {
+  const {
+    type = 'bar',
+    x,
+    y,
+    width,
+    height,
+    data = [],
+    barColor = '#3b82f6',
+    showLabels = true,
+    showValues = true,
+    barGap = 4
+  } = params
+
+  const elements = []
+
+  if (type === 'bar' && data.length > 0) {
+    const maxValue = Math.max(...data.map(d => d.value))
+    const barCount = data.length
+    const totalGap = barGap * (barCount - 1)
+    const barWidth = (width - totalGap) / barCount
+    const labelHeight = showLabels ? 24 : 0
+    const valueHeight = showValues ? 20 : 0
+    const chartHeight = height - labelHeight - valueHeight - 10
+
+    data.forEach((item, index) => {
+      const barHeight = (item.value / maxValue) * chartHeight
+      const barX = x + index * (barWidth + barGap)
+      const barY = y + height - labelHeight - valueHeight - barHeight - 5
+      const color = item.color || barColor
+
+      const bar = new paper.Path.Rectangle({
+        point: [barX, barY],
+        size: [barWidth, barHeight],
+        radius: [4, 4, 0, 0]
+      })
+      bar.fillColor = new paper.Color(color)
+      if (project && project.activeLayer) {
+        project.activeLayer.addChild(bar)
+      }
+      elements.push({ type: 'path', id: bar.id })
+
+      if (showValues) {
+        const valueText = new paper.PointText({
+          point: [barX + barWidth / 2, barY - 8],
+          content: String(item.value),
+          fontSize: 12,
+          fillColor: new paper.Color('#666666'),
+          justification: 'center'
+        })
+        if (project && project.activeLayer) {
+          project.activeLayer.addChild(valueText)
+        }
+        elements.push({ type: 'text', id: valueText.id })
+      }
+
+      if (showLabels) {
+        const labelText = new paper.PointText({
+          point: [barX + barWidth / 2, y + height - 8],
+          content: item.label || '',
+          fontSize: 11,
+          fillColor: new paper.Color('#333333'),
+          justification: 'center'
+        })
+        if (project && project.activeLayer) {
+          project.activeLayer.addChild(labelText)
+        }
+        elements.push({ type: 'text', id: labelText.id })
+      }
+    })
+  } else if (type === 'pie' && data.length > 0) {
+    const cx = x + width / 2
+    const cy = y + height / 2
+    const radius = Math.min(width, height) / 2 - 10
+    const total = data.reduce((sum, d) => sum + d.value, 0)
+    let currentAngle = -90
+    const colors = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#06b6d4', '#84cc16']
+
+    data.forEach((item, index) => {
+      const percentage = item.value / total
+      const endAngle = currentAngle + percentage * 360
+      const path = new paper.Path()
+      path.moveTo(cx, cy)
+      path.arc([cx, cy], radius, currentAngle * Math.PI / 180, endAngle * Math.PI / 180)
+      path.closePath()
+      path.fillColor = new paper.Color(item.color || colors[index % colors.length])
+      if (project && project.activeLayer) {
+        project.activeLayer.addChild(path)
+      }
+      elements.push({ type: 'path', id: path.id })
+
+      if (showLabels && percentage > 0.05) {
+        const midAngle = (currentAngle + endAngle) / 2
+        const midRad = midAngle * Math.PI / 180
+        const labelX = cx + radius * 0.7 * Math.cos(midRad)
+        const labelY = cy + radius * 0.7 * Math.sin(midRad)
+        const labelText = new paper.PointText({
+          point: [labelX, labelY + 4],
+          content: `${Math.round(percentage * 100)}%`,
+          fontSize: 11,
+          fillColor: new paper.Color('#ffffff'),
+          justification: 'center',
+          fontWeight: 'bold'
+        })
+        if (project && project.activeLayer) {
+          project.activeLayer.addChild(labelText)
+        }
+        elements.push({ type: 'text', id: labelText.id })
+      }
+
+      currentAngle = endAngle
+    })
+  }
+
+  return { success: true, elements, type: 'chart' }
+}
+
+module.exports = createChart

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

@@ -0,0 +1,88 @@
+/**
+ * Chip 标签组件
+ */
+
+const paper = require('paper')
+
+/**
+ * 创建 Chip 标签组件
+ */
+function createChip(project, canvas, params) {
+  const {
+    x,
+    y,
+    text,
+    background = '#e0e0e0',
+    color = '#333333',
+    borderColor,
+    fontSize = 12,
+    padding = 12,
+    radius = 16,
+    icon
+  } = params
+
+  const elements = []
+
+  // 计算尺寸
+  const textWidth = text.length * fontSize * 0.6
+  const iconWidth = icon ? fontSize : 0
+  const totalWidth = padding * 2 + textWidth + iconWidth + 4
+  const height = fontSize + padding * 2
+  const rectX = x - totalWidth / 2
+  const rectY = y - height / 2
+
+  // 绘制背景
+  const bg = new paper.Path.Rectangle({
+    point: [rectX, rectY],
+    size: [totalWidth, height],
+    radius: radius
+  })
+  bg.fillColor = new paper.Color(background)
+  if (borderColor) {
+    bg.strokeColor = new paper.Color(borderColor)
+    bg.strokeWidth = 1
+  }
+  if (project && project.activeLayer) {
+    project.activeLayer.addChild(bg)
+  }
+  elements.push({ type: 'path', id: bg.id })
+
+  // 绘制图标
+  if (icon) {
+    const iconText = new paper.PointText({
+      point: [rectX + padding + iconWidth / 2, y + fontSize / 3],
+      content: icon,
+      fontSize: fontSize + 2,
+      fillColor: new paper.Color(color),
+      justification: 'center'
+    })
+    if (project && project.activeLayer) {
+      project.activeLayer.addChild(iconText)
+    }
+    elements.push({ type: 'text', id: iconText.id })
+  }
+
+  // 绘制文字
+  const textX = icon ? rectX + padding + iconWidth + 4 + textWidth / 2 : x
+  const label = new paper.PointText({
+    point: [textX, y + fontSize / 3],
+    content: text,
+    fontSize: fontSize,
+    fillColor: new paper.Color(color),
+    justification: 'center'
+  })
+  if (project && project.activeLayer) {
+    project.activeLayer.addChild(label)
+  }
+  elements.push({ type: 'text', id: label.id })
+
+  return {
+    success: true,
+    elements,
+    width: totalWidth,
+    height,
+    type: 'chip'
+  }
+}
+
+module.exports = createChip

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

@@ -0,0 +1,107 @@
+/**
+ * 分栏布局组件
+ * 支持左右分栏、三栏、四栏等多种布局
+ */
+
+const createColumns = (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=2] - 列数
+   * @param {number} [params.gap=20] - 列间距
+   * @param {string} [params.background] - 背景色
+   * @param {string} [params.borderColor] - 边框颜色
+   * @param {number} [params.borderWidth] - 边框宽度
+   * @param {number} [params.radius=0] - 圆角
+   * @param {Array} [params.items] - 列内容配置 [{widthRatio, content}]
+   * @param {string} [params.direction='horizontal'] - 排列方向: horizontal, vertical
+   * @param {string} [params.align='top'] - 垂直对齐: top, center, bottom
+   */
+  draw({
+    x,
+    y,
+    width,
+    height,
+    columns = 2,
+    gap = 20,
+    background,
+    borderColor,
+    borderWidth = 1,
+    radius = 0,
+    items = [],
+    direction = 'horizontal',
+    align = 'top'
+  }) {
+    const elements = []
+    
+    // 计算每列宽度
+    const totalGap = gap * (columns - 1)
+    const columnWidth = (width - totalGap) / columns
+    
+    // 绘制背景
+    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 })
+    }
+    
+    // 生成分割线
+    for (let i = 1; i < columns; i++) {
+      const lineX = x + columnWidth * i + gap * (i - 1) + gap / 2
+      const line = new ctx.Path.Line({
+        from: [lineX, y + 20],
+        to: [lineX, y + height - 20]
+      })
+      line.strokeColor = new ctx.Color('#e0e0e0')
+      line.strokeWidth = 1
+      elements.push({ type: 'line', id: line.id })
+    }
+    
+    // 返回列位置信息
+    const columnPositions = []
+    for (let i = 0; i < columns; i++) {
+      const colX = x + (columnWidth + gap) * i
+      const colY = align === 'center' ? y + (height - height) / 2 : align === 'bottom' ? y + height - height : y
+      
+      columnPositions.push({
+        index: i,
+        x: colX,
+        y: colY,
+        width: columnWidth,
+        height: height
+      })
+    }
+    
+    return {
+      success: true,
+      elements,
+      columnPositions,
+      columnWidth,
+      totalWidth: width,
+      totalHeight: height,
+      type: 'columns'
+    }
+  }
+})
+
+module.exports = createColumns

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