foliko 1.0.87 → 1.1.0

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

@@ -0,0 +1,161 @@
+/**
+ * 画布管理模块
+ */
+
+const paper = require('paper')
+const PRESETS = require('./presets')
+
+/**
+ * 画布管理器类
+ */
+class CanvasManager {
+  constructor() {
+    this._canvas = null
+    this._project = null
+    this._paper = null
+    this._width = 0
+    this._height = 0
+  }
+
+  /**
+   * 创建画布
+   */
+  create({ preset, width, height, background }) {
+    let w, h
+
+    if (preset) {
+      const presetConfig = PRESETS[preset]
+      if (!presetConfig) {
+        throw new Error(`Unknown preset: ${preset}. Available: ${Object.keys(PRESETS).join(', ')}`)
+      }
+      w = presetConfig.width
+      h = presetConfig.height
+    } else if (width && height) {
+      w = width
+      h = height
+    } else {
+      throw new Error('Must provide preset or width/height')
+    }
+
+    this._canvas = paper.createCanvas(w, h)
+    this._project = new paper.Project(this._canvas)
+    // 确保活动层存在
+    if (!paper.project || !paper.project.activeLayer) {
+      paper.setup(this._canvas)
+    }
+    this._paper = paper
+    this._width = w
+    this._height = h
+
+    // 添加背景
+    if (background) {
+      const bg = new paper.Path.Rectangle({
+        point: [0, 0],
+        size: [w, h],
+        fillColor: background,
+      })
+      bg.sendToBack()
+    }
+
+    return {
+      width: w,
+      height: h,
+      preset: preset || 'custom',
+      background: background || null,
+    }
+  }
+
+  /**
+   * 获取画布
+   */
+  getCanvas() {
+    return this._canvas
+  }
+
+  /**
+   * 获取 Paper.js 项目
+   */
+  getProject() {
+    return this._project
+  }
+
+  /**
+   * 获取画布尺寸
+   */
+  getSize() {
+    return { width: this._width, height: this._height }
+  }
+
+  /**
+   * 获取中心点
+   */
+  getCenter() {
+    return { x: this._width / 2, y: this._height / 2 }
+  }
+
+  /**
+   * 清除画布
+   */
+  clear() {
+    if (this._project) {
+      this._project.activeLayer.removeChildren()
+    }
+  }
+
+  /**
+   * 获取元素数量
+   */
+  getElementCount() {
+    return this._project ? this._project.activeLayer.children.length : 0
+  }
+
+  /**
+   * 导出为 Buffer
+   */
+  toBuffer(format = 'png', quality) {
+    if (!this._canvas) {
+      throw new Error('No canvas created')
+    }
+
+    this._project.view.update()
+    this._project.view.draw()
+
+    const mimeType = format === 'jpg' ? 'image/jpeg' : 'image/png'
+    return this._canvas.toBuffer(mimeType, quality)
+  }
+
+  /**
+   * 导出为 Base64
+   */
+  toBase64(format = 'png', quality) {
+    if (!this._canvas) {
+      throw new Error('No canvas created')
+    }
+
+    this._project.view.update()
+    this._project.view.draw()
+
+    const mimeType = format === 'jpg' ? 'image/jpeg' : 'image/png'
+    return this._canvas.toDataURL(mimeType, quality)
+  }
+
+  /**
+   * 检查画布是否已创建
+   */
+  isCreated() {
+    return this._canvas !== null
+  }
+
+  /**
+   * 重置画布
+   */
+  reset() {
+    this._canvas = null
+    this._project = null
+    this._paper = null
+    this._width = 0
+    this._height = 0
+  }
+}
+
+module.exports = CanvasManager

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