foliko 1.0.86 → 1.1.0

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

@@ -0,0 +1,105 @@
+/**
+ * 统计卡片组件
+ */
+
+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.label - 标签
+ * @param {string} args.value - 数值
+ * @param {string} args.change - 变化值（如 "+12.5%"）
+ * @param {boolean} args.positive - 变化是否为正
+ * @param {string} args.icon - 图标
+ * @param {string} args.iconColor - 图标颜色
+ * @param {string} args.background - 背景色
+ * @param {string} args.border - 边框颜色
+ * @param {number} args.radius - 圆角半径
+ */
+function createStatCard(project, canvas, args) {
+  const {
+    x, y,
+    width = 200,
+    height = 120,
+    label = 'Total Users',
+    value = '10,000',
+    change,
+    positive = true,
+    icon,
+    iconColor = '#6366f1',
+    background = '#ffffff',
+    border = '#e5e7eb',
+    radius = 12,
+  } = args
+
+  const elements = []
+
+  // 绘制背景
+  const bg = new paper.Path.Rectangle({
+    point: [x, y],
+    size: [width, height],
+    radius: radius,
+  })
+  bg.fillColor = new paper.Color(background)
+  bg.strokeColor = new paper.Color(border)
+  bg.strokeWidth = 1
+  elements.push({ type: 'rectangle', id: bg.id })
+
+  // 绘制图标
+  if (icon) {
+    const iconText = new paper.PointText({
+      point: [x + 20, y + 35],
+      content: icon,
+      fontSize: 24,
+      fillColor: new paper.Color(iconColor),
+      justification: 'left',
+    })
+    elements.push({ type: 'text', id: iconText.id })
+  }
+
+  // 绘制标签
+  const labelText = new paper.PointText({
+    point: [x + 20, y + 50 + (icon ? 10 : 0)],
+    content: label,
+    fontSize: 14,
+    fillColor: new paper.Color('#64748b'),
+    justification: 'left',
+  })
+  elements.push({ type: 'text', id: labelText.id })
+
+  // 绘制数值
+  const valueText = new paper.PointText({
+    point: [x + 20, y + 75 + (icon ? 10 : 0)],
+    content: value,
+    fontSize: 28,
+    fillColor: new paper.Color('#1e293b'),
+    justification: 'left',
+  })
+  elements.push({ type: 'text', id: valueText.id })
+
+  // 绘制变化值
+  if (change) {
+    const changeColor = positive ? '#22c55e' : '#ef4444'
+    const changeIcon = positive ? '↑' : '↓'
+    const changeText = new paper.PointText({
+      point: [x + 20, y + 95 + (icon ? 10 : 0)],
+      content: `${changeIcon} ${change}`,
+      fontSize: 14,
+      fillColor: new paper.Color(changeColor),
+      justification: 'left',
+    })
+    elements.push({ type: 'text', id: changeText.id })
+  }
+
+  return { success: true, elements }
+}
+
+module.exports = createStatCard

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

