foliko 1.0.87 → 1.1.0

package/.agent/plugins/poster-plugin/src/composer.js

@@ -0,0 +1,1904 @@
+/**
+ * 海报组件化生成器
+ * 
+ * 支持 JSON 配置驱动，一次调用生成完整海报
+ */
+
+const paper = require('paper')
+
+/**
+ * 辅助函数：将元素添加到活跃层
+ */
+function addToLayer(project, element) {
+  if (project && project.activeLayer && element) {
+    if (element.insert) {
+      project.activeLayer.addChild(element)
+    }
+  }
+}
+
+/**
+ * 辅助函数：批量添加元素到活跃层
+ */
+function addAllToLayer(project, elements) {
+  if (project && project.activeLayer && elements) {
+    elements.forEach(el => {
+      if (el.id && el.type) {
+        const item = project.getItem({ id: el.id })
+        if (item) project.activeLayer.addChild(item)
+      }
+    })
+  }
+}
+
+/**
+ * 组件类型注册表
+ */
+const COMPONENT_TYPES = {
+  // 基础元素
+  background: 'background',
+  rectangle: 'rectangle',
+  circle: 'circle',
+  line: 'line',
+  polygon: 'polygon',
+  text: 'text',
+  artText: 'artText',
+  image: 'image',
+  svg: 'svg',
+  imageFrame: 'imageFrame',
+  // 布局组件
+  columns: 'columns',
+  grid: 'grid',
+  // 装饰组件
+  star: 'star',
+  arrow: 'arrow',
+  progressCircle: 'progressCircle',
+  chip: 'chip',
+  chart: 'chart',
+  watermark: 'watermark',
+  table: 'table',
+  // 高级组件
+  card: 'card',
+  badge: 'badge',
+  cta: 'cta',
+  feature: 'feature',
+  featureGrid: 'featureGrid',
+  divider: 'divider',
+  avatar: 'avatar',
+  progress: 'progress',
+  rating: 'rating',
+  quote: 'quote',
+  statCard: 'statCard',
+  tagCloud: 'tagCloud',
+  stepper: 'stepper',
+  timeline: 'timeline',
+  listItem: 'listItem',
+  notification: 'notification',
+}
+
+/**
+ * 从配置创建海报
+ * 
+ * @param {Object} project - Paper.js 项目
+ * @param {Object} canvas - 画布对象
+ * @param {Object} config - 海报配置
+ * @returns {Object} 创建结果
+ */
+async function createFromConfig(project, canvas, config) {
+  const { components = [] } = config
+  const results = []
+
+  for (const component of components) {
+    const result = await createComponent(project, canvas, component)
+    results.push(result)
+  }
+
+  // 将所有创建的元素添加到活动层
+  if (project && project.activeLayer) {
+    project.activeLayer.addChildren(project.layers.flatMap(l => l.children))
+  }
+
+  return {
+    success: true,
+    componentCount: results.length,
+    results,
+  }
+}
+
+/**
+ * 根据配置创建单个组件
+ */
+function createComponent(project, canvas, config) {
+  const { type, ...args } = config
+
+  switch (type) {
+    // 基础元素
+    case 'background':
+      return createBackgroundElement(project, canvas, args)
+    case 'rectangle':
+      return createRectangleElement(project, args)
+    case 'circle':
+      return createCircleElement(project, args)
+    case 'line':
+      return createLineElement(project, args)
+    case 'polygon':
+      return createPolygonElement(project, args)
+    case 'text':
+      return createTextElement(project, args)
+    case 'artText':
+      return createArtTextElement(project, args)
+    case 'image':
+      return createImageElement(project, args)
+    case 'svg':
+      return createSVGElement(project, args)
+    case 'imageFrame':
+      return createImageFrameComponent(project, canvas, args)
+    case 'columns':
+      return createColumnsComponent(project, canvas, args)
+    case 'grid':
+      return createGridComponent(project, canvas, args)
+
+    // 装饰组件
+    case 'star':
+      return createStarComponent(project, canvas, args)
+    case 'arrow':
+      return createArrowComponent(project, canvas, args)
+    case 'progressCircle':
+      return createProgressCircleComponent(project, canvas, args)
+    case 'chip':
+      return createChipComponent(project, canvas, args)
+    case 'chart':
+      return createChartComponent(project, canvas, args)
+    case 'watermark':
+      return createWatermarkComponent(project, canvas, args)
+    case 'table':
+      return createTableComponent(project, canvas, args)
+
+    // 高级组件
+    case 'card':
+      return createCardComponent(project, canvas, args)
+    case 'badge':
+      return createBadgeComponent(project, canvas, args)
+    case 'cta':
+      return createCTAComponent(project, canvas, args)
+    case 'feature':
+      return createFeatureComponent(project, canvas, args)
+    case 'featureGrid':
+      return createFeatureGridComponent(project, canvas, args)
+    case 'divider':
+      return createDividerComponent(project, canvas, args)
+    case 'avatar':
+      return createAvatarComponent(project, canvas, args)
+    case 'progress':
+      return createProgressComponent(project, canvas, args)
+    case 'rating':
+      return createRatingComponent(project, canvas, args)
+    case 'quote':
+      return createQuoteComponent(project, canvas, args)
+    case 'statCard':
+      return createStatCardComponent(project, canvas, args)
+    case 'tagCloud':
+      return createTagCloudComponent(project, canvas, args)
+    case 'stepper':
+      return createStepperComponent(project, canvas, args)
+    case 'timeline':
+      return createTimelineComponent(project, canvas, args)
+    case 'listItem':
+      return createListItemComponent(project, canvas, args)
+    case 'notification':
+      return createNotificationComponent(project, canvas, args)
+
+    default:
+      return { success: false, error: `Unknown component type: ${type}` }
+  }
+}
+
+// ============= 基础元素创建函数 =============
+
+function createBackgroundElement(project, canvas, { color, gradient }) {
+  if (gradient) {
+    const paperColors = gradient.colors.map(c => new paper.Color(c))
+    const { type, direction } = gradient
+
+    if (type === 'linear') {
+      const angle = (direction || 45) * Math.PI / 180
+      const diagonal = Math.sqrt(canvas.width ** 2 + canvas.height ** 2)
+      const centerX = canvas.width / 2
+      const centerY = canvas.height / 2
+      const start = new paper.Point(
+        centerX - Math.cos(angle) * diagonal / 2,
+        centerY - Math.sin(angle) * diagonal / 2
+      )
+      const stop = new paper.Point(
+        centerX + Math.cos(angle) * diagonal / 2,
+        centerY + Math.sin(angle) * diagonal / 2
+      )
+      project.activeLayer.fillColor = new paper.Color({
+        gradient: { stops: paperColors },
+        origin: start,
+        destination: stop,
+      })
+    } else {
+      const center = new paper.Point(canvas.width / 2, canvas.height / 2)
+      const radius = Math.max(canvas.width, canvas.height) / 2
+      project.activeLayer.fillColor = new paper.Color({
+        gradient: { stops: paperColors },
+        origin: center,
+        destination: center.add(new paper.Point(radius, 0)),
+      })
+    }
+  } else if (color) {
+    project.activeLayer.fillColor = new paper.Color(color)
+  }
+
+  return { success: true, type: 'background' }
+}
+
+function createRectangleElement(project, { x, y, width, height, fill, stroke, strokeWidth, radius, opacity }) {
+  const rect = new paper.Path.Rectangle({
+    point: [x, y],
+    size: [width, height],
+    radius: radius || 0,
+  })
+
+  if (fill) rect.fillColor = new paper.Color(fill)
+  if (stroke) {
+    rect.strokeColor = new paper.Color(stroke)
+    rect.strokeWidth = strokeWidth || 1
+  }
+  if (opacity !== undefined) rect.opacity = opacity
+
+  return { success: true, id: rect.id, type: 'rectangle' }
+}
+
+function createCircleElement(project, { cx, cy, rx, ry, fill, stroke, strokeWidth, opacity }) {
+  const circle = new paper.Path.Ellipse({
+    center: [cx, cy],
+    radius: [rx, ry || rx],
+  })
+
+  if (fill) circle.fillColor = new paper.Color(fill)
+  if (stroke) {
+    circle.strokeColor = new paper.Color(stroke)
+    circle.strokeWidth = strokeWidth || 1
+  }
+  if (opacity !== undefined) circle.opacity = opacity
+
+  return { success: true, id: circle.id, type: 'circle' }
+}
+
+function createLineElement(project, { x1, y1, x2, y2, stroke, strokeWidth }) {
+  const line = new paper.Path.Line({
+    from: [x1, y1],
+    to: [x2, y2],
+    strokeColor: new paper.Color(stroke || '#ffffff'),
+    strokeWidth: strokeWidth || 2,
+  })
+
+  return { success: true, id: line.id, type: 'line' }
+}
+
+function createPolygonElement(project, { cx, cy, radius, sides, fill, stroke, strokeWidth, opacity }) {
+  const polygon = new paper.Path.RegularPolygon({
+    center: [cx, cy],
+    radius: radius,
+    sides: sides,
+  })
+
+  if (fill) polygon.fillColor = new paper.Color(fill)
+  if (stroke) {
+    polygon.strokeColor = new paper.Color(stroke)
+    polygon.strokeWidth = strokeWidth || 1
+  }
+  if (opacity !== undefined) polygon.opacity = opacity
+
+  return { success: true, id: polygon.id, type: 'polygon' }
+}
+
+function createTextElement(project, { text, x, y, fontSize, fontFamily, color, align, shadow }) {
+  const { validateFont, getDefaultFont } = require('./fonts')
+
+  const textItem = new paper.PointText({
+    point: [x, y],
+    content: text,
+    fontSize: fontSize || 48,
+    fontFamily: validateFont(fontFamily) || getDefaultFont(),
+    fillColor: new paper.Color(color || '#ffffff'),
+    justification: align || 'left',
+  })
+
+  if (shadow) {
+    textItem.shadowColor = new paper.Color(shadow.color)
+    textItem.shadowBlur = shadow.blur || 5
+    textItem.shadowOffset = new paper.Point(shadow.offsetX || 2, shadow.offsetY || 2)
+  }
+
+  return { success: true, id: textItem.id, type: 'text' }
+}
+
+function createArtTextElement(project, { text, x, y, fontSize, fontFamily, gradient, strokeColor, strokeWidth, shadow }) {
+  const { validateFont, getDefaultFont } = require('./fonts')
+
+  const textItem = new paper.PointText({
+    point: [x, y],
+    content: text,
+    fontSize: fontSize || 120,
+    fontFamily: validateFont(fontFamily) || getDefaultFont(),
+    fillColor: gradient ? new paper.Color(gradient.colors[0]) : new paper.Color('#ffffff'),
+    justification: 'center',
+  })
+
+  if (gradient && gradient.colors.length > 0) {
+    const colors = gradient.colors.map(c => new paper.Color(c))
+    textItem.fillColor = new paper.Color({
+      gradient: { stops: colors },
+      origin: textItem.bounds.topLeft,
+      destination: textItem.bounds.topRight,
+    })
+  }
+
+  if (strokeColor) {
+    textItem.strokeColor = new paper.Color(strokeColor)
+    textItem.strokeWidth = strokeWidth || 2
+  }
+
+  if (shadow) {
+    textItem.shadowColor = new paper.Color(shadow.color)
+    textItem.shadowBlur = shadow.blur || 10
+    textItem.shadowOffset = new paper.Point(shadow.offsetX || 3, shadow.offsetY || 3)
+  }
+
+  return { success: true, id: textItem.id, type: 'artText' }
+}
+
+function createImageElement(project, { src, x, y, width, height, opacity }) {
+  const fs = require('fs')
+  const path = require('path')
+
+  // 将图片转换为 Base64 data URL
+  let imageUrl = src
+
+  // 如果是本地文件，转换为 Base64
+  if (!src.startsWith('data:') && !src.startsWith('http')) {
+    let absolutePath = src
+    if (!path.isAbsolute(absolutePath)) {
+      absolutePath = path.join(process.cwd(), absolutePath)
+    }
+
+    if (!fs.existsSync(absolutePath)) {
+      return { success: false, error: `文件不存在: ${absolutePath}` }
+    }
+
+    const buffer = fs.readFileSync(absolutePath)
+    const ext = path.extname(absolutePath).toLowerCase()
+    const mimeTypes = {
+      '.png': 'image/png',
+      '.jpg': 'image/jpeg',
+      '.jpeg': 'image/jpeg',
+      '.gif': 'image/gif',
+      '.webp': 'image/webp',
+      '.bmp': 'image/bmp'
+    }
+    const mimeType = mimeTypes[ext] || 'image/png'
+    imageUrl = `data:${mimeType};base64,${buffer.toString('base64')}`
+  }
+
+  const raster = new paper.Raster(imageUrl)
+
+  raster.onLoad = () => {
+    if (width && height) {
+      raster.bounds = new paper.Rectangle(x, y, width, height)
+    } else if (width) {
+      const scale = width / raster.width
+      raster.bounds = new paper.Rectangle(x, y, width, raster.height * scale)
+    } else if (height) {
+      const scale = height / raster.height
+      raster.bounds = new paper.Rectangle(x, y, raster.width * scale, height)
+    } else {
+      raster.position = new paper.Point(x, y)
+    }
+
+    if (opacity !== undefined) raster.opacity = opacity
+  }
+
+  return {
+    success: true,
+    id: raster.id,
+    type: 'image',
+    width: raster.width,
+    height: raster.height,
+  }
+}
+
+const fs = require('fs')
+
+function createSVGElement(project, { src, x, y, width, height, opacity }) {
+  let svgContent = src
+
+  // 如果是文件路径，读取文件内容
+  if (!src.startsWith('<') && !src.startsWith('<?xml')) {
+    try {
+      svgContent = fs.readFileSync(src, 'utf8')
+    } catch (e) {
+      return { success: false, error: `Failed to read SVG file: ${e.message}` }
+    }
+  }
+
+  // 导入 SVG
+  const svg = project.importSVG(svgContent)
+
+  if (!svg) {
+    return { success: false, error: 'Failed to import SVG' }
+  }
+
+  // 设置位置
+  svg.position = new paper.Point(x, y)
+
+  // 设置尺寸
+  if (width && height) {
+    svg.bounds.width = width
+    svg.bounds.height = height
+  } else if (width) {
+    svg.scale(width / svg.bounds.width)
+  } else if (height) {
+    svg.scale(height / svg.bounds.height)
+  }
+
+  // 设置透明度
+  if (opacity !== undefined) {
+    svg.opacity = opacity
+  }
+
+  return {
+    success: true,
+    id: svg.id,
+    type: 'svg',
+    width: svg.bounds.width,
+    height: svg.bounds.height,
+  }
+}
+
+// ============= 高级组件创建函数 =============
+
+function createCardComponent(project, canvas, {
+  x, y, width, height,
+  background, border, borderWidth, radius,
+  title, titleSize, titleColor,
+  subtitle, subtitleSize, subtitleColor,
+  padding = 20,
+}) {
+  const elements = []
+
+  // 卡片背景
+  const card = new paper.Path.Rectangle({
+    point: [x, y],
+    size: [width, height],
+    radius: radius || 0,
+  })
+  card.fillColor = new paper.Color(background || '#ffffff')
+  if (border) {
+    card.strokeColor = new paper.Color(border)
+    card.strokeWidth = borderWidth || 1
+  }
+  elements.push({ type: 'rectangle', id: card.id })
+
+  // 标题
+  if (title) {
+    const titleText = new paper.PointText({
+      point: [x + padding, y + padding + (titleSize || 24)],
+      content: title,
+      fontSize: titleSize || 24,
+      fillColor: new paper.Color(titleColor || '#000000'),
+      justification: 'left',
+    })
+    elements.push({ type: 'text', id: titleText.id })
+  }
+
+  // 副标题
+  if (subtitle) {
+    const subY = title ? y + padding + (titleSize || 24) + (subtitleSize || 16) + 10 : y + padding
+    const subtitleText = new paper.PointText({
+      point: [x + padding, subY],
+      content: subtitle,
+      fontSize: subtitleSize || 16,
+      fillColor: new paper.Color(subtitleColor || '#666666'),
+      justification: 'left',
+    })
+    elements.push({ type: 'text', id: subtitleText.id })
+  }
+
+  return { success: true, elements, type: 'card' }
+}
+
+function createBadgeComponent(project, canvas, {
+  x, y, text,
+  background = '#007bff', color = '#ffffff',
+  border, fontSize = 18, padding = 15, radius = 4,
+}) {
+  const textWidth = text.length * fontSize * 0.6
+  const badgeWidth = textWidth + padding * 2
+  const badgeHeight = fontSize + padding * 2
+  const badgeX = x - badgeWidth / 2
+
+  const badge = new paper.Path.Rectangle({
+    point: [badgeX, y],
+    size: [badgeWidth, badgeHeight],
+    radius: radius,
+  })
+  badge.fillColor = new paper.Color(background)
+  if (border) badge.strokeColor = new paper.Color(border)
+
+  const badgeText = new paper.PointText({
+    point: [x, y + badgeHeight / 2 + fontSize / 3],
+    content: text,
+    fontSize: fontSize,
+    fillColor: new paper.Color(color),
+    justification: 'center',
+  })
+
+  return { success: true, elements: [{ type: 'rectangle', id: badge.id }, { type: 'text', id: badgeText.id }], type: 'badge' }
+}
+
+function createCTAComponent(project, canvas, {
+  x, y, text,
+  background = '#007bff', color = '#ffffff',
+  border, fontSize = 20, padding = 25, radius = 8, shadow,
+}) {
+  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)
+
+  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)
+  }
+
+  const buttonText = new paper.PointText({
+    point: [x, y + btnHeight / 2 + fontSize / 3],
+    content: text,
+    fontSize: fontSize,
+    fillColor: new paper.Color(color),
+    justification: 'center',
+  })
+
+  return { success: true, elements: [{ type: 'rectangle', id: button.id }, { type: 'text', id: buttonText.id }], type: 'cta' }
+}
+
+function createFeatureComponent(project, canvas, {
+  x, y, width,
+  icon, title, description,
+  iconColor = '#007bff', titleColor = '#ffffff', descColor = '#aaaaaa',
+  iconSize = 32, titleSize = 20, descSize = 14,
+}) {
+  const elements = []
+  const padding = 15
+  let currentY = y
+
+  if (icon) {
+    elements.push(new paper.PointText({
+      point: [x + padding, currentY + iconSize],
+      content: icon,
+      fontSize: iconSize,
+      fillColor: new paper.Color(iconColor),
+      justification: 'left',
+    }))
+    currentY += iconSize + 5
+  }
+
+  if (title) {
+    elements.push(new paper.PointText({
+      point: [x + padding, currentY + titleSize],
+      content: title,
+      fontSize: titleSize,
+      fillColor: new paper.Color(titleColor),
+      justification: 'left',
+    }))
+    currentY += titleSize + 5
+  }
+
+  if (description) {
+    elements.push(new paper.PointText({
+      point: [x + padding, currentY + descSize],
+      content: description,
+      fontSize: descSize,
+      fillColor: new paper.Color(descColor),
+      justification: 'left',
+    }))
+  }
+
+  return { success: true, elements, type: 'feature' }
+}
+
+function createFeatureGridComponent(project, canvas, {
+  x, y,
+  columns = 3, itemWidth = 200, itemHeight = 120, gap = 20,
+  items = [],
+  background = '#1a1a2e', borderColor = '#00d9ff', radius = 8,
+}) {
+  const elements = []
+
+  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(bg)
+
+    const padding = 15
+    let offsetY = itemY + padding
+
+    if (item.icon) {
+      elements.push(new paper.PointText({
+        point: [itemX + padding, offsetY + 24],
+        content: item.icon,
+        fontSize: 28,
+        fillColor: new paper.Color(item.iconColor || '#00ff88'),
+        justification: 'left',
+      }))
+      offsetY += 35
+    }
+
+    if (item.title) {
+      elements.push(new paper.PointText({
+        point: [itemX + padding, offsetY + 18],
+        content: item.title,
+        fontSize: 16,
+        fillColor: new paper.Color(item.titleColor || '#ffffff'),
+        justification: 'left',
+      }))
+      offsetY += 22
+    }
+
+    if (item.description) {
+      elements.push(new paper.PointText({
+        point: [itemX + padding, offsetY + 14],
+        content: item.description,
+        fontSize: 12,
+        fillColor: new paper.Color(item.descColor || '#888888'),
+        justification: 'left',
+      }))
+    }
+  }
+
+  return {
+    success: true,
+    elements,
+    type: 'featureGrid',
+    rows: Math.ceil(items.length / columns),
+    cols: columns,
+  }
+}
+
+function createDividerComponent(project, canvas, {
+  x, y, width, color = '#00d9ff', thickness = 1, style = 'solid', align = 'center',
+}) {
+  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: 'divider' }
+}
+
+module.exports = {
+  createFromConfig,
+  createComponent,
+  COMPONENT_TYPES,
+}
+
+
+// ============= 新增组件创建函数 =============
+
+function createAvatarComponent(project, canvas, { x, y, size = 80, initials, background = '#6366f1', border, borderWidth = 0, color = '#ffffff' }) {
+  const elements = []
+  const radius = size / 2
+
+  const circle = new paper.Path.Circle({
+    center: [x, y],
+    radius: radius,
+  })
+  circle.fillColor = new paper.Color(background)
+  if (border) {
+    circle.strokeColor = new paper.Color(border)
+    circle.strokeWidth = borderWidth
+  }
+  elements.push({ type: 'circle', id: circle.id })
+
+  if (initials) {
+    const text = new paper.PointText({
+      point: [x, y + size / 6],
+      content: initials.charAt(0).toUpperCase(),
+      fontSize: size * 0.4,
+      fillColor: new paper.Color(color),
+      justification: 'center',
+    })
+    elements.push({ type: 'text', id: text.id })
+  }
+
+  return { success: true, elements, type: 'avatar', size }
+}
+
+function createProgressComponent(project, canvas, { x, y, width = 300, height = 20, value = 50, trackColor = '#e0e0e0', fillColor = '#6366f1', radius = 10, showLabel = false, label }) {
+  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 }
+}
+
+function createRatingComponent(project, canvas, { x, y, value = 4, max = 5, size = 24, filledColor = '#fbbf24', emptyColor = '#e5e7eb', gap = 4 }) {
+  const elements = []
+
+  for (let i = 0; i < max; i++) {
+    const starX = x + i * (size + gap)
+    const filled = i < Math.floor(value)
+
+    const star = new paper.Path.Star({
+      center: [starX + size / 2, y + size / 2],
+      points: 5,
+      radius1: size / 4,
+      radius2: size / 2,
+    })
+    star.fillColor = new paper.Color(filled ? filledColor : emptyColor)
+    elements.push({ type: 'polygon', id: star.id })
+  }
+
+  return { success: true, elements, value }
+}
+
+function createQuoteComponent(project, canvas, { x, y, width = 400, text, author, background = '#f8fafc', borderColor = '#6366f1', borderWidth = 4, padding = 20, radius = 8, textColor = '#1e293b', authorColor = '#64748b', fontSize = 18 }) {
+  const elements = []
+  const lineHeight = 22
+
+  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, type: 'quote' }
+}
+
+function createStatCardComponent(project, canvas, { x, y, width = 200, height = 120, label = 'Total', value = '0', change, positive = true, icon, iconColor = '#6366f1', background = '#ffffff', border = '#e5e7eb', radius = 12 }) {
+  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) {
+    elements.push(new paper.PointText({
+      point: [x + 20, y + 35],
+      content: icon,
+      fontSize: 24,
+      fillColor: new paper.Color(iconColor),
+      justification: 'left',
+    }))
+  }
+
+  elements.push(new paper.PointText({
+    point: [x + 20, y + 50 + (icon ? 10 : 0)],
+    content: label,
+    fontSize: 14,
+    fillColor: new paper.Color('#64748b'),
+    justification: 'left',
+  }))
+
+  elements.push(new paper.PointText({
+    point: [x + 20, y + 75 + (icon ? 10 : 0)],
+    content: value,
+    fontSize: 28,
+    fillColor: new paper.Color('#1e293b'),
+    justification: 'left',
+  }))
+
+  if (change) {
+    const changeColor = positive ? '#22c55e' : '#ef4444'
+    const changeIcon = positive ? '↑' : '↓'
+    elements.push(new paper.PointText({
+      point: [x + 20, y + 95 + (icon ? 10 : 0)],
+      content: `${changeIcon} ${change}`,
+      fontSize: 14,
+      fillColor: new paper.Color(changeColor),
+      justification: 'left',
+    }))
+  }
+
+  return { success: true, elements, type: 'statCard' }
+}
+
+function createTagCloudComponent(project, canvas, { x, y, tags = [], fontSize = 14, padding = 12, gap = 10, maxWidth = 400 }) {
+  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 })
+
+    elements.push(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',
+    }))
+
+    currentX += tagWidth + gap
+    rowHeight = Math.max(rowHeight, tagHeight)
+  }
+
+  return { success: true, elements, type: 'tagCloud', height: rowHeight }
+}
+
+function createStepperComponent(project, canvas, { x, y, width = 600, steps = [], currentStep = 0, activeColor = '#6366f1', inactiveColor = '#e5e7eb', completedColor = '#22c55e', circleSize = 40 }) {
+  const elements = []
+  const stepWidth = steps.length > 1 ? width / (steps.length - 1) : width
+  const lineY = y + circleSize / 2
+
+  if (steps.length > 1) {
+    elements.push({
+      type: 'line',
+      id: new paper.Path.Line({
+        from: [x + circleSize / 2, lineY],
+        to: [x + width - circleSize / 2, lineY],
+        strokeColor: new paper.Color(inactiveColor),
+        strokeWidth: 2,
+      }).id
+    })
+  }
+
+  for (let i = 0; i < steps.length; i++) {
+    const stepX = steps.length > 1 ? x + i * stepWidth : x
+    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)
+    elements.push(new paper.PointText({
+      point: [stepX + circleSize / 2, lineY + circleSize / 6],
+      content: icon,
+      fontSize: 16,
+      fillColor: new paper.Color('#ffffff'),
+      justification: 'center',
+    }))
+
+    elements.push(new paper.PointText({
+      point: [stepX + circleSize / 2, y + circleSize + 20],
+      content: steps[i].title || `Step ${i + 1}`,
+      fontSize: 14,
+      fillColor: new paper.Color(i <= currentStep ? '#1e293b' : '#94a3b8'),
+      justification: 'center',
+    }))
+
+    if (steps[i].description) {
+      elements.push(new paper.PointText({
+        point: [stepX + circleSize / 2, y + circleSize + 38],
+        content: steps[i].description,
+        fontSize: 11,
+        fillColor: new paper.Color('#94a3b8'),
+        justification: 'center',
+      }))
+    }
+  }
+
+  return { success: true, elements, type: 'stepper' }
+}
+
+function createTimelineComponent(project, canvas, { x, y, width = 500, items = [], lineColor = '#e2e8f0', dotColor = '#6366f1', dotSize = 16, gap = 60 }) {
+  const elements = []
+  const centerX = x + 80
+  const contentX = x + 120
+
+  if (items.length > 1) {
+    elements.push({
+      type: 'line',
+      id: 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,
+      }).id
+    })
+  }
+
+  for (let i = 0; i < items.length; i++) {
+    const itemY = y + i * gap
+    const isActive = items[i].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 (items[i].date) {
+      elements.push(new paper.PointText({
+        point: [x + 10, itemY + dotSize / 2 + 5],
+        content: items[i].date,
+        fontSize: 12,
+        fillColor: new paper.Color('#94a3b8'),
+        justification: 'left',
+      }))
+    }
+
+    elements.push(new paper.PointText({
+      point: [contentX, itemY + dotSize / 2 + 5],
+      content: items[i].title || `Event ${i + 1}`,
+      fontSize: 16,
+      fillColor: new paper.Color(isActive ? '#1e293b' : '#94a3b8'),
+      justification: 'left',
+    }))
+
+    if (items[i].description) {
+      elements.push(new paper.PointText({
+        point: [contentX, itemY + dotSize / 2 + 28],
+        content: items[i].description,
+        fontSize: 13,
+        fillColor: new paper.Color('#64748b'),
+        justification: 'left',
+      }))
+    }
+  }
+
+  return { success: true, elements, type: 'timeline', height: items.length * gap }
+}
+
+function createListItemComponent(project, canvas, { x, y, width = 400, icon = '→', title, description, badge, badgeColor = '#6366f1', iconColor = '#6366f1', background = '#ffffff', borderColor = '#e5e7eb', height = 60, radius = 8 }) {
+  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 })
+
+  elements.push(new paper.PointText({
+    point: [x + 15, y + height / 2 + 6],
+    content: icon,
+    fontSize: 20,
+    fillColor: new paper.Color(iconColor),
+    justification: 'center',
+  }))
+
+  elements.push(new paper.PointText({
+    point: [x + 50, y + height / 2 - 5],
+    content: title || 'List Item',
+    fontSize: 16,
+    fillColor: new paper.Color('#1e293b'),
+    justification: 'left',
+  }))
+
+  if (description) {
+    elements.push(new paper.PointText({
+      point: [x + 50, y + height / 2 + 15],
+      content: description,
+      fontSize: 12,
+      fillColor: new paper.Color('#64748b'),
+      justification: 'left',
+    }))
+  }
+
+  if (badge) {
+    const badgeWidth = badge.length * 10 + 20
+    const badgeX = x + width - badgeWidth - 15
+    const badgeY = y + (height - 24) / 2
+
+    elements.push({
+      type: 'rectangle',
+      id: new paper.Path.Rectangle({
+        point: [badgeX, badgeY],
+        size: [badgeWidth, 24],
+        radius: 12,
+      }).id
+    })
+
+    elements.push(new paper.PointText({
+      point: [badgeX + badgeWidth / 2, badgeY + 16],
+      content: badge,
+      fontSize: 12,
+      fillColor: new paper.Color('#ffffff'),
+      justification: 'center',
+    }))
+  }
+
+  return { success: true, elements, type: 'listItem' }
+}
+
+function createNotificationComponent(project, canvas, { x, y, width = 360, type = 'info', title, message, showIcon = true, radius = 12 }) {
+  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) {
+    elements.push(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',
+    }))
+  }
+
+  const textX = showIcon ? x + padding + iconSize + 12 : x + padding
+  let currentY = y + padding
+
+  if (title) {
+    elements.push(new paper.PointText({
+      point: [textX, currentY + 18],
+      content: title,
+      fontSize: 16,
+      fillColor: new paper.Color('#1e293b'),
+      justification: 'left',
+    }))
+    currentY += lineHeight + 8
+  }
+
+  if (message) {
+    elements.push(new paper.PointText({
+      point: [textX, currentY + 16],
+      content: message,
+      fontSize: 14,
+      fillColor: new paper.Color('#475569'),
+      justification: 'left',
+    }))
+  }
+
+  return { success: true, elements, type: 'notification' }
+}
+
+/**
+ * 创建图片框组件
+ */
+async function createImageFrameComponent(project, canvas, {
+  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'
+}) {
+  const elements = []
+
+  // 绘制外边框（装饰层）
+  if (outerWidth > 0) {
+    const outerBg = new paper.Path.Rectangle({
+      point: [x - outerWidth, y - outerWidth],
+      size: [width + outerWidth * 2, height + outerWidth * 2],
+      radius: radius + outerWidth
+    })
+    outerBg.fillColor = new paper.Color(outerColor)
+    elements.push({ type: 'rectangle', id: outerBg.id })
+  }
+
+  // 绘制内边框
+  if (borderWidth > 0) {
+    const innerBg = new paper.Path.Rectangle({
+      point: [x - borderWidth, y - borderWidth],
+      size: [width + borderWidth * 2, height + borderWidth * 2],
+      radius: radius + borderWidth
+    })
+    innerBg.fillColor = new paper.Color(borderColor)
+    elements.push({ type: 'rectangle', id: innerBg.id })
+  }
+
+  // 加载并绘制图片
+  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
+    }
+  }
+
+  // 创建裁剪区域
+  const clipPath = new paper.Path.Rectangle({
+    point: [x, y],
+    size: [width, height],
+    radius: radius
+  })
+
+  // 添加阴影
+  if (shadowBlur > 0) {
+    const shadowRect = new paper.Path.Rectangle({
+      point: [x + shadowOffsetX, y + shadowOffsetY],
+      size: [width, height],
+      radius: radius
+    })
+    shadowRect.fillColor = new paper.Color(shadowColor)
+    shadowRect.opacity = shadowBlur / 50
+    shadowRect.shadowColor = new paper.Color(shadowColor)
+    shadowRect.shadowBlur = shadowBlur
+    elements.push({ type: 'rectangle', id: shadowRect.id })
+  }
+
+  // 绘制图片
+  const raster = new paper.Raster({
+    source: src,
+    position: [drawX + drawW / 2, drawY + drawH / 2]
+  })
+
+  await new Promise((resolve) => {
+    raster.onLoad = resolve
+  })
+
+  raster.size = new paper.Size(drawW, drawH)
+  raster.position = new paper.Point(drawX + drawW / 2, drawY + drawH / 2)
+
+  // 应用裁剪
+  clipPath.clipMask = true
+
+  elements.push({ type: 'raster', id: raster.id })
+
+  // 叠加颜色
+  if (overlayColor && overlayOpacity > 0) {
+    const overlay = new paper.Path.Rectangle({
+      point: [x, y],
+      size: [width, height],
+      radius: radius
+    })
+    overlay.fillColor = new paper.Color(overlayColor)
+    overlay.opacity = overlayOpacity
+    elements.push({ type: 'rectangle', id: overlay.id })
+  }
+
+  return { success: true, elements, type: 'imageFrame' }
+}
+
+// 辅助函数：加载图片
+async function _loadImage(src) {
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    img.crossOrigin = 'anonymous'
+    img.onload = () => resolve(img)
+    img.onerror = () => {
+      if (src.startsWith('data:')) {
+        img.src = src
+      } else {
+        reject(new Error(`Failed to load image: ${src}`))
+      }
+    }
+    img.src = src
+  })
+}
+
+/**
+ * 创建分栏布局组件
+ */
+function createColumnsComponent(project, canvas, {
+  x,
+  y,
+  width,
+  height,
+  columns = 2,
+  gap = 20,
+  background,
+  borderColor,
+  borderWidth = 1,
+  radius = 0,
+  direction = 'horizontal',
+  align = 'top'
+}) {
+  const elements = []
+  
+  // 计算每列宽度
+  const totalGap = gap * (columns - 1)
+  const columnWidth = (width - totalGap) / columns
+  
+  // 绘制背景
+  if (background) {
+    const bg = new paper.Path.Rectangle({
+      point: [x, y],
+      size: [width, height],
+      radius: radius
+    })
+    bg.fillColor = new paper.Color(background)
+    elements.push({ type: 'rectangle', id: bg.id })
+  }
+  
+  // 绘制边框
+  if (borderColor && borderWidth > 0) {
+    const border = new paper.Path.Rectangle({
+      point: [x, y],
+      size: [width, height],
+      radius: radius
+    })
+    border.fillColor = new paper.Color('transparent')
+    border.strokeColor = new paper.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 paper.Path.Line({
+      from: [lineX, y + 20],
+      to: [lineX, y + height - 20]
+    })
+    line.strokeColor = new paper.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,
+      centerX: colX + columnWidth / 2,
+      centerY: colY + height / 2
+    })
+  }
+  
+  return {
+    success: true,
+    elements,
+    columnPositions,
+    columnWidth,
+    totalWidth: width,
+    totalHeight: height,
+    type: 'columns'
+  }
+}
+
+/**
+ * 创建网格布局组件
+ */
+function createGridComponent(project, canvas, {
+  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 paper.Path.Rectangle({
+      point: [x, y],
+      size: [width, height],
+      radius: radius
+    })
+    bg.fillColor = new paper.Color(background)
+    elements.push({ type: 'rectangle', id: bg.id })
+  }
+  
+  // 绘制边框
+  if (borderColor && borderWidth > 0) {
+    const border = new paper.Path.Rectangle({
+      point: [x, y],
+      size: [width, height],
+      radius: radius
+    })
+    border.fillColor = new paper.Color('transparent')
+    border.strokeColor = new paper.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'
+  }
+}
+
+
+/**
+ * 创建星形组件
+ */
+function createStarComponent(project, canvas, {
+  cx, cy, points = 5, innerRadius: providedInnerRadius, outerRadius,
+  fill, stroke, strokeWidth = 1, opacity = 1, rotation = 0
+}) {
+  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' }
+}
+
+/**
+ * 创建箭头组件
+ */
+function createArrowComponent(project, canvas, {
+  x1, y1, x2, y2, color = '#333333', strokeWidth = 2, headSize = 12, style = 'solid', direction = 'end'
+}) {
+  const elements = []
+  const angle = Math.atan2(y2 - y1, x2 - x1)
+
+  const line = new paper.Path.Line({ from: [x1, y1], to: [x2, y2] })
+  line.strokeColor = new paper.Color(color)
+  line.strokeWidth = strokeWidth
+  if (style === 'dashed') line.dashArray = [10, 5]
+  elements.push({ type: 'line', id: line.id })
+
+  if (direction === 'end' || direction === 'both') {
+    const arrowHead = new paper.Path()
+    arrowHead.moveTo(x2, y2)
+    arrowHead.lineTo(x2 + headSize * Math.cos(angle + Math.PI * 0.8), y2 + headSize * Math.sin(angle + Math.PI * 0.8))
+    arrowHead.moveTo(x2, y2)
+    arrowHead.lineTo(x2 + headSize * Math.cos(angle - Math.PI * 0.8), y2 + headSize * Math.sin(angle - Math.PI * 0.8))
+    arrowHead.strokeColor = new paper.Color(color)
+    arrowHead.strokeWidth = strokeWidth
+    arrowHead.strokeCap = 'round'
+    elements.push({ type: 'path', id: arrowHead.id })
+  }
+
+  if (direction === 'start' || direction === 'both') {
+    const startAngle = angle + Math.PI
+    const arrowHead = new paper.Path()
+    arrowHead.moveTo(x1, y1)
+    arrowHead.lineTo(x1 + headSize * Math.cos(startAngle + Math.PI * 0.8), y1 + headSize * Math.sin(startAngle + Math.PI * 0.8))
+    arrowHead.moveTo(x1, y1)
+    arrowHead.lineTo(x1 + headSize * Math.cos(startAngle - Math.PI * 0.8), y1 + headSize * Math.sin(startAngle - Math.PI * 0.8))
+    arrowHead.strokeColor = new paper.Color(color)
+    arrowHead.strokeWidth = strokeWidth
+    arrowHead.strokeCap = 'round'
+    elements.push({ type: 'path', id: arrowHead.id })
+  }
+
+  return { success: true, elements, type: 'arrow' }
+}
+
+/**
+ * 创建环形进度条组件
+ */
+function createProgressCircleComponent(project, canvas, {
+  cx, cy, radius, value, strokeWidth = 10, trackColor = '#e0e0e0',
+  fillColor = '#3b82f6', backgroundColor, showLabel = true, labelColor, startAngle = -90
+}) {
+  const elements = []
+
+  if (backgroundColor) {
+    const bgCircle = new paper.Path.Circle({ center: [cx, cy], radius: radius })
+    bgCircle.fillColor = new paper.Color(backgroundColor)
+    elements.push({ type: 'path', id: bgCircle.id })
+  }
+
+  const trackCircle = new paper.Path.Circle({ center: [cx, cy], radius: radius })
+  trackCircle.fillColor = new paper.Color('transparent')
+  trackCircle.strokeColor = new paper.Color(trackColor)
+  trackCircle.strokeWidth = strokeWidth
+  elements.push({ type: 'path', id: trackCircle.id })
+
+  if (value > 0) {
+    const endAngle = startAngle + (value / 100) * 360
+    const startRad = startAngle * Math.PI / 180
+    const endRad = endAngle * Math.PI / 180
+
+    const arc = new paper.Path()
+    arc.moveTo(cx + radius * Math.cos(startRad), cy + radius * Math.sin(startRad))
+    arc.arcTo([cx, cy], radius, endRad - startRad)
+    arc.strokeColor = new paper.Color(fillColor)
+    arc.strokeWidth = strokeWidth
+    arc.strokeCap = 'round'
+    elements.push({ type: 'path', id: arc.id })
+  }
+
+  if (showLabel) {
+    const textColor = labelColor || fillColor
+    const label = new paper.PointText({
+      point: [cx, cy + 6],
+      content: `${Math.round(value)}%`,
+      fontSize: radius * 0.4,
+      fillColor: new paper.Color(textColor),
+      justification: 'center',
+      fontWeight: 'bold'
+    })
+    elements.push({ type: 'text', id: label.id })
+  }
+
+  return { success: true, elements, type: 'progressCircle' }
+}
+
+/**
+ * 创建 Chip 标签组件
+ */
+function createChipComponent(project, canvas, {
+  x, y, text, background = '#e0e0e0', color = '#333333', borderColor,
+  fontSize = 12, padding = 12, radius = 16, icon
+}) {
+  const elements = []
+  const textWidth = text.length * fontSize * 0.6
+  const iconWidth = icon ? fontSize : 0
+  const totalWidth = padding * 2 + textWidth + iconWidth + 4
+  const height = fontSize + padding * 2
+  const rectX = x - totalWidth / 2
+  const rectY = y - height / 2
+
+  const bg = new paper.Path.Rectangle({ point: [rectX, rectY], size: [totalWidth, height], radius: radius })
+  bg.fillColor = new paper.Color(background)
+  if (borderColor) { bg.strokeColor = new paper.Color(borderColor); bg.strokeWidth = 1 }
+  elements.push({ type: 'path', id: bg.id })
+
+  if (icon) {
+    const iconText = new paper.PointText({
+      point: [rectX + padding + iconWidth / 2, y + fontSize / 3],
+      content: icon,
+      fontSize: fontSize + 2,
+      fillColor: new paper.Color(color),
+      justification: 'center'
+    })
+    elements.push({ type: 'text', id: iconText.id })
+  }
+
+  const textX = icon ? rectX + padding + iconWidth + 4 + textWidth / 2 : x
+  const label = new paper.PointText({
+    point: [textX, y + fontSize / 3],
+    content: text,
+    fontSize: fontSize,
+    fillColor: new paper.Color(color),
+    justification: 'center'
+  })
+  elements.push({ type: 'text', id: label.id })
+
+  return { success: true, elements, width: totalWidth, height, type: 'chip' }
+}
+
+/**
+ * 创建图表组件
+ */
+function createChartComponent(project, canvas, {
+  type = 'bar', x, y, width, height, data = [], barColor = '#3b82f6',
+  showLabels = true, showValues = true, barGap = 4
+}) {
+  const elements = []
+
+  if (type === 'bar' && data.length > 0) {
+    const maxValue = Math.max(...data.map(d => d.value))
+    const barCount = data.length
+    const totalGap = barGap * (barCount - 1)
+    const barWidth = (width - totalGap) / barCount
+    const labelHeight = showLabels ? 24 : 0
+    const valueHeight = showValues ? 20 : 0
+    const chartHeight = height - labelHeight - valueHeight - 10
+
+    data.forEach((item, index) => {
+      const barHeight = (item.value / maxValue) * chartHeight
+      const barX = x + index * (barWidth + barGap)
+      const barY = y + height - labelHeight - valueHeight - barHeight - 5
+      const color = item.color || barColor
+
+      const bar = new paper.Path.Rectangle({
+        point: [barX, barY],
+        size: [barWidth, barHeight],
+        radius: [4, 4, 0, 0]
+      })
+      bar.fillColor = new paper.Color(color)
+      elements.push({ type: 'path', id: bar.id })
+
+      if (showValues) {
+        const valueText = new paper.PointText({
+          point: [barX + barWidth / 2, barY - 8],
+          content: String(item.value),
+          fontSize: 12,
+          fillColor: new paper.Color('#666666'),
+          justification: 'center'
+        })
+        elements.push({ type: 'text', id: valueText.id })
+      }
+
+      if (showLabels) {
+        const labelText = new paper.PointText({
+          point: [barX + barWidth / 2, y + height - 8],
+          content: item.label || '',
+          fontSize: 11,
+          fillColor: new paper.Color('#333333'),
+          justification: 'center'
+        })
+        elements.push({ type: 'text', id: labelText.id })
+      }
+    })
+  } else if (type === 'pie' && data.length > 0) {
+    const cx = x + width / 2
+    const cy = y + height / 2
+    const radius = Math.min(width, height) / 2 - 10
+    const total = data.reduce((sum, d) => sum + d.value, 0)
+    let currentAngle = -90
+    const colors = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#06b6d4', '#84cc16']
+
+    data.forEach((item, index) => {
+      const percentage = item.value / total
+      const endAngle = currentAngle + percentage * 360
+      const path = new paper.Path()
+      path.moveTo(cx, cy)
+      path.arc([cx, cy], radius, currentAngle * Math.PI / 180, endAngle * Math.PI / 180)
+      path.closePath()
+      path.fillColor = new paper.Color(item.color || colors[index % colors.length])
+      elements.push({ type: 'path', id: path.id })
+
+      if (showLabels && percentage > 0.05) {
+        const midAngle = (currentAngle + endAngle) / 2
+        const midRad = midAngle * Math.PI / 180
+        const labelX = cx + radius * 0.7 * Math.cos(midRad)
+        const labelY = cy + radius * 0.7 * Math.sin(midRad)
+        const labelText = new paper.PointText({
+          point: [labelX, labelY + 4],
+          content: `${Math.round(percentage * 100)}%`,
+          fontSize: 11,
+          fillColor: new paper.Color('#ffffff'),
+          justification: 'center',
+          fontWeight: 'bold'
+        })
+        elements.push({ type: 'text', id: labelText.id })
+      }
+
+      currentAngle = endAngle
+    })
+  }
+
+  return { success: true, elements, type: 'chart' }
+}
+
+/**
+ * 创建水印组件
+ */
+function createWatermarkComponent(project, canvas, {
+  text, cx, cy, color = 'rgba(0,0,0,0.1)', fontSize = 48,
+  fontFamily = 'sans-serif', opacity = 0.1, rotation = 0, align = 'center'
+}) {
+  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))
+  }
+
+  return { success: true, elements: [{ type: 'text', id: label.id }], type: 'watermark' }
+}
+
+/**
+ * 创建表格组件
+ */
+function createTableComponent(project, canvas, {
+  x, y, width, columns = [], rows = [], rowHeight = 36,
+  headerBg = '#f0f0f0', headerColor = '#333333', borderColor = '#e0e0e0',
+  cellColor = '#333333', fontSize = 12, headerFontSize = 13, striped = true, stripeColor = '#fafafa'
+}) {
+  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
+  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
+  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
+      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'
+    })
+    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
+      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
+    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'
+      })
+      elements.push({ type: 'text', id: cellText.id })
+      cellX += colWidth
+    })
+  })
+
+  return { success: true, elements, width, height: totalHeight, type: 'table' }
+}