foliko 1.0.87 → 1.1.0

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

package/.agent/plugins/poster-plugin/src/components/feature.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.width - 总宽度
+ * @param {string} args.icon - 图标（emoji）
+ * @param {string} args.title - 标题
+ * @param {string} args.description - 描述
+ * @param {string} args.iconColor - 图标颜色
+ * @param {string} args.titleColor - 标题颜色
+ * @param {string} args.descColor - 描述颜色
+ * @param {number} args.iconSize - 图标大小
+ * @param {number} args.titleSize - 标题大小
+ * @param {number} args.descSize - 描述大小
+ */
+function createFeature(project, canvas, args) {
+  const {
+    x, y, width,
+    icon,
+    title,
+    description,
+    iconColor = '#007bff',
+    titleColor = '#ffffff',
+    descColor = '#aaaaaa',
+    iconSize = 32,
+    titleSize = 20,
+    descSize = 14,
+  } = args
+
+  const elements = []
+  const padding = 15
+  let currentY = y
+
+  // 绘制图标
+  if (icon) {
+    const iconText = new paper.PointText({
+      point: [x + padding, currentY + iconSize],
+      content: icon,
+      fontSize: iconSize,
+      fillColor: new paper.Color(iconColor),
+      justification: 'left',
+    })
+    elements.push({ type: 'text', id: iconText.id })
+  }
+
+  // 绘制标题
+  if (title) {
+    currentY += icon ? iconSize + 5 : 0
+    const titleText = new paper.PointText({
+      point: [x + padding, currentY + titleSize],
+      content: title,
+      fontSize: titleSize,
+      fillColor: new paper.Color(titleColor),
+      justification: 'left',
+    })
+    elements.push({ type: 'text', id: titleText.id })
+  }
+
+  // 绘制描述
+  if (description) {
+    currentY += title ? titleSize + 5 : 0
+    const descText = new paper.PointText({
+      point: [x + padding, currentY + descSize],
+      content: description,
+      fontSize: descSize,
+      fillColor: new paper.Color(descColor),
+      justification: 'left',
+    })
+    elements.push({ type: 'text', id: descText.id })
+  }
+
+  return { success: true, elements }
+}
+
+module.exports = createFeature

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

@@ -0,0 +1,112 @@
+/**
+ * 特性网格组件
+ */
+
+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.columns - 列数
+ * @param {number} args.itemWidth - 每个特性宽度
+ * @param {number} args.itemHeight - 每个特性高度
+ * @param {number} args.gap - 间距
+ * @param {Array} args.items - 特性数组 [{icon, title, description}]
+ * @param {string} args.background - 背景色
+ * @param {string} args.borderColor - 边框颜色
+ * @param {number} args.radius - 圆角半径
+ */
+function createFeatureGrid(project, canvas, args) {
+  const {
+    x, y,
+    columns = 3,
+    itemWidth = 200,
+    itemHeight = 120,
+    gap = 20,
+    items = [],
+    background = '#1a1a2e',
+    borderColor = '#00d9ff',
+    radius = 8,
+  } = args
+
+  const elements = []
+  const rows = Math.ceil(items.length / columns)
+
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i]
+    const col = i % columns
+    const row = Math.floor(i / columns)
+
+    const itemX = x + col * (itemWidth + gap)
+    const itemY = y + row * (itemHeight + gap)
+
+    // 绘制每个特性的背景
+    const bg = new paper.Path.Rectangle({
+      point: [itemX, itemY],
+      size: [itemWidth, itemHeight],
+      radius: radius,
+    })
+    bg.fillColor = new paper.Color(background)
+    bg.strokeColor = new paper.Color(borderColor)
+    bg.strokeWidth = 0.5
+    bg.opacity = 0.8
+    elements.push({ type: 'rectangle', id: bg.id })
+
+    const padding = 15
+    let itemYOffset = itemY + padding
+
+    // 绘制图标
+    if (item.icon) {
+      const iconText = new paper.PointText({
+        point: [itemX + padding, itemYOffset + 24],
+        content: item.icon,
+        fontSize: 28,
+        fillColor: new paper.Color(item.iconColor || '#00ff88'),
+        justification: 'left',
+      })
+      elements.push({ type: 'text', id: iconText.id })
+      itemYOffset += 35
+    }
+
+    // 绘制标题
+    if (item.title) {
+      const titleText = new paper.PointText({
+        point: [itemX + padding, itemYOffset + 18],
+        content: item.title,
+        fontSize: 16,
+        fillColor: new paper.Color(item.titleColor || '#ffffff'),
+        justification: 'left',
+      })
+      elements.push({ type: 'text', id: titleText.id })
+      itemYOffset += 22
+    }
+
+    // 绘制描述
+    if (item.description) {
+      const descText = new paper.PointText({
+        point: [itemX + padding, itemYOffset + 14],
+        content: item.description,
+        fontSize: 12,
+        fillColor: new paper.Color(item.descColor || '#888888'),
+        justification: 'left',
+      })
+      elements.push({ type: 'text', id: descText.id })
+    }
+  }
+
+  return {
+    success: true,
+    elements,
+    width: columns * itemWidth + (columns - 1) * gap,
+    height: rows * itemHeight + (rows - 1) * gap,
+    rows,
+    cols: columns,
+  }
+}
+
+module.exports = createFeatureGrid

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