@@ -0,0 +1,118 @@
+/**
+ * 步骤指示器组件
+ */
+
+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 {Array} args.steps - 步骤数组 [{title, description}]
+ * @param {number} args.currentStep - 当前步骤（从0开始）
+ * @param {string} args.activeColor - 激活颜色
+ * @param {string} args.inactiveColor - 未激活颜色
+ * @param {string} args.completedColor - 已完成颜色
+ * @param {number} args.circleSize - 圆圈大小
+ */
+function createStepper(project, canvas, args) {
+  const {
+    x, y,
+    width = 600,
+    steps = [],
+    currentStep = 0,
+    activeColor = '#6366f1',
+    inactiveColor = '#e5e7eb',
+    completedColor = '#22c55e',
+    circleSize = 40,
+  } = args
+
+  const elements = []
+  const stepWidth = steps.length > 1 ? width / (steps.length - 1) : width
+  const lineY = y + circleSize / 2
+
+  // 绘制连接线
+  if (steps.length > 1) {
+    const line = new paper.Path.Line({
+      from: [x + circleSize / 2, lineY],
+      to: [x + width - circleSize / 2, lineY],
+      strokeColor: new paper.Color(inactiveColor),
+      strokeWidth: 2,
+    })
+    elements.push({ type: 'line', id: line.id })
+
+    // 绘制已完成部分的覆盖线
+    if (currentStep > 0) {
+      const completedLine = new paper.Path.Line({
+        from: [x + circleSize / 2, lineY],
+        to: [x + circleSize / 2 + (currentStep) * stepWidth, lineY],
+        strokeColor: new paper.Color(completedColor),
+        strokeWidth: 2,
+      })
+      elements.push({ type: 'line', id: completedLine.id })
+    }
+  }
+
+  // 绘制每个步骤
+  for (let i = 0; i < steps.length; i++) {
+    const stepX = steps.length > 1 ? x + i * stepWidth : x
+    const step = steps[i]
+    let color = inactiveColor
+
+    if (i < currentStep) {
+      color = completedColor
+    } else if (i === currentStep) {
+      color = activeColor
+    }
+
+    // 绘制圆圈
+    const circle = new paper.Path.Circle({
+      center: [stepX + circleSize / 2, lineY],
+      radius: circleSize / 2,
+    })
+    circle.fillColor = new paper.Color(color)
+    elements.push({ type: 'circle', id: circle.id })
+
+    // 绘制步骤编号或勾选
+    const icon = i < currentStep ? '✓' : String(i + 1)
+    const iconText = new paper.PointText({
+      point: [stepX + circleSize / 2, lineY + circleSize / 6],
+      content: icon,
+      fontSize: 16,
+      fillColor: new paper.Color('#ffffff'),
+      justification: 'center',
+    })
+    elements.push({ type: 'text', id: iconText.id })
+
+    // 绘制标题
+    const titleText = new paper.PointText({
+      point: [stepX + circleSize / 2, y + circleSize + 20],
+      content: step.title || `Step ${i + 1}`,
+      fontSize: 14,
+      fillColor: new paper.Color(i <= currentStep ? '#1e293b' : '#94a3b8'),
+      justification: 'center',
+    })
+    elements.push({ type: 'text', id: titleText.id })
+
+    // 绘制描述
+    if (step.description) {
+      const descText = new paper.PointText({
+        point: [stepX + circleSize / 2, y + circleSize + 38],
+        content: step.description,
+        fontSize: 11,
+        fillColor: new paper.Color('#94a3b8'),
+        justification: 'center',
+      })
+      elements.push({ type: 'text', id: descText.id })
+    }
+  }
+
+  return { success: true, elements }
+}
+
+module.exports = createStepper

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

