foliko 1.1.1 → 1.1.2

package/skills/poster-guide/SKILL.md

@@ -637,13 +637,263 @@ ext_call({
 | `add_poster_list_item`    | 列表项   |
 | `add_poster_notification` | 通知     |
 
+### 设计组件（新增）
+
+| 工具                        | 说明      |
+| --------------------------- | --------- |
+| `add_poster_button`         | 按钮      |
+| `add_poster_icon`           | 图标      |
+| `add_poster_qrcode`         | 二维码    |
+| `add_poster_frame`          | 装饰边框  |
+| `add_poster_bubble`         | 对话气泡  |
+| `add_poster_ribbon`         | 丝带/飘带 |
+| `add_poster_seal`           | 印章      |
+| `add_poster_highlight_text` | 高亮文字  |
+| `add_poster_barcode`        | 条形码    |
+
 ### 模板
 
-| 工具                     | 说明     |
-| ------------------------ | -------- |
-| `generate_poster`        | 一键生成 |
-| `list_poster_templates`  | 列出模板 |
-| `list_poster_components` | 列出组件 |
+| 工具                     | 说明         |
+| ------------------------ | ------------ |
+| `generate_poster`        | 一键生成     |
+| `list_poster_templates`  | 列出模板     |
+| `list_poster_components` | 列出组件     |
+| `list_poster_presets`    | 列出预设尺寸 |
+
+---
+
+## 🆕 新增设计组件详解
+
+### 按钮 (button)
+
+支持图标、渐变、阴影的现代化按钮。
+
+```javascript
+ext_call({
+  plugin: 'poster',
+  tool: 'add_poster_button',
+  args: {
+    x: 960,
+    y: 800,
+    width: 280,
+    height: 70,
+    text: '立即购买',
+    fontSize: 28,
+    color: '#ffffff',
+    backgroundColor: '#3b82f6',
+    borderColor: '#2563eb',
+    borderWidth: 2,
+    radius: 35,
+    shadow: { color: '#3b82f6', blur: 20, offsetX: 0, offsetY: 8 },
+    gradient: { colors: ['#3b82f6', '#8b5cf6'] },
+    icon: '🛒',
+    iconPosition: 'left',
+  },
+});
+```
+
+### 图标 (icon)
+
+支持 emoji 和图片的图标组件。
+
+```javascript
+ext_call({
+  plugin: 'poster',
+  tool: 'add_poster_icon',
+  args: {
+    x: 100,
+    y: 100,
+    size: 80,
+    icon: '⭐',
+    color: '#fbbf24',
+    backgroundColor: '#1e293b',
+    borderColor: '#fbbf24',
+    borderWidth: 2,
+    radius: 16,
+    shadow: { color: '#000000', blur: 10, offsetX: 2, offsetY: 4 },
+  },
+});
+```
+
+### 二维码 (qrcode)
+
+本地生成二维码，支持自定义颜色和 Logo。
+
+```javascript
+ext_call({
+  plugin: 'poster',
+  tool: 'add_poster_qrcode',
+  args: {
+    x: 1600,
+    y: 700,
+    size: 200,
+    content: 'https://example.com',
+    color: '#0f172a',
+    backgroundColor: '#ffffff',
+    logo: 'https://example.com/logo.png',
+    logoSize: 40,
+  },
+});
+```
+
+### 装饰边框 (frame)
+
+多种边框样式：simple、double、dashed、dotted、corner、vintage、modern、floral。
+
+```javascript
+ext_call({
+  plugin: 'poster',
+  tool: 'add_poster_frame',
+  args: {
+    x: 100,
+    y: 100,
+    width: 500,
+    height: 400,
+    style: 'vintage', // 边框样式
+    color: '#c9a227',
+    borderWidth: 3,
+    radius: 8,
+    padding: 20,
+  },
+});
+```
+
+**style 可选值：**
+
+- `simple` - 简单矩形
+- `double` - 双线边框
+- `dashed` - 虚线边框
+- `dotted` - 点线边框
+- `corner` - 四角装饰
+- `vintage` - 复古边框（双线+角装饰）
+- `modern` - 现代边框（粗细交替）
+- `floral` - 花纹边框
+
+### 对话气泡 (bubble)
+
+带尾巴的对话气泡组件。
+
+```javascript
+ext_call({
+  plugin: 'poster',
+  tool: 'add_poster_bubble',
+  args: {
+    x: 200,
+    y: 500,
+    width: 400,
+    height: 120,
+    text: '你好！有什么可以帮助你的吗？',
+    fontSize: 24,
+    color: '#1e293b',
+    backgroundColor: '#ffffff',
+    borderColor: '#e2e8f0',
+    borderWidth: 1,
+    radius: 20,
+    tailDirection: 'bottom', // 尾巴方向: bottom, top, left, right
+    tailPosition: 'left', // 尾巴位置: left, center, right
+    shadow: { color: '#000000', blur: 10, offsetX: 3, offsetY: 3 },
+  },
+});
+```
+
+### 丝带/飘带 (ribbon)
+
+三种样式：fold（折叠）、diagonal（对角）、corner（角落）。
+
+```javascript
+ext_call({
+  plugin: 'poster',
+  tool: 'add_poster_ribbon',
+  args: {
+    x: 100,
+    y: 50,
+    width: 200,
+    text: '限时特惠',
+    fontSize: 24,
+    color: '#ffffff',
+    backgroundColor: '#e74c3c',
+    borderColor: '#c0392b',
+    borderWidth: 2,
+    style: 'fold', // fold, diagonal, corner
+    position: 'top',
+    shadow: { color: '#000000', blur: 8, offsetX: 3, offsetY: 3 },
+  },
+});
+```
+
+### 印章 (seal)
+
+印章效果组件，支持多种形状。
+
+```javascript
+ext_call({
+  plugin: 'poster',
+  tool: 'add_poster_seal',
+  args: {
+    x: 1700,
+    y: 900,
+    size: 120,
+    text: '正品',
+    fontSize: 20,
+    color: '#e74c3c',
+    style: 'circle', // circle, square, star, hexagon
+    borderWidth: 4,
+  },
+});
+```
+
+### 高亮文字 (highlightText)
+
+多种高亮效果：marker、underline、background、stroke、neon。
+
+```javascript
+ext_call({
+  plugin: 'poster',
+  tool: 'add_poster_highlight_text',
+  args: {
+    x: 300,
+    y: 400,
+    text: '重要通知',
+    fontSize: 60,
+    fontFamily: 'sans-serif',
+    color: '#1e293b',
+    highlightColor: '#fbbf24',
+    highlightStyle: 'marker', // marker, underline, background, stroke, neon
+    highlightWidth: 20,
+    strokeWidth: 3,
+    shadow: { color: '#fbbf24', blur: 15, offsetX: 2, offsetY: 2 },
+  },
+});
+```
+
+**highlightStyle 可选值：**
+
+- `marker` - 荧光笔效果（倾斜半透明矩形）
+- `underline` - 下划线
+- `background` - 背景色块
+- `stroke` - 文字描边
+- `neon` - 霓虹发光效果
+
+### 条形码 (barcode)
+
+生成条形码，支持简单条形码和 API 条形码。
+
+```javascript
+ext_call({
+  plugin: 'poster',
+  tool: 'add_poster_barcode',
+  args: {
+    x: 1500,
+    y: 900,
+    width: 300,
+    height: 100,
+    content: '123456789012',
+    showText: true,
+    textColor: '#1e293b',
+    fontSize: 16,
+  },
+});
+```
 
 ---
 
@@ -926,6 +1176,248 @@ ext_call({
 });
 ```
 
+### 示例 4：产品宣传海报（使用新增组件）
+
+展示 button、icon、qrcode、frame、bubble、ribbon、seal、highlightText、barcode 等新组件。
+
+```javascript
+// 1. 创建画布
+ext_call({
+  plugin: 'poster',
+  tool: 'create_poster_canvas',
+  args: { width: 1200, height: 1600, background: '#f8fafc' },
+});
+
+// 2. 装饰边框
+ext_call({
+  plugin: 'poster',
+  tool: 'add_poster_frame',
+  args: {
+    x: 40,
+    y: 40,
+    width: 1120,
+    height: 1520,
+    style: 'vintage',
+    color: '#c9a227',
+    borderWidth: 4,
+    padding: 30,
+  },
+});
+
+// 3. 丝带标签
+ext_call({
+  plugin: 'poster',
+  tool: 'add_poster_ribbon',
+  args: {
+    x: 800,
+    y: 80,
+    width: 200,
+    text: '新品上市',
+    fontSize: 22,
+    backgroundColor: '#e74c3c',
+    style: 'fold',
+  },
+});
+
+// 4. 主标题（高亮文字）
+ext_call({
+  plugin: 'poster',
+  tool: 'add_poster_highlight_text',
+  args: {
+    x: 100,
+    y: 200,
+    text: '智能手表 Pro',
+    fontSize: 72,
+    fontFamily: 'sans-serif',
+    color: '#1e293b',
+    highlightColor: '#fbbf24',
+    highlightStyle: 'marker',
+  },
+});
+
+// 5. 图标装饰
+ext_call({
+  plugin: 'poster',
+  tool: 'add_poster_icon',
+  args: { x: 100, y: 280, size: 60, icon: '⌚', backgroundColor: '#1e293b', radius: 12 },
+});
+ext_call({
+  plugin: 'poster',
+  tool: 'add_poster_icon',
+  args: { x: 180, y: 280, size: 60, icon: '🔋', backgroundColor: '#10b981', radius: 12 },
+});
+ext_call({
+  plugin: 'poster',
+  tool: 'add_poster_icon',
+  args: { x: 260, y: 280, size: 60, icon: '💧', backgroundColor: '#3b82f6', radius: 12 },
+});
+
+// 6. 对话气泡
+ext_call({
+  plugin: 'poster',
+  tool: 'add_poster_bubble',
+  args: {
+    x: 100,
+    y: 400,
+    width: 500,
+    height: 100,
+    text: '限时特惠，仅剩 3 天！',
+    fontSize: 24,
+    backgroundColor: '#fef3c7',
+    borderColor: '#fbbf24',
+    tailDirection: 'bottom',
+    tailPosition: 'left',
+  },
+});
+
+// 7. 产品介绍文字
+ext_call({
+  plugin: 'poster',
+  tool: 'add_poster_text',
+  args: {
+    x: 100,
+    y: 580,
+    text: '全新智能手表，支持心率监测、GPS定位、防水50米。',
+    fontSize: 28,
+    color: '#64748b',
+  },
+});
+
+// 8. 印章认证
+ext_call({
+  plugin: 'poster',
+  tool: 'add_poster_seal',
+  args: {
+    x: 900,
+    y: 500,
+    size: 100,
+    text: '正品',
+    fontSize: 18,
+    color: '#e74c3c',
+    style: 'circle',
+  },
+});
+
+// 9. CTA 按钮
+ext_call({
+  plugin: 'poster',
+  tool: 'add_poster_button',
+  args: {
+    x: 350,
+    y: 700,
+    width: 500,
+    height: 80,
+    text: '立即购买 →',
+    fontSize: 32,
+    backgroundColor: '#1e293b',
+    gradient: { colors: ['#1e293b', '#334155'] },
+    radius: 40,
+    shadow: { color: '#1e293b', blur: 20, offsetY: 8 },
+  },
+});
+
+// 10. 统计卡片
+ext_call({
+  plugin: 'poster',
+  tool: 'add_poster_stat_card',
+  args: {
+    x: 100,
+    y: 850,
+    title: '1999',
+    subtitle: '原价',
+    icon: '💰',
+    color: '#94a3b8',
+    background: '#f1f5f9',
+    borderColor: '#e2e8f0',
+  },
+});
+ext_call({
+  plugin: 'poster',
+  tool: 'add_poster_stat_card',
+  args: {
+    x: 350,
+    y: 850,
+    title: '1499',
+    subtitle: '限时价',
+    icon: '🔥',
+    color: '#e74c3c',
+    background: '#fef2f2',
+    borderColor: '#fecaca',
+  },
+});
+ext_call({
+  plugin: 'poster',
+  tool: 'add_poster_stat_card',
+  args: {
+    x: 600,
+    y: 850,
+    title: '4.9',
+    subtitle: '评分',
+    icon: '⭐',
+    color: '#f59e0b',
+    background: '#fffbeb',
+    borderColor: '#fde68a',
+  },
+});
+
+// 11. 分隔线
+ext_call({
+  plugin: 'poster',
+  tool: 'add_poster_divider',
+  args: { x: 100, y: 1050, width: 1000, color: '#e2e8f0', style: 'dashed' },
+});
+
+// 12. 二维码
+ext_call({
+  plugin: 'poster',
+  tool: 'add_poster_qrcode',
+  args: {
+    x: 150,
+    y: 1150,
+    size: 180,
+    content: 'https://example.com/shop/watch-pro',
+    color: '#1e293b',
+    backgroundColor: '#ffffff',
+  },
+});
+
+// 13. 条形码
+ext_call({
+  plugin: 'poster',
+  tool: 'add_poster_barcode',
+  args: {
+    x: 700,
+    y: 1200,
+    width: 300,
+    height: 80,
+    content: '6923456789012',
+    showText: true,
+    textColor: '#1e293b',
+  },
+});
+
+// 14. 页脚文字
+ext_call({
+  plugin: 'poster',
+  tool: 'add_poster_text',
+  args: {
+    x: 600,
+    y: 1450,
+    text: '扫描二维码访问官网',
+    fontSize: 20,
+    color: '#94a3b8',
+    align: 'center',
+  },
+});
+
+// 15. 导出
+ext_call({
+  plugin: 'poster',
+  tool: 'export_poster_canvas',
+  args: { filename: 'product-poster', format: 'png', outputDir: 'output' },
+});
+```
+
 ---
 
 ## 🔗 参考资源

package/src/core/agent-chat.js

@@ -1096,12 +1096,18 @@ ${truncatedContent}${truncatedNote}
             return messages;
           }
 
-          // 2. 消息数量超过阈值才修剪
+          // 2. 检查并移除不完整的 tool-call 和对应的 tool result
+          const validated = this._validateToolCallsForPrepare(messages);
+          if (validated !== messages) {
+            return validated;
+          }
+
+          // 3. 消息数量超过阈值才修剪
           if (messages.length <= 50) {
             return messages;
           }
 
-          // 3. 保留配对完整的消息
+          // 4. 保留配对完整的消息
           const pruned = this._prepareMessagesForAI(messages);
           return pruned;
         } catch (err) {
@@ -1146,8 +1152,6 @@ ${truncatedContent}${truncatedNote}
         stepCount: result.stepCount || 1,
       };
     } finally {
-      // 校验并修复消息中的不完整工具调用
-      this._validateToolCalls(messages);
       // 确保保存聊天历史到 session（无论成功还是失败）
       messageStore.save();
     }
@@ -1207,12 +1211,18 @@ ${truncatedContent}${truncatedNote}
             return messages;
           }
 
-          // 2. 消息数量超过阈值才修剪
+          // 2. 检查并移除不完整的 tool-call 和对应的 tool result
+          const validated = this._validateToolCallsForPrepare(messages);
+          if (validated !== messages) {
+            return validated;
+          }
+
+          // 3. 消息数量超过阈值才修剪
           if (messages.length <= 50) {
             return messages;
           }
 
-          // 3. 保留配对完整的消息
+          // 4. 保留配对完整的消息
           const pruned = this._prepareMessagesForAI(messages);
           return pruned;
         } catch (err) {
@@ -1269,8 +1279,6 @@ ${truncatedContent}${truncatedNote}
       this.emit('error', { error: err.message });
       yield { type: 'error', error: err.message };
     } finally {
-      // 校验并修复消息中的不完整工具调用
-      this._validateToolCalls(messages);
       // 确保保存聊天历史到 session（无论成功还是失败）
       messageStore.save();
     }
@@ -1462,6 +1470,19 @@ ${truncatedContent}${truncatedNote}
           delete item.toolName;
           delete item.input;
           fixedCount++;
+        } else {
+          // 检查 JSON 是否能完整解析
+          try {
+            JSON.parse(trimmed);
+          } catch (e) {
+            // JSON 解析失败，说明是不完整的 JSON
+            item.type = 'text';
+            item.text = `（工具调用 ${item.toolName} 参数不完整（${e.message}），已跳过）`;
+            delete item.toolCallId;
+            delete item.toolName;
+            delete item.input;
+            fixedCount++;
+          }
         }
       }
     }
@@ -1471,6 +1492,118 @@ ${truncatedContent}${truncatedNote}
     }
   }
 
+  /**
+   * 在 prepareStep 中检查并移除不完整的 tool-call 和对应的 tool result
+   * 返回修改后的消息数组（如果没修改则返回原数组）
+   * @param {Array} messages - 消息列表
+   * @returns {Array} 修改后的消息数组或原数组
+   * @private
+   */
+  _validateToolCallsForPrepare(messages) {
+    // 收集不完整的 toolCallId
+    const invalidToolCallIds = new Set();
+
+    for (const msg of messages) {
+      if (msg.role !== 'assistant' || !Array.isArray(msg.content)) {
+        continue;
+      }
+
+      for (const item of msg.content) {
+        if (item.type !== 'tool-call' || !item.toolCallId) {
+          continue;
+        }
+
+        const input = item.input;
+        if (typeof input !== 'string') {
+          continue;
+        }
+
+        // 检查 input 是否是有效的 JSON
+        const trimmed = input.trim();
+        let isInvalid = false;
+
+        if (trimmed === '{' || trimmed === '' || !trimmed.startsWith('{')) {
+          isInvalid = true;
+        } else {
+          try {
+            JSON.parse(trimmed);
+          } catch (e) {
+            isInvalid = true;
+          }
+        }
+
+        if (isInvalid) {
+          invalidToolCallIds.add(item.toolCallId);
+          logger.warn(`Found incomplete tool call: ${item.toolName} (${item.toolCallId})`);
+        }
+      }
+    }
+
+    // 如果没有不完整的 tool-call，返回原数组
+    if (invalidToolCallIds.size === 0) {
+      return messages;
+    }
+
+    // 构建新的消息数组，移除不完整的 tool-call 和对应的 tool result
+    const result = [];
+
+    for (const msg of messages) {
+      if (msg.role === 'tool') {
+        // 检查 tool result 是否对应不完整的 tool-call
+        if (Array.isArray(msg.content)) {
+          const newContent = [];
+          for (const item of msg.content) {
+            if (
+              item.type === 'tool-result' &&
+              item.toolCallId &&
+              invalidToolCallIds.has(item.toolCallId)
+            ) {
+              // 跳过这个 tool result
+              continue;
+            }
+            newContent.push(item);
+          }
+          // 如果所有 content 都被移除了，跳过这条消息
+          if (newContent.length === 0) {
+            continue;
+          }
+          // 浅拷贝消息对象
+          result.push({ ...msg, content: newContent });
+        } else {
+          result.push(msg);
+        }
+      } else if (msg.role === 'assistant') {
+        // 检查并移除 assistant 消息中的不完整 tool-call
+        if (Array.isArray(msg.content)) {
+          const newContent = [];
+          for (const item of msg.content) {
+            if (
+              item.type === 'tool-call' &&
+              item.toolCallId &&
+              invalidToolCallIds.has(item.toolCallId)
+            ) {
+              // 跳过不完整的 tool-call
+              continue;
+            }
+            newContent.push(item);
+          }
+          // 如果所有 content 都被移除了，跳过这条消息
+          if (newContent.length === 0) {
+            continue;
+          }
+          result.push({ ...msg, content: newContent });
+        } else {
+          result.push(msg);
+        }
+      } else {
+        result.push(msg);
+      }
+    }
+
+    logger.info(`Removed ${invalidToolCallIds.size} incomplete tool calls and their results`);
+    return result;
+  }
+
   /**
    * 获取 AI SDK 格式的工具
    * AI SDK 6.x 需要对象形式 { toolName: tool }