foliko 1.0.87 → 1.1.0

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

@@ -0,0 +1,155 @@
+/**
+ * 图片框组件 - 带装饰边框的图片
+ */
+const createImageFrame = (ctx) => ({
+  /**
+   * @param {Object} params
+   * @param {string} params.src - 图片路径或URL
+   * @param {number} params.x - X坐标
+   * @param {number} params.y - Y坐标
+   * @param {number} params.width - 图片宽度
+   * @param {number} params.height - 图片高度
+   * @param {string} [params.borderColor='#ffffff'] - 边框颜色
+   * @param {number} [params.borderWidth=3] - 边框宽度
+   * @param {string} [params.outerColor='#1a1a2e'] - 外边框颜色
+   * @param {number} [params.outerWidth=6] - 外边框宽度
+   * @param {number} [params.shadowBlur=0] - 阴影模糊
+   * @param {number} [params.shadowOffsetX=0] - 阴影X偏移
+   * @param {number} [params.shadowOffsetY=0] - 阴影Y偏移
+   * @param {string} [params.shadowColor='rgba(0,0,0,0.3)'] - 阴影颜色
+   * @param {number} [params.radius=0] - 圆角半径
+   * @param {string} [params.overlayColor] - 叠加颜色
+   * @param {number} [params.overlayOpacity=0] - 叠加透明度
+   * @param {string} [params.fit='cover'] - 图片填充方式: cover, contain, fill
+   */
+  async draw({
+    src,
+    x,
+    y,
+    width,
+    height,
+    borderColor = '#ffffff',
+    borderWidth = 3,
+    outerColor = '#1a1a2e',
+    outerWidth = 6,
+    shadowBlur = 0,
+    shadowOffsetX = 0,
+    shadowOffsetY = 0,
+    shadowColor = 'rgba(0,0,0,0.3)',
+    radius = 0,
+    overlayColor,
+    overlayOpacity = 0,
+    fit = 'cover'
+  }) {
+    // 绘制外边框（装饰层）
+    if (outerWidth > 0) {
+      ctx.fillStyle = outerColor
+      await _roundRect(ctx, x - outerWidth, y - outerWidth, width + outerWidth * 2, height + outerWidth * 2, radius + outerWidth)
+      ctx.fill()
+    }
+
+    // 绘制内边框
+    if (borderWidth > 0) {
+      ctx.fillStyle = borderColor
+      await _roundRect(ctx, x - borderWidth, y - borderWidth, width + borderWidth * 2, height + borderWidth * 2, radius + borderWidth)
+      ctx.fill()
+    }
+
+    // 绘制阴影
+    if (shadowBlur > 0) {
+      ctx.shadowColor = shadowColor
+      ctx.shadowBlur = shadowBlur
+      ctx.shadowOffsetX = shadowOffsetX
+      ctx.shadowOffsetY = shadowOffsetY
+    }
+
+    // 加载并绘制图片
+    const image = await _loadImage(src)
+    const imgWidth = image.width
+    const imgHeight = image.height
+    const imgRatio = imgWidth / imgHeight
+    const boxRatio = width / height
+
+    let drawX = x, drawY = y, drawW = width, drawH = height
+
+    if (fit === 'cover') {
+      if (imgRatio > boxRatio) {
+        drawH = height
+        drawW = height * imgRatio
+        drawX = x - (drawW - width) / 2
+      } else {
+        drawW = width
+        drawH = width / imgRatio
+        drawY = y - (drawH - height) / 2
+      }
+    } else if (fit === 'contain') {
+      if (imgRatio > boxRatio) {
+        drawW = width
+        drawH = width / imgRatio
+        drawY = y + (height - drawH) / 2
+      } else {
+        drawH = height
+        drawW = height * imgRatio
+        drawX = x + (width - drawW) / 2
+      }
+    }
+
+    // 裁剪并绘制图片
+    ctx.save()
+    await _roundRect(ctx, x, y, width, height, radius)
+    ctx.clip()
+    ctx.drawImage(image, drawX, drawY, drawW, drawH)
+    ctx.restore()
+
+    // 重置阴影
+    ctx.shadowColor = 'transparent'
+    ctx.shadowBlur = 0
+    ctx.shadowOffsetX = 0
+    ctx.shadowOffsetY = 0
+
+    // 叠加颜色
+    if (overlayColor && overlayOpacity > 0) {
+      ctx.fillStyle = overlayColor
+      ctx.globalAlpha = overlayOpacity
+      await _roundRect(ctx, x, y, width, height, radius)
+      ctx.fill()
+      ctx.globalAlpha = 1
+    }
+  }
+})
+
+// 辅助函数：圆角矩形
+async function _roundRect(ctx, x, y, width, height, radius) {
+  const r = Math.min(radius, width / 2, height / 2)
+  ctx.beginPath()
+  ctx.moveTo(x + r, y)
+  ctx.lineTo(x + width - r, y)
+  ctx.quadraticCurveTo(x + width, y, x + width, y + r)
+  ctx.lineTo(x + width, y + height - r)
+  ctx.quadraticCurveTo(x + width, y + height, x + width - r, y + height)
+  ctx.lineTo(x + r, y + height)
+  ctx.quadraticCurveTo(x, y + height, x, y + height - r)
+  ctx.lineTo(x, y + r)
+  ctx.quadraticCurveTo(x, y, x + r, y)
+  ctx.closePath()
+}
+
+// 辅助函数：加载图片
+async function _loadImage(src) {
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    img.crossOrigin = 'anonymous'
+    img.onload = () => resolve(img)
+    img.onerror = (e) => {
+      // 尝试 data URL 格式
+      if (src.startsWith('data:')) {
+        img.src = src
+      } else {
+        reject(new Error(`Failed to load image: ${src}`))
+      }
+    }
+    img.src = src
+  })
+}
+
+module.exports = createImageFrame

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