@@ -0,0 +1,159 @@
+/**
+ * 表格组件
+ */
+
+const paper = require('paper')
+
+/**
+ * 创建表格组件
+ */
+function createTable(project, canvas, params) {
+  const {
+    x,
+    y,
+    width,
+    columns = [],
+    rows = [],
+    rowHeight = 36,
+    headerBg = '#f0f0f0',
+    headerColor = '#333333',
+    borderColor = '#e0e0e0',
+    cellColor = '#333333',
+    fontSize = 12,
+    headerFontSize = 13,
+    striped = true,
+    stripeColor = '#fafafa'
+  } = params
+
+  const elements = []
+
+  if (columns.length === 0) {
+    return { success: true, elements, type: 'table' }
+  }
+
+  const totalHeight = rowHeight * (rows.length + 1)
+
+  // 绘制外边框
+  const outerBorder = new paper.Path.Rectangle({
+    point: [x, y],
+    size: [width, totalHeight]
+  })
+  outerBorder.fillColor = new paper.Color('transparent')
+  outerBorder.strokeColor = new paper.Color(borderColor)
+  outerBorder.strokeWidth = 1
+  if (project && project.activeLayer) {
+    project.activeLayer.addChild(outerBorder)
+  }
+  elements.push({ type: 'path', id: outerBorder.id })
+
+  // 绘制表头背景
+  const headerBgRect = new paper.Path.Rectangle({
+    point: [x, y],
+    size: [width, rowHeight]
+  })
+  headerBgRect.fillColor = new paper.Color(headerBg)
+  headerBgRect.strokeColor = new paper.Color(borderColor)
+  headerBgRect.strokeWidth = 0.5
+  if (project && project.activeLayer) {
+    project.activeLayer.addChild(headerBgRect)
+  }
+  elements.push({ type: 'path', id: headerBgRect.id })
+
+  // 绘制表头
+  let currentX = x
+  columns.forEach((col, index) => {
+    const colWidth = col.width || (width / columns.length)
+
+    // 列分隔线
+    if (index > 0) {
+      const line = new paper.Path.Line({
+        from: [currentX, y],
+        to: [currentX, y + totalHeight]
+      })
+      line.strokeColor = new paper.Color(borderColor)
+      line.strokeWidth = 0.5
+      if (project && project.activeLayer) {
+        project.activeLayer.addChild(line)
+      }
+      elements.push({ type: 'line', id: line.id })
+    }
+
+    // 表头文字
+    const headerText = new paper.PointText({
+      point: [currentX + colWidth / 2, y + rowHeight / 2 + fontSize / 3],
+      content: col.title || '',
+      fontSize: headerFontSize,
+      fillColor: new paper.Color(headerColor),
+      justification: col.align || 'center',
+      fontWeight: 'bold'
+    })
+    if (project && project.activeLayer) {
+      project.activeLayer.addChild(headerText)
+    }
+    elements.push({ type: 'text', id: headerText.id })
+
+    currentX += colWidth
+  })
+
+  // 绘制数据行
+  rows.forEach((row, rowIndex) => {
+    const rowY = y + rowHeight * (rowIndex + 1)
+
+    // 斑马纹背景
+    if (striped && rowIndex % 2 === 1) {
+      const stripeBg = new paper.Path.Rectangle({
+        point: [x, rowY],
+        size: [width, rowHeight]
+      })
+      stripeBg.fillColor = new paper.Color(stripeColor)
+      stripeBg.strokeColor = new paper.Color(borderColor)
+      stripeBg.strokeWidth = 0.5
+      if (project && project.activeLayer) {
+        project.activeLayer.addChild(stripeBg)
+      }
+      elements.push({ type: 'path', id: stripeBg.id })
+    }
+
+    // 行分隔线
+    const rowLine = new paper.Path.Line({
+      from: [x, rowY],
+      to: [x + width, rowY]
+    })
+    rowLine.strokeColor = new paper.Color(borderColor)
+    rowLine.strokeWidth = 0.5
+    if (project && project.activeLayer) {
+      project.activeLayer.addChild(rowLine)
+    }
+    elements.push({ type: 'line', id: rowLine.id })
+
+    // 单元格
+    let cellX = x
+    columns.forEach((col, colIndex) => {
+      const colWidth = col.width || (width / columns.length)
+      const cellValue = row[colIndex] || ''
+      const cellText = new paper.PointText({
+        point: [cellX + colWidth / 2, rowY + rowHeight / 2 + fontSize / 3],
+        content: String(cellValue),
+        fontSize: fontSize,
+        fillColor: new paper.Color(cellColor),
+        justification: col.align || 'center'
+      })
+      if (project && project.activeLayer) {
+        project.activeLayer.addChild(cellText)
+      }
+      elements.push({ type: 'text', id: cellText.id })
+
+      cellX += colWidth
+    })
+  })
+
+  return {
+    success: true,
+    elements,
+    width,
+    height: totalHeight,
+    type: 'table'
+  }
+}
+
+module.exports = createTable

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

@@ -0,0 +1,78 @@
+/**
+ * 标签云组件
+ */
+
+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 {Array} args.tags - 标签数组 [{text, color, bgColor}]
+ * @param {number} args.fontSize - 字体大小
+ * @param {number} args.padding - 标签内边距
+ * @param {number} args.gap - 标签间距
+ * @param {number} args.maxWidth - 最大宽度（自动换行）
+ */
+function createTagCloud(project, canvas, args) {
+  const {
+    x, y,
+    tags = [],
+    fontSize = 14,
+    padding = 12,
+    gap = 10,
+    maxWidth = 400,
+  } = args
+
+  const elements = []
+  let currentX = x
+  let currentY = y
+  let rowHeight = 0
+
+  for (const tag of tags) {
+    const textWidth = tag.text.length * fontSize * 0.6
+    const tagWidth = textWidth + padding * 2
+    const tagHeight = fontSize + padding * 2
+
+    // 换行处理
+    if (currentX + tagWidth > x + maxWidth && currentX > x) {
+      currentX = x
+      currentY += rowHeight + gap
+      rowHeight = 0
+    }
+
+    // 绘制标签背景
+    const tagBg = new paper.Path.Rectangle({
+      point: [currentX, currentY],
+      size: [tagWidth, tagHeight],
+      radius: tagHeight / 2,
+    })
+    tagBg.fillColor = new paper.Color(tag.bgColor || '#e0e7ff')
+    elements.push({ type: 'rectangle', id: tagBg.id })
+
+    // 绘制标签文字
+    const tagText = new paper.PointText({
+      point: [currentX + tagWidth / 2, currentY + tagHeight / 2 + fontSize / 3],
+      content: tag.text,
+      fontSize: fontSize,
+      fillColor: new paper.Color(tag.color || '#4338ca'),
+      justification: 'center',
+    })
+    elements.push({ type: 'text', id: tagText.id })
+
+    currentX += tagWidth + gap
+    rowHeight = Math.max(rowHeight, tagHeight)
+  }
+
+  return {
+    success: true,
+    elements,
+    height: rowHeight,
+  }
+}
+
+module.exports = createTagCloud

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