@@ -0,0 +1,118 @@
+/**
+ * 网格布局组件
+ * 支持任意行列的网格布局
+ */
+
+const createGrid = (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=3] - 列数
+   * @param {number} [params.rows=2] - 行数
+   * @param {number} [params.gapX=20] - 水平间距
+   * @param {number} [params.gapY=20] - 垂直间距
+   * @param {string} [params.background] - 背景色
+   * @param {string} [params.borderColor] - 边框颜色
+   * @param {number} [params.borderWidth] - 边框宽度
+   * @param {number} [params.radius=0] - 圆角
+   * @param {string} [params.direction='row'] - 排列方向: row(行优先), column(列优先)
+   */
+  draw({
+    x,
+    y,
+    width,
+    height,
+    columns = 3,
+    rows = 2,
+    gapX = 20,
+    gapY = 20,
+    background,
+    borderColor,
+    borderWidth = 1,
+    radius = 0,
+    direction = 'row'
+  }) {
+    const elements = []
+    
+    // 计算单元格尺寸
+    const totalGapX = gapX * (columns - 1)
+    const totalGapY = gapY * (rows - 1)
+    const cellWidth = (width - totalGapX) / columns
+    const cellHeight = (height - totalGapY) / rows
+    
+    // 绘制背景
+    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 })
+    }
+    
+    // 生成网格位置信息
+    const cellPositions = []
+    const totalCells = columns * rows
+    
+    for (let i = 0; i < totalCells; i++) {
+      let col, row
+      
+      if (direction === 'row') {
+        col = i % columns
+        row = Math.floor(i / columns)
+      } else {
+        row = i % rows
+        col = Math.floor(i / rows)
+      }
+      
+      const cellX = x + col * (cellWidth + gapX)
+      const cellY = y + row * (cellHeight + gapY)
+      
+      cellPositions.push({
+        index: i,
+        column: col,
+        row: row,
+        x: cellX,
+        y: cellY,
+        width: cellWidth,
+        height: cellHeight,
+        centerX: cellX + cellWidth / 2,
+        centerY: cellY + cellHeight / 2
+      })
+    }
+    
+    // 返回网格布局信息
+    return {
+      success: true,
+      elements,
+      cellPositions,
+      cellWidth,
+      cellHeight,
+      columns,
+      rows,
+      totalCells,
+      totalWidth: width,
+      totalHeight: height,
+      type: 'grid'
+    }
+  }
+})
+
+module.exports = createGrid