foliko 1.0.87 → 1.1.1

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

@@ -0,0 +1,123 @@
+/**
+ * 通知/提示组件
+ */
+
+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.type - 类型: success, warning, error, info
+ * @param {string} args.title - 标题
+ * @param {string} args.message - 消息内容
+ * @param {boolean} args.showIcon - 是否显示图标
+ * @param {number} args.radius - 圆角半径
+ */
+function createNotification(project, canvas, args) {
+  const {
+    x, y,
+    width = 360,
+    type = 'info',
+    title,
+    message,
+    showIcon = true,
+    radius = 12,
+  } = args
+
+  // 类型配置
+  const config = {
+    success: {
+      icon: '✓',
+      bgColor: '#dcfce7',
+      iconColor: '#22c55e',
+      borderColor: '#22c55e',
+    },
+    warning: {
+      icon: '⚠',
+      bgColor: '#fef9c3',
+      iconColor: '#eab308',
+      borderColor: '#eab308',
+    },
+    error: {
+      icon: '✕',
+      bgColor: '#fee2e2',
+      iconColor: '#ef4444',
+      borderColor: '#ef4444',
+    },
+    info: {
+      icon: 'ℹ',
+      bgColor: '#dbeafe',
+      iconColor: '#3b82f6',
+      borderColor: '#3b82f6',
+    },
+  }
+
+  const c = config[type] || config.info
+  const padding = 16
+  const lineHeight = 22
+  const iconSize = 24
+  const height = padding * 2 + (title ? lineHeight + 8 : 0) + (message ? lineHeight : 0)
+
+  const elements = []
+
+  // 绘制背景
+  const bg = new paper.Path.Rectangle({
+    point: [x, y],
+    size: [width, height],
+    radius: radius,
+  })
+  bg.fillColor = new paper.Color(c.bgColor)
+  bg.strokeColor = new paper.Color(c.borderColor)
+  bg.strokeWidth = 1
+  elements.push({ type: 'rectangle', id: bg.id })
+
+  // 绘制图标
+  if (showIcon) {
+    const iconText = new paper.PointText({
+      point: [x + padding + iconSize / 2, y + padding + iconSize / 2 + 6],
+      content: c.icon,
+      fontSize: iconSize,
+      fillColor: new paper.Color(c.iconColor),
+      justification: 'center',
+    })
+    elements.push({ type: 'text', id: iconText.id })
+  }
+
+  const textX = showIcon ? x + padding + iconSize + 12 : x + padding
+  let currentY = y + padding
+
+  // 绘制标题
+  if (title) {
+    const titleText = new paper.PointText({
+      point: [textX, currentY + 18],
+      content: title,
+      fontSize: 16,
+      fillColor: new paper.Color('#1e293b'),
+      justification: 'left',
+    })
+    elements.push({ type: 'text', id: titleText.id })
+    currentY += lineHeight + 8
+  }
+
+  // 绘制消息
+  if (message) {
+    const msgText = new paper.PointText({
+      point: [textX, currentY + 16],
+      content: message,
+      fontSize: 14,
+      fillColor: new paper.Color('#475569'),
+      justification: 'left',
+    })
+    elements.push({ type: 'text', id: msgText.id })
+  }
+
+  return { success: true, elements }
+}
+
+module.exports = createNotification

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

@@ -0,0 +1,79 @@
+/**
+ * 进度条组件
+ */
+
+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 {number} args.value - 进度值 0-100
+ * @param {string} args.trackColor - 轨道颜色
+ * @param {string} args.fillColor - 填充颜色
+ * @param {number} args.radius - 圆角半径
+ * @param {boolean} args.showLabel - 是否显示标签
+ * @param {string} args.label - 标签文字
+ */
+function createProgress(project, canvas, args) {
+  const {
+    x, y,
+    width = 300,
+    height = 20,
+    value = 50,
+    trackColor = '#e0e0e0',
+    fillColor = '#6366f1',
+    radius = 10,
+    showLabel = false,
+    label,
+  } = args
+
+  const elements = []
+
+  // 绘制轨道
+  const track = new paper.Path.Rectangle({
+    point: [x, y],
+    size: [width, height],
+    radius: radius,
+  })
+  track.fillColor = new paper.Color(trackColor)
+  elements.push({ type: 'rectangle', id: track.id })
+
+  // 绘制进度
+  const progressWidth = (value / 100) * width
+  if (progressWidth > 0) {
+    const fill = new paper.Path.Rectangle({
+      point: [x, y],
+      size: [progressWidth, height],
+      radius: radius,
+    })
+    fill.fillColor = new paper.Color(fillColor)
+    elements.push({ type: 'rectangle', id: fill.id })
+  }
+
+  // 显示标签
+  if (showLabel && label) {
+    const labelText = new paper.PointText({
+      point: [x + width / 2, y - 8],
+      content: label,
+      fontSize: 14,
+      fillColor: new paper.Color('#666666'),
+      justification: 'center',
+    })
+    elements.push({ type: 'text', id: labelText.id })
+  }
+
+  return {
+    success: true,
+    elements,
+    value,
+  }
+}
+
+module.exports = createProgress

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