@@ -0,0 +1,105 @@
+/**
+ * 时间线组件
+ */
+
+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 {Array} args.items - 时间线项目 [{date, title, description}]
+ * @param {string} args.lineColor - 线条颜色
+ * @param {string} args.dotColor - 点颜色
+ * @param {string} args.activeColor - 激活颜色
+ * @param {number} args.dotSize - 点大小
+ */
+function createTimeline(project, canvas, args) {
+  const {
+    x, y,
+    width = 500,
+    items = [],
+    lineColor = '#e2e8f0',
+    dotColor = '#6366f1',
+    activeColor = '#22c55e',
+    dotSize = 16,
+    gap = 60,
+  } = args
+
+  const elements = []
+  const centerX = x + 80
+  const contentX = x + 120
+
+  // 绘制主线
+  if (items.length > 1) {
+    const mainLine = new paper.Path.Line({
+      from: [centerX, y + dotSize / 2],
+      to: [centerX, y + (items.length - 1) * gap + dotSize / 2],
+      strokeColor: new paper.Color(lineColor),
+      strokeWidth: 2,
+    })
+    elements.push({ type: 'line', id: mainLine.id })
+  }
+
+  // 绘制每个项目
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i]
+    const itemY = y + i * gap
+    const isActive = item.active !== false
+
+    // 绘制时间线点
+    const dot = new paper.Path.Circle({
+      center: [centerX, itemY + dotSize / 2],
+      radius: dotSize / 2,
+    })
+    dot.fillColor = new paper.Color(isActive ? dotColor : lineColor)
+    elements.push({ type: 'circle', id: dot.id })
+
+    // 绘制日期
+    if (item.date) {
+      const dateText = new paper.PointText({
+        point: [x + 10, itemY + dotSize / 2 + 5],
+        content: item.date,
+        fontSize: 12,
+        fillColor: new paper.Color('#94a3b8'),
+        justification: 'left',
+      })
+      elements.push({ type: 'text', id: dateText.id })
+    }
+
+    // 绘制标题
+    const titleText = new paper.PointText({
+      point: [contentX, itemY + dotSize / 2 + 5],
+      content: item.title || `Event ${i + 1}`,
+      fontSize: 16,
+      fillColor: new paper.Color(isActive ? '#1e293b' : '#94a3b8'),
+      justification: 'left',
+    })
+    elements.push({ type: 'text', id: titleText.id })
+
+    // 绘制描述
+    if (item.description) {
+      const descText = new paper.PointText({
+        point: [contentX, itemY + dotSize / 2 + 28],
+        content: item.description,
+        fontSize: 13,
+        fillColor: new paper.Color('#64748b'),
+        justification: 'left',
+      })
+      elements.push({ type: 'text', id: descText.id })
+    }
+  }
+
+  return {
+    success: true,
+    elements,
+    height: items.length * gap,
+  }
+}
+
+module.exports = createTimeline

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

@@ -0,0 +1,52 @@
+/**
+ * 水印组件
+ */
+
+const paper = require('paper')
+
+/**
+ * 创建水印组件
+ */
+function createWatermark(project, canvas, params) {
+  const {
+    text,
+    cx,
+    cy,
+    color = 'rgba(0,0,0,0.1)',
+    fontSize = 48,
+    fontFamily = 'sans-serif',
+    opacity = 0.1,
+    rotation = 0,
+    align = 'center'
+  } = params
+
+  const elements = []
+
+  const label = new paper.PointText({
+    point: [cx, cy],
+    content: text,
+    fontSize: fontSize,
+    fontFamily: fontFamily,
+    fillColor: new paper.Color(color),
+    justification: align,
+    opacity: opacity
+  })
+
+  // 应用旋转
+  if (rotation !== 0) {
+    label.rotate(rotation, new paper.Point(cx, cy))
+  }
+
+  if (project && project.activeLayer) {
+    project.activeLayer.addChild(label)
+  }
+  elements.push({ type: 'text', id: label.id })
+
+  return {
+    success: true,
+    elements,
+    type: 'watermark'
+  }
+}
+
+module.exports = createWatermark