foliko 1.0.87 → 1.1.0

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

@@ -0,0 +1,97 @@
+/**
+ * 引用块组件
+ */
+
+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.text - 引用文字
+ * @param {string} args.author - 作者
+ * @param {string} args.background - 背景色
+ * @param {string} args.borderColor - 左边框颜色
+ * @param {number} args.borderWidth - 左边框宽度
+ * @param {number} args.padding - 内边距
+ * @param {number} args.radius - 圆角半径
+ * @param {string} args.textColor - 文字颜色
+ * @param {string} args.authorColor - 作者颜色
+ * @param {number} args.fontSize - 字体大小
+ */
+function createQuote(project, canvas, args) {
+  const {
+    x, y,
+    width = 400,
+    text,
+    author,
+    background = '#f8fafc',
+    borderColor = '#6366f1',
+    borderWidth = 4,
+    padding = 20,
+    radius = 8,
+    textColor = '#1e293b',
+    authorColor = '#64748b',
+    fontSize = 18,
+  } = args
+
+  const elements = []
+
+  // 绘制背景
+  const bg = new paper.Path.Rectangle({
+    point: [x, y],
+    size: [width, author ? 80 + fontSize * 2 : 40 + fontSize * 1.5],
+    radius: radius,
+  })
+  bg.fillColor = new paper.Color(background)
+  elements.push({ type: 'rectangle', id: bg.id })
+
+  // 绘制左边框
+  const border = new paper.Path.Rectangle({
+    point: [x, y],
+    size: [borderWidth, author ? 80 + fontSize * 2 : 40 + fontSize * 1.5],
+  })
+  border.fillColor = new paper.Color(borderColor)
+  elements.push({ type: 'rectangle', id: border.id })
+
+  // 绘制引用符号
+  const quoteMark = new paper.PointText({
+    point: [x + padding + 10, y + padding + fontSize],
+    content: '"',
+    fontSize: fontSize * 2,
+    fillColor: new paper.Color(borderColor),
+    justification: 'left',
+  })
+  elements.push({ type: 'text', id: quoteMark.id })
+
+  // 绘制引用文字
+  const quoteText = new paper.PointText({
+    point: [x + padding + 30, y + padding + fontSize * 1.5],
+    content: text,
+    fontSize: fontSize,
+    fillColor: new paper.Color(textColor),
+    justification: 'left',
+  })
+  elements.push({ type: 'text', id: quoteText.id })
+
+  // 绘制作者
+  if (author) {
+    const authorText = new paper.PointText({
+      point: [x + padding, y + padding + fontSize * 2.5 + 10],
+      content: `— ${author}`,
+      fontSize: fontSize * 0.8,
+      fillColor: new paper.Color(authorColor),
+      justification: 'left',
+    })
+    elements.push({ type: 'text', id: authorText.id })
+  }
+
+  return { success: true, elements }
+}
+
+module.exports = createQuote

package/.agent/plugins/poster-plugin/src/components/rating.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.value - 评分值 0-5
+ * @param {number} args.max - 最大值，默认5
+ * @param {number} args.size - 星星大小
+ * @param {string} args.filledColor - 填充颜色
+ * @param {string} args.emptyColor - 空心颜色
+ * @param {number} args.gap - 星星间距
+ */
+function createRating(project, canvas, args) {
+  const {
+    x, y,
+    value = 4,
+    max = 5,
+    size = 24,
+    filledColor = '#fbbf24',
+    emptyColor = '#e5e7eb',
+    gap = 4,
+  } = args
+
+  const elements = []
+
+  for (let i = 0; i < max; i++) {
+    const starX = x + i * (size + gap)
+    const filled = i < Math.floor(value)
+    const partial = !filled && i < value
+
+    // 绘制星星（使用多边形）
+    const star = createStar(project, starX + size / 2, y + size / 2, size / 2, size / 4, 5)
+    star.fillColor = new paper.Color(partial ? filledColor : emptyColor)
+    star.opacity = partial ? value - Math.floor(value) : 1
+    elements.push({ type: 'polygon', id: star.id })
+
+    if (partial) {
+      // 半星效果用填充色覆盖一半
+      const halfStar = createStar(project, starX + size / 2, y + size / 2, size / 2, size / 4, 5)
+      const clipPath = new paper.Path.Rectangle({
+        point: [starX, y],
+        size: [size / 2, size],
+      })
+      halfStar.fillColor = new paper.Color(filledColor)
+      halfStar.opacity = 1
+      elements.push({ type: 'polygon', id: halfStar.id })
+    }
+  }
+
+  return {
+    success: true,
+    elements,
+    value,
+  }
+}
+
+/**
+ * 创建星星形状
+ */
+function createStar(project, cx, cy, outerRadius, innerRadius, points) {
+  const star = new paper.Path()
+  const step = Math.PI / points
+
+  for (let i = 0; i < 2 * points; i++) {
+    const radius = i % 2 === 0 ? outerRadius : innerRadius
+    const angle = i * step - Math.PI / 2
+    const x = cx + Math.cos(angle) * radius
+    const y = cy + Math.sin(angle) * radius
+    star.add(new paper.Point(x, y))
+  }
+
+  star.closed = true
+  return star
+}
+
+module.exports = createRating

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

@@ -0,0 +1,70 @@
+/**
+ * 星形组件 - 支持多角星形
+ */
+
+const paper = require('paper')
+
+/**
+ * 创建星形组件
+ * @param {Object} project - Paper.js 项目
+ * @param {Object} canvas - 画布对象
+ * @param {Object} params - 组件参数
+ */
+function createStar(project, canvas, params) {
+  const {
+    cx,
+    cy,
+    points = 5,
+    innerRadius: providedInnerRadius,
+    outerRadius,
+    fill,
+    stroke,
+    strokeWidth = 1,
+    opacity = 1,
+    rotation = 0
+  } = params
+
+  // 计算内半径
+  const innerRadius = providedInnerRadius || outerRadius * 0.4
+
+  // 创建星形路径
+  const path = new paper.Path()
+  const angleStep = Math.PI / points
+
+  for (let i = 0; i < points * 2; i++) {
+    const radius = i % 2 === 0 ? outerRadius : innerRadius
+    const angle = i * angleStep - Math.PI / 2 + (rotation * Math.PI / 180)
+    const x = cx + radius * Math.cos(angle)
+    const y = cy + radius * Math.sin(angle)
+
+    if (i === 0) {
+      path.moveTo(x, y)
+    } else {
+      path.lineTo(x, y)
+    }
+  }
+  path.closePath()
+
+  // 设置样式
+  if (fill) {
+    path.fillColor = new paper.Color(fill)
+  }
+  if (stroke) {
+    path.strokeColor = new paper.Color(stroke)
+    path.strokeWidth = strokeWidth
+  }
+  path.opacity = opacity
+
+  // 关键：将元素添加到活动层
+  if (project && project.activeLayer) {
+    project.activeLayer.addChild(path)
+  }
+
+  return {
+    success: true,
+    elements: [{ type: 'path', id: path.id }],
+    type: 'star'
+  }
+}
+
+module.exports = createStar

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