foliko 1.0.86 → 1.1.0

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

@@ -0,0 +1,84 @@
+/**
+ * 箭头组件
+ */
+
+const paper = require('paper')
+
+/**
+ * 创建箭头组件
+ */
+function createArrow(project, canvas, params) {
+  const {
+    x1, y1, x2, y2,
+    color = '#333333',
+    strokeWidth = 2,
+    headSize = 12,
+    style = 'solid',
+    direction = 'end'
+  } = params
+
+  const elements = []
+
+  // 创建主线
+  const line = new paper.Path.Line({
+    from: [x1, y1],
+    to: [x2, y2]
+  })
+  line.strokeColor = new paper.Color(color)
+  line.strokeWidth = strokeWidth
+  if (style === 'dashed') {
+    line.dashArray = [10, 5]
+  }
+  
+  if (project && project.activeLayer) {
+    project.activeLayer.addChild(line)
+  }
+  elements.push({ type: 'line', id: line.id })
+
+  // 创建箭头头部
+  function createArrowHead(x, y, angle) {
+    const path = new paper.Path()
+    const angle1 = angle + Math.PI * 0.8
+    const angle2 = angle - Math.PI * 0.8
+
+    path.moveTo(x, y)
+    path.lineTo(
+      x + headSize * Math.cos(angle1),
+      y + headSize * Math.sin(angle1)
+    )
+    path.moveTo(x, y)
+    path.lineTo(
+      x + headSize * Math.cos(angle2),
+      y + headSize * Math.sin(angle2)
+    )
+
+    path.strokeColor = new paper.Color(color)
+    path.strokeWidth = strokeWidth
+    path.strokeCap = 'round'
+
+    if (project && project.activeLayer) {
+      project.activeLayer.addChild(path)
+    }
+    return path
+  }
+
+  const angle = Math.atan2(y2 - y1, x2 - x1)
+
+  if (direction === 'end' || direction === 'both') {
+    const head = createArrowHead(x2, y2, angle)
+    elements.push({ type: 'path', id: head.id })
+  }
+
+  if (direction === 'start' || direction === 'both') {
+    const head = createArrowHead(x1, y1, angle + Math.PI)
+    elements.push({ type: 'path', id: head.id })
+  }
+
+  return {
+    success: true,
+    elements,
+    type: 'arrow'
+  }
+}
+
+module.exports = createArrow

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

@@ -0,0 +1,71 @@
+/**
+ * 头像组件
+ */
+
+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.size - 头像大小
+ * @param {string} args.src - 图片路径（可选，不提供则显示首字母）
+ * @param {string} args.initials - 首字母（无图片时显示）
+ * @param {string} args.background - 背景色
+ * @param {string} args.border - 边框颜色
+ * @param {number} args.borderWidth - 边框宽度
+ * @param {string} args.color - 文字颜色
+ */
+function createAvatar(project, canvas, args) {
+  const {
+    x, y,
+    size = 80,
+    src,
+    initials,
+    background = '#6366f1',
+    border,
+    borderWidth = 0,
+    color = '#ffffff',
+  } = args
+
+  const elements = []
+  const radius = size / 2
+
+  // 绘制圆形背景
+  const circle = new paper.Path.Circle({
+    center: [x, y],
+    radius: radius,
+  })
+  circle.fillColor = new paper.Color(background)
+
+  if (border) {
+    circle.strokeColor = new paper.Color(border)
+    circle.strokeWidth = borderWidth
+  }
+
+  elements.push({ type: 'circle', id: circle.id })
+
+  // 如果没有图片，显示首字母
+  if (!src && initials) {
+    const text = new paper.PointText({
+      point: [x, y + size / 6],
+      content: initials.charAt(0).toUpperCase(),
+      fontSize: size * 0.4,
+      fillColor: new paper.Color(color),
+      justification: 'center',
+    })
+    elements.push({ type: 'text', id: text.id })
+  }
+
+  return {
+    success: true,
+    elements,
+    size,
+  }
+}
+
+module.exports = createAvatar

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