@@ -0,0 +1,62 @@
+/**
+ * 高级组件模块导出
+ */
+
+const createCard = require('./card')
+const createBadge = require('./badge')
+const createCTA = require('./cta')
+const createFeature = require('./feature')
+const createFeatureGrid = require('./featureGrid')
+const createDivider = require('./divider')
+const createAvatar = require('./avatar')
+const createProgress = require('./progress')
+const createRating = require('./rating')
+const createQuote = require('./quote')
+const createStatCard = require('./statCard')
+const createTagCloud = require('./tagCloud')
+const createStepper = require('./stepper')
+const createTimeline = require('./timeline')
+const { createListItem, createList } = require('./listItem')
+const createNotification = require('./notification')
+const createImageFrame = require('./imageFrame')
+const createColumns = require('./columns')
+const createGrid = require('./grid')
+const createStar = require('./star')
+const createArrow = require('./arrow')
+const createProgressCircle = require('./progressCircle')
+const createChip = require('./chip')
+const createChart = require('./chart')
+const createWatermark = require('./watermark')
+const createTable = require('./table')
+
+module.exports = {
+  // 原有组件
+  createCard,
+  createBadge,
+  createCTA,
+  createFeature,
+  createFeatureGrid,
+  createDivider,
+  createAvatar,
+  createProgress,
+  createRating,
+  createQuote,
+  createStatCard,
+  createTagCloud,
+  createStepper,
+  createTimeline,
+  createListItem,
+  createList,
+  createNotification,
+  createImageFrame,
+  createColumns,
+  createGrid,
+  // 新增组件
+  createStar,
+  createArrow,
+  createProgressCircle,
+  createChip,
+  createChart,
+  createWatermark,
+  createTable,
+}

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

@@ -0,0 +1,146 @@
+/**
+ * 列表项组件
+ */
+
+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 - 图标
+ * @param {string} args.title - 标题
+ * @param {string} args.description - 描述
+ * @param {string} args.badge - 徽章文字
+ * @param {string} args.badgeColor - 徽章颜色
+ * @param {string} args.iconColor - 图标颜色
+ * @param {string} args.background - 背景色
+ * @param {string} args.borderColor - 边框颜色
+ * @param {number} args.height - 高度
+ * @param {number} args.radius - 圆角半径
+ */
+function createListItem(project, canvas, args) {
+  const {
+    x, y,
+    width = 400,
+    icon = '→',
+    title,
+    description,
+    badge,
+    badgeColor = '#6366f1',
+    iconColor = '#6366f1',
+    background = '#ffffff',
+    borderColor = '#e5e7eb',
+    height = 60,
+    radius = 8,
+  } = 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(borderColor)
+  bg.strokeWidth = 1
+  elements.push({ type: 'rectangle', id: bg.id })
+
+  // 绘制图标
+  const iconText = new paper.PointText({
+    point: [x + 15, y + height / 2 + 6],
+    content: icon,
+    fontSize: 20,
+    fillColor: new paper.Color(iconColor),
+    justification: 'center',
+  })
+  elements.push({ type: 'text', id: iconText.id })
+
+  // 绘制标题
+  const titleText = new paper.PointText({
+    point: [x + 50, y + height / 2 - 5],
+    content: title || 'List Item',
+    fontSize: 16,
+    fillColor: new paper.Color('#1e293b'),
+    justification: 'left',
+  })
+  elements.push({ type: 'text', id: titleText.id })
+
+  // 绘制描述
+  if (description) {
+    const descText = new paper.PointText({
+      point: [x + 50, y + height / 2 + 15],
+      content: description,
+      fontSize: 12,
+      fillColor: new paper.Color('#64748b'),
+      justification: 'left',
+    })
+    elements.push({ type: 'text', id: descText.id })
+  }
+
+  // 绘制徽章
+  if (badge) {
+    const badgeWidth = badge.length * 10 + 20
+    const badgeX = x + width - badgeWidth - 15
+    const badgeY = y + (height - 24) / 2
+
+    const badgeBg = new paper.Path.Rectangle({
+      point: [badgeX, badgeY],
+      size: [badgeWidth, 24],
+      radius: 12,
+    })
+    badgeBg.fillColor = new paper.Color(badgeColor)
+    elements.push({ type: 'rectangle', id: badgeBg.id })
+
+    const badgeText = new paper.PointText({
+      point: [badgeX + badgeWidth / 2, badgeY + 16],
+      content: badge,
+      fontSize: 12,
+      fillColor: new paper.Color('#ffffff'),
+      justification: 'center',
+    })
+    elements.push({ type: 'text', id: badgeText.id })
+  }
+
+  return { success: true, elements }
+}
+
+/**
+ * 创建列表（多个列表项）
+ */
+function createList(project, canvas, args) {
+  const {
+    x, y,
+    items = [],
+    gap = 10,
+    width = 400,
+    ...rest
+  } = args
+
+  const elements = []
+  let currentY = y
+
+  for (const item of items) {
+    const result = createListItem(project, canvas, {
+      x, y: currentY, width, ...item, ...rest,
+    })
+    elements.push(...result.elements)
+    currentY += 60 + gap
+  }
+
+  return {
+    success: true,
+    elements,
+    height: currentY - y,
+  }
+}
+
+module.exports = createListItem
+module.exports.createList = createList

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