feat: 为亚克力机箱-单生成5张主图及转换脚本

2026-04-04 22:12:53 +08:00
parent 4277fa4ee5
commit cad20914cc
22 changed files with 3159 additions and 6 deletions
--- a/.workbuddy/skills/product-detail-designer/SKILL.md
+++ b/.workbuddy/skills/product-detail-designer/SKILL.md
@@ -0,0 +1,65 @@
+---
+name: product-detail-designer
+description: 设计电商产品的详情页。当用户需要为产品生成详情页HTML、批量渲染SKU页面、或处理产品图片时使用此技能。
+---
+
+# Product Detail Designer
+
+## 概述
+
+根据产品的 SKU 和配置规范，生成对应的产品详情页 HTML，并转换为 PNG 图片。自动化处理从配置数据到最终展示页面的完整流程。
+
+## 使用场景
+
+- 有产品种类或 SKU 变化，需要重新生成详情页
+- 有产品图片变化，需要更新详情页
+- 需要批量为多个 SKU 生成对应的详情页
+
+## 工作流程
+
+### 步骤 1: 读取 SKU 配置
+
+从 `产品` 目录下找到对应的产品目录
+
+
+### 步骤 2: 生成 HTML 文件   
+
+#### 详情页组成部分
+- 购买须知
+    - 亚克力机箱需要自己组装，店铺会提供安装视频
+    - 受成本限制，产品无法做到十全十美，完美主义者慎拍
+- 配置清单
+- 功能描述
+- 产品实拍图
+- 配件清单
+- 包装展示
+- 常见问题
+    1. 产品是否支持双CPU？
+    2. 产品是否支持双内存条
+
+- 严格按照详情页组成生成详情页，多余的删除掉
+- 需要用的产品图片，都放在对应产品目录的image目录下
+- html 按照宽750的分辨率生成
+- 一个产品有多个sku,但一个产品只需要一个详情页，不需要为每个sku生成详情页
+- 详情页放到每个产品对应的`详情`目录下
+- 配色采用绿色清晰的风格
+
+
+
+
+### 步骤 3: HTML 转 PNG 图片
+
+使用 `image-tools` 技能的 `convert-html-to-png.js` 脚本：
+
+```bash
+cd ../image-tools/scripts
+node convert-html-to-png.js
+```
+
+### 步骤 4: 裁剪图片水印
+
+使用 `image-tools` 技能的 `remove-watermark.js` 脚本：
+
+```bash
+node remove-watermark.js
+```
--- a/.workbuddy/skills/product-detail-designer/scripts/render.js
+++ b/.workbuddy/skills/product-detail-designer/scripts/render.js
@@ -0,0 +1,133 @@
+const fs = require('fs');
+const path = require('path');
+
+// SKU 字段映射表
+const FIELD_MAP = {
+    '{{PRODUCT_NAME}}': 'productName',
+    '{{PRODUCT_SUBTITLE}}': 'productSubtitle',
+    '{{SKU_CODE}}': 'skuCode',
+    '{{CPU}}': 'cpu',
+    '{{MEMORY}}': 'memory',
+    '{{STORAGE}}': 'storage',
+    '{{CASE}}': 'case',
+    '{{POWER}}': 'power',
+    '{{CABLE}}': 'cable',
+    '{{BATTERY}}': 'battery',
+    '{{ETHERNET_CABLE}}': 'ethernetCable',
+    '{{SHIPPING_FEE}}': 'shippingFee',
+    '{{PACKAGING_FEE}}': 'packagingFee',
+    '{{ASSEMBLY_FEE}}': 'assemblyFee',
+    '{{TOTAL_COST}}': 'totalCost',
+    '{{RETAIL_PRICE}}': 'retailPrice',
+    '{{NOTE}}': 'note'
+};
+
+// 从 SKU markdown 文件解析字段
+function parseSkuFile(skuPath) {
+    const content = fs.readFileSync(skuPath, 'utf-8');
+    const data = {};
+
+    content.split('\n').forEach(line => {
+        // 匹配格式: | **字段名** | 值 | 价格 |
+        const match = line.match(/\|\s*\*\*(.+?)\*\*\s*\|\s*(.+?)\s*\|/);
+        if (match) {
+            const [, fieldName, value] = match;
+            data[fieldName.trim()] = value.trim();
+        }
+    });
+
+    return data;
+}
+
+// 将 SKU 数据映射为模板变量
+function mapSkuToVariables(skuData) {
+    const cpu = skuData['CPU'] || '';
+    const memory = skuData['内存'] || '';
+    const storage = skuData['系统盘'] || '';
+    const caseType = skuData['机箱'] || '';
+
+    return {
+        '{{PRODUCT_NAME}}': `飞牛NAS ${caseType}`,
+        '{{PRODUCT_SUBTITLE}}': '亚克力机箱 透明系列',
+        '{{SKU_CODE}}': skuData['产品型号'] || '',
+        '{{CPU}}': cpu,
+        '{{MEMORY}}': memory,
+        '{{STORAGE}}': storage,
+        '{{CASE}}': caseType,
+        '{{POWER}}': skuData['电源'] || '电源-60W',
+        '{{CABLE}}': skuData['硬盘线'] || '硬盘线-单',
+        '{{BATTERY}}': skuData['电池'] || '电池',
+        '{{ETHERNET_CABLE}}': skuData['网线'] || '网线',
+        '{{SHIPPING_FEE}}': skuData['运费']?.replace('¥', '') || '10',
+        '{{PACKAGING_FEE}}': skuData['包装费']?.replace('¥', '') || '5',
+        '{{ASSEMBLY_FEE}}': skuData['装机费']?.replace('¥', '') || '10',
+        '{{TOTAL_COST}}': skuData['总成本']?.replace('¥', '') || '0',
+        '{{RETAIL_PRICE}}': skuData['建议零售价']?.replace('¥', '') || '0',
+        '{{NOTE}}': skuData['备注'] || ''
+    };
+}
+
+// 渲染 HTML 模板
+function renderTemplate(templatePath, variables) {
+    let html = fs.readFileSync(templatePath, 'utf-8');
+
+    Object.entries(variables).forEach(([placeholder, value]) => {
+        html = html.split(placeholder).join(value);
+    });
+
+    return html;
+}
+
+// 主函数：生成亚克力单详情页
+function generateDetailPages(skuFilePath, outputDir) {
+    const skuData = parseSkuFile(skuFilePath);
+    const variables = mapSkuToVariables(skuData);
+
+    const skuCode = variables['{{SKU_CODE}}'];
+    const productType = '亚克力单';
+    const templateDir = path.join(__dirname, '..', 'assets', 'templates', productType);
+
+    // 创建输出目录
+    const productOutputDir = path.join(outputDir, skuCode);
+    if (!fs.existsSync(productOutputDir)) {
+        fs.mkdirSync(productOutputDir, { recursive: true });
+    }
+
+    // 模板列表
+    const templates = [
+        '配置清单-1.html',
+        '配置清单-2.html',
+        '商品卖点.html',
+        '功能描述.html',
+        '使用场景.html',
+        '配件清单.html',
+        '包装展示.html'
+    ];
+
+    templates.forEach(template => {
+        const templatePath = path.join(templateDir, template);
+        if (!fs.existsSync(templatePath)) {
+            console.log(`跳过（模板不存在）: ${template}`);
+            return;
+        }
+
+        const html = renderTemplate(templatePath, variables);
+        const outputPath = path.join(productOutputDir, template);
+        fs.writeFileSync(outputPath, html, 'utf-8');
+        console.log(`已生成: ${outputPath}`);
+    });
+
+    console.log(`\n完成！共生成 ${templates.length} 个 HTML 文件到: ${productOutputDir}`);
+}
+
+// 使用示例
+const skuFile = process.argv[2];
+const outputDir = process.argv[3] || path.join(__dirname, '..', '..', '..', '产品', '飞牛 NAS', 'fyd-亚克力机箱 - 单', '详情');
+
+if (!skuFile) {
+    console.log('用法: node render.js <sku文件路径> [输出目录]');
+    console.log('示例: node render.js ../产品/飞牛NAS/fyd-亚克力机箱 - 单/sku/亚克力-单-AMD-A4-2G-16G.md');
+    process.exit(1);
+}
+
+generateDetailPages(skuFile, outputDir);