@@ -0,0 +1,117 @@
+/**
+ * 环形进度条组件
+ */
+
+const paper = require('paper')
+
+/**
+ * 创建环形进度条组件
+ */
+function createProgressCircle(project, canvas, params) {
+  const {
+    cx,
+    cy,
+    radius,
+    value,
+    strokeWidth = 10,
+    trackColor = '#e5e7eb',
+    fillColor = '#3b82f6',
+    backgroundColor,
+    showLabel = true,
+    labelColor,
+    startAngle = -90
+  } = params
+
+  const elements = []
+
+  // 绘制背景圆（可选）
+  if (backgroundColor) {
+    const bgCircle = new paper.Path.Circle({
+      center: [cx, cy],
+      radius: radius + strokeWidth / 2
+    })
+    bgCircle.fillColor = new paper.Color(backgroundColor)
+    if (project && project.activeLayer) {
+      project.activeLayer.addChild(bgCircle)
+    }
+    elements.push({ type: 'path', id: bgCircle.id })
+  }
+
+  // 绘制轨道（背景环）
+  const trackCircle = new paper.Path.Circle({
+    center: [cx, cy],
+    radius: radius
+  })
+  trackCircle.fillColor = null
+  trackCircle.strokeColor = new paper.Color(trackColor)
+  trackCircle.strokeWidth = strokeWidth
+  if (project && project.activeLayer) {
+    project.activeLayer.addChild(trackCircle)
+  }
+  elements.push({ type: 'path', id: trackCircle.id })
+
+  // 绘制进度弧线
+  if (value > 0 && value <= 100) {
+    const percentage = value / 100
+    const arcAngle = percentage * 360
+    
+    // 转换为弧度
+    const startRad = startAngle * Math.PI / 180
+    const endRad = (startAngle + arcAngle) * Math.PI / 180
+
+    // 创建进度弧线路径
+    const progressArc = new paper.Path()
+    
+    // 添加起点
+    progressArc.moveTo(
+      cx + radius * Math.cos(startRad),
+      cy + radius * Math.sin(startRad)
+    )
+    
+    // 添加弧线上的点（用多个点模拟圆弧）
+    const segments = 36
+    const angleStep = (endRad - startRad) / segments
+    for (let i = 1; i <= segments; i++) {
+      const angle = startRad + angleStep * i
+      progressArc.lineTo(
+        cx + radius * Math.cos(angle),
+        cy + radius * Math.sin(angle)
+      )
+    }
+
+    progressArc.strokeColor = new paper.Color(fillColor)
+    progressArc.strokeWidth = strokeWidth
+    progressArc.strokeCap = 'round'
+
+    if (project && project.activeLayer) {
+      project.activeLayer.addChild(progressArc)
+    }
+    elements.push({ type: 'path', id: progressArc.id })
+  }
+
+  // 绘制标签文字
+  if (showLabel) {
+    const textColor = labelColor || fillColor
+    const fontSize = Math.min(Math.max(Math.round(radius * 0.35), 12), 48)
+    const label = new paper.PointText({
+      point: [cx, cy + fontSize * 0.35],
+      content: `${Math.round(value)}%`,
+      fontSize: fontSize,
+      fillColor: new paper.Color(textColor),
+      justification: 'center',
+      fontWeight: 'bold'
+    })
+    if (project && project.activeLayer) {
+      project.activeLayer.addChild(label)
+    }
+    elements.push({ type: 'text', id: label.id })
+  }
+
+  return {
+    success: true,
+    elements,
+    type: 'progressCircle'
+  }
+}
+
+module.exports = createProgressCircle

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