foliko 1.1.6 → 1.1.8

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

@@ -3,24 +3,30 @@
  * 支持左右分栏、三栏、四栏等多种布局
  */
 
-const createColumns = (ctx) => ({
-  /**
-   * @param {Object} params
-   * @param {number} params.x - 起始X坐标
-   * @param {number} params.y - 起始Y坐标
-   * @param {number} params.width - 总宽度
-   * @param {number} params.height - 总高度
-   * @param {number} [params.columns=2] - 列数
-   * @param {number} [params.gap=20] - 列间距
-   * @param {string} [params.background] - 背景色
-   * @param {string} [params.borderColor] - 边框颜色
-   * @param {number} [params.borderWidth] - 边框宽度
-   * @param {number} [params.radius=0] - 圆角
-   * @param {Array} [params.items] - 列内容配置 [{widthRatio, content}]
-   * @param {string} [params.direction='horizontal'] - 排列方向: horizontal, vertical
-   * @param {string} [params.align='top'] - 垂直对齐: top, center, bottom
-   */
-  draw({
+const paper = require('paper')
+
+/**
+ * 创建分栏布局组件
+ * 
+ * @param {Object} project - Paper.js 项目
+ * @param {Object} canvas - 画布对象
+ * @param {Object} params - 组件参数
+ * @param {number} params.x - 起始X坐标
+ * @param {number} params.y - 起始Y坐标
+ * @param {number} params.width - 总宽度
+ * @param {number} params.height - 总高度
+ * @param {number} [params.columns=2] - 列数
+ * @param {number} [params.gap=20] - 列间距
+ * @param {string} [params.background] - 背景色
+ * @param {string} [params.borderColor] - 边框颜色
+ * @param {number} [params.borderWidth] - 边框宽度
+ * @param {number} [params.radius=0] - 圆角
+ * @param {Array} [params.items] - 列内容配置 [{widthRatio, content}]
+ * @param {string} [params.direction='horizontal'] - 排列方向: horizontal, vertical
+ * @param {string} [params.align='top'] - 垂直对齐: top, center, bottom
+ */
+function createColumns(project, canvas, params) {
+  const {
     x,
     y,
     width,
@@ -31,77 +37,85 @@ const createColumns = (ctx) => ({
     borderColor,
     borderWidth = 1,
     radius = 0,
-    items = [],
     direction = 'horizontal',
     align = 'top'
-  }) {
-    const elements = []
-    
-    // 计算每列宽度
-    const totalGap = gap * (columns - 1)
-    const columnWidth = (width - totalGap) / columns
-    
-    // 绘制背景
-    if (background) {
-      const bg = new ctx.Path.Rectangle({
-        point: [x, y],
-        size: [width, height],
-        radius: radius
-      })
-      bg.fillColor = new ctx.Color(background)
-      elements.push({ type: 'rectangle', id: bg.id })
-    }
-    
-    // 绘制边框
-    if (borderColor && borderWidth > 0) {
-      const border = new ctx.Path.Rectangle({
-        point: [x, y],
-        size: [width, height],
-        radius: radius
-      })
-      border.fillColor = new ctx.Color('transparent')
-      border.strokeColor = new ctx.Color(borderColor)
-      border.strokeWidth = borderWidth
-      elements.push({ type: 'rectangle', id: border.id })
+  } = params
+
+  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)
+    if (project && project.activeLayer) {
+      project.activeLayer.addChild(bg)
     }
-    
-    // 生成分割线
-    for (let i = 1; i < columns; i++) {
-      const lineX = x + columnWidth * i + gap * (i - 1) + gap / 2
-      const line = new ctx.Path.Line({
-        from: [lineX, y + 20],
-        to: [lineX, y + height - 20]
-      })
-      line.strokeColor = new ctx.Color('#e0e0e0')
-      line.strokeWidth = 1
-      elements.push({ type: 'line', id: line.id })
+    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
+    if (project && project.activeLayer) {
+      project.activeLayer.addChild(border)
     }
-    
-    // 返回列位置信息
-    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
-      })
+    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
+    if (project && project.activeLayer) {
+      project.activeLayer.addChild(line)
     }
+    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
     
-    return {
-      success: true,
-      elements,
-      columnPositions,
-      columnWidth,
-      totalWidth: width,
-      totalHeight: height,
-      type: 'columns'
-    }
+    columnPositions.push({
+      index: i,
+      x: colX,
+      y: colY,
+      width: columnWidth,
+      height: height
+    })
+  }
+  
+  return {
+    success: true,
+    elements,
+    columnPositions,
+    columnWidth,
+    totalWidth: width,
+    totalHeight: height,
+    type: 'columns'
   }
-})
+}
 
 module.exports = createColumns

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

@@ -3,24 +3,30 @@
  * 支持任意行列的网格布局
  */
 
-const createGrid = (ctx) => ({
-  /**
-   * @param {Object} params
-   * @param {number} params.x - 起始X坐标
-   * @param {number} params.y - 起始Y坐标
-   * @param {number} params.width - 总宽度
-   * @param {number} params.height - 总高度
-   * @param {number} [params.columns=3] - 列数
-   * @param {number} [params.rows=2] - 行数
-   * @param {number} [params.gapX=20] - 水平间距
-   * @param {number} [params.gapY=20] - 垂直间距
-   * @param {string} [params.background] - 背景色
-   * @param {string} [params.borderColor] - 边框颜色
-   * @param {number} [params.borderWidth] - 边框宽度
-   * @param {number} [params.radius=0] - 圆角
-   * @param {string} [params.direction='row'] - 排列方向: row(行优先), column(列优先)
-   */
-  draw({
+const paper = require('paper')
+
+/**
+ * 创建网格布局组件
+ * 
+ * @param {Object} project - Paper.js 项目
+ * @param {Object} canvas - 画布对象
+ * @param {Object} params - 组件参数
+ * @param {number} params.x - 起始X坐标
+ * @param {number} params.y - 起始Y坐标
+ * @param {number} params.width - 总宽度
+ * @param {number} params.height - 总高度
+ * @param {number} [params.columns=3] - 列数
+ * @param {number} [params.rows=2] - 行数
+ * @param {number} [params.gapX=20] - 水平间距
+ * @param {number} [params.gapY=20] - 垂直间距
+ * @param {string} [params.background] - 背景色
+ * @param {string} [params.borderColor] - 边框颜色
+ * @param {number} [params.borderWidth] - 边框宽度
+ * @param {number} [params.radius=0] - 圆角
+ * @param {string} [params.direction='row'] - 排列方向: row(行优先), column(列优先)
+ */
+function createGrid(project, canvas, params) {
+  const {
     x,
     y,
     width,
@@ -34,85 +40,91 @@ const createGrid = (ctx) => ({
     borderWidth = 1,
     radius = 0,
     direction = 'row'
-  }) {
-    const elements = []
-    
-    // 计算单元格尺寸
-    const totalGapX = gapX * (columns - 1)
-    const totalGapY = gapY * (rows - 1)
-    const cellWidth = (width - totalGapX) / columns
-    const cellHeight = (height - totalGapY) / rows
-    
-    // 绘制背景
-    if (background) {
-      const bg = new ctx.Path.Rectangle({
-        point: [x, y],
-        size: [width, height],
-        radius: radius
-      })
-      bg.fillColor = new ctx.Color(background)
-      elements.push({ type: 'rectangle', id: bg.id })
+  } = params
+
+  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)
+    if (project && project.activeLayer) {
+      project.activeLayer.addChild(bg)
     }
-    
-    // 绘制边框
-    if (borderColor && borderWidth > 0) {
-      const border = new ctx.Path.Rectangle({
-        point: [x, y],
-        size: [width, height],
-        radius: radius
-      })
-      border.fillColor = new ctx.Color('transparent')
-      border.strokeColor = new ctx.Color(borderColor)
-      border.strokeWidth = borderWidth
-      elements.push({ type: 'rectangle', id: border.id })
+    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
+    if (project && project.activeLayer) {
+      project.activeLayer.addChild(border)
     }
+    elements.push({ type: 'rectangle', id: border.id })
+  }
+  
+  // 生成网格位置信息
+  const cellPositions = []
+  const totalCells = columns * rows
+  
+  for (let i = 0; i < totalCells; i++) {
+    let col, row
     
-    // 生成网格位置信息
-    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
-      })
+    if (direction === 'row') {
+      col = i % columns
+      row = Math.floor(i / columns)
+    } else {
+      row = i % rows
+      col = Math.floor(i / rows)
     }
     
-    // 返回网格布局信息
-    return {
-      success: true,
-      elements,
-      cellPositions,
-      cellWidth,
-      cellHeight,
-      columns,
-      rows,
-      totalCells,
-      totalWidth: width,
-      totalHeight: height,
-      type: 'grid'
-    }
+    const cellX = x + col * (cellWidth + gapX)
+    const cellY = y + row * (cellHeight + gapY)
+    
+    cellPositions.push({
+      index: i,
+      column: col,
+      row: row,
+      x: cellX,
+      y: cellY,
+      width: cellWidth,
+      height: cellHeight,
+      centerX: cellX + cellWidth / 2,
+      centerY: cellY + cellHeight / 2
+    })
+  }
+  
+  // 返回网格布局信息
+  return {
+    success: true,
+    elements,
+    cellPositions,
+    cellWidth,
+    cellHeight,
+    columns,
+    rows,
+    totalCells,
+    totalWidth: width,
+    totalHeight: height,
+    type: 'grid'
   }
-})
+}
 
 module.exports = createGrid

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

@@ -3,6 +3,7 @@
  */
 
 const paper = require('paper')
+const { getFontFallbackChain, validateFont } = require('../fonts')
 
 /**
  * 创建高亮文字
@@ -30,7 +31,7 @@ function createHighlightText(project, args) {
     point: [x, y + fontSize],
     content: text,
     fontSize,
-    fontFamily: fontFamily || 'sans-serif',
+    fontFamily: getFontFallbackChain(fontFamily, text).join(', '),
     fillColor: new paper.Color(color),
     justification: 'left',
   })