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/image-tools/SKILL.md
+++ b/.workbuddy/skills/image-tools/SKILL.md
@@ -0,0 +1,71 @@
+---
+name: image-tools
+description: 图片处理工具集，用于检查图片信息、HTML转PNG、裁剪水印等操作。当用户需要处理产品图片、转换HTML为图片、或去除图片水印时使用此技能。
+---
+
+# Image Tools
+
+## Overview
+
+提供产品图片处理相关功能，包括检查图片元信息、HTML页面截图、裁剪水印等操作。适用于产品文档和图片批量处理场景。
+
+## Quick Start
+
+使用前需安装依赖：
+
+```bash
+cd tools/image-tools/scripts
+npm install
+```
+
+## Tasks
+
+### 检查图片信息
+
+查看图片的宽度、高度、格式等元信息：
+
+```bash
+cd tools/image-tools/scripts
+node check-image-info.js
+```
+
+**用途**：批量检查产品图片尺寸，确保符合规格要求。
+
+### HTML 转 PNG
+
+将HTML文件转换为PNG图片截图：
+
+```bash
+cd tools/image-tools/scripts
+node convert-html-to-png.js
+```
+
+**用途**：将产品配置清单HTML转换为PNG图片，用于产品展示。
+
+### 裁剪水印
+
+裁剪图片底部水印区域（默认裁剪底部300px）：
+
+```bash
+cd tools/image-tools/scripts
+node remove-watermark.js
+```
+
+**用途**：批量处理产品图片，去除底部水印。
+
+## Configuration
+
+脚本默认处理路径为 `产品/飞牛 NAS/fyd-亚克力机箱 - 单/详情` 目录。如需修改：
+
+- **check-image-info.js**: 修改 `imageDir` 变量
+- **convert-html-to-png.js**: 修改 `detailDir` 变量及文件过滤条件
+- **remove-watermark.js**: 修改 `imageDir` 和 `CROP_BOTTOM_HEIGHT` 常量
+
+## Resources
+
+### scripts/
+
+- `check-image-info.js` - 图片信息检查脚本
+- `convert-html-to-png.js` - HTML转PNG截图脚本
+- `remove-watermark.js` - 水印裁剪脚本
+- `package.json` - Node.js 依赖配置
--- a/.workbuddy/skills/image-tools/scripts/check-image-info.js
+++ b/.workbuddy/skills/image-tools/scripts/check-image-info.js
@@ -0,0 +1,27 @@
+const sharp = require('sharp');
+const path = require('path');
+const fs = require('fs');
+
+async function checkImageInfo() {
+    const imageDir = path.join(__dirname, '产品', '飞牛 NAS', 'fyd-亚克力机箱 - 单', '详情', 'image');
+    
+    const imageFiles = fs.readdirSync(imageDir).filter(file => file.endsWith('.jpg'));
+    
+    console.log('📸 图片信息检查\n');
+    
+    for (const imageFile of imageFiles) {
+        const imagePath = path.join(imageDir, imageFile);
+        const metadata = await sharp(imagePath).metadata();
+        
+        console.log(`${imageFile}:`);
+        console.log(`  宽度: ${metadata.width}px`);
+        console.log(`  高度: ${metadata.height}px`);
+        console.log(`  格式: ${metadata.format}`);
+        console.log('');
+    }
+}
+
+checkImageInfo().catch(error => {
+    console.error('💥 检查过程出错:', error);
+    process.exit(1);
+});
--- a/.workbuddy/skills/image-tools/scripts/convert-html-to-png.js
+++ b/.workbuddy/skills/image-tools/scripts/convert-html-to-png.js
@@ -0,0 +1,59 @@
+const puppeteer = require('puppeteer');
+const path = require('path');
+const fs = require('fs');
+
+async function convertHtmlToPng() {
+    console.log('🚀 启动 HTML 转 PNG 转换工具...\n');
+    
+    const browser = await puppeteer.launch({
+        headless: 'new',
+        args: ['--no-sandbox', '--disable-setuid-sandbox']
+    });
+    
+    const page = await browser.newPage();
+    
+    await page.setViewport({ width: 750, height: 1000 });
+    
+    const detailDir = 'G:\\stonelan-workspace\\membank\\产品\\飞牛 NAS\\fyd-亚克力机箱 - 单\\详情';
+    
+    const htmlFiles = fs.readdirSync(detailDir)
+        .filter(file => file.endsWith('.html') && file.includes('亚克力机箱-单'))
+        .filter(file => !file.includes('配置清单.html') || file.includes('配置清单-'));
+    
+    console.log(`📁 找到 ${htmlFiles.length} 个 HTML 文件需要转换\n`);
+    
+    for (const htmlFile of htmlFiles) {
+        try {
+            const htmlPath = path.join(detailDir, htmlFile);
+            const pngFile = htmlFile.replace('.html', '.png');
+            const pngPath = path.join(detailDir, pngFile);
+            
+            console.log(`📄 正在转换: ${htmlFile}`);
+            
+            const fileUrl = `file:///${htmlPath.replace(/\\/g, '/')}`;
+            await page.goto(fileUrl, {
+                waitUntil: 'networkidle0',
+                timeout: 10000
+            });
+            
+            await page.screenshot({
+                path: pngPath,
+                fullPage: true,
+                type: 'png'
+            });
+            
+            console.log(`✅ 已生成: ${pngFile}\n`);
+        } catch (error) {
+            console.error(`❌ 转换失败 ${htmlFile}: ${error.message}\n`);
+        }
+    }
+    
+    await browser.close();
+    
+    console.log('✨ 所有转换任务已完成！');
+}
+
+convertHtmlToPng().catch(error => {
+    console.error('💥 转换过程出错:', error);
+    process.exit(1);
+});
--- a/.workbuddy/skills/image-tools/scripts/package-lock.json
+++ b/.workbuddy/skills/image-tools/scripts/package-lock.json
--- a/.workbuddy/skills/image-tools/scripts/package.json
+++ b/.workbuddy/skills/image-tools/scripts/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "membank",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@gitee.com:xiongmaojames/membank.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "puppeteer": "^24.40.0",
+    "sharp": "^0.34.5"
+  }
+}
--- a/.workbuddy/skills/image-tools/scripts/remove-watermark.js
+++ b/.workbuddy/skills/image-tools/scripts/remove-watermark.js
@@ -0,0 +1,51 @@
+const sharp = require('sharp');
+const path = require('path');
+const fs = require('fs');
+
+const CROP_BOTTOM_HEIGHT = 300;
+
+async function removeWatermark() {
+    console.log('🖼️  开始裁剪图片水印...\n');
+    
+    const imageDir = path.join(__dirname, '产品', '飞牛 NAS', 'fyd-亚克力机箱 - 单', '详情', 'image');
+    
+    const backupDir = path.join(imageDir, 'backup');
+    
+    const imageFiles = fs.readdirSync(backupDir).filter(file => file.endsWith('.jpg'));
+    
+    console.log(`📸 找到 ${imageFiles.length} 张图片需要处理\n`);
+    console.log(`✂️  裁剪设置: 从底部裁剪 ${CROP_BOTTOM_HEIGHT}px\n`);
+    
+    for (const imageFile of imageFiles) {
+        try {
+            const backupPath = path.join(backupDir, imageFile);
+            const imagePath = path.join(imageDir, imageFile);
+            
+            console.log(`📄 正在处理: ${imageFile}`);
+            
+            const metadata = await sharp(backupPath).metadata();
+            
+            const newHeight = metadata.height - CROP_BOTTOM_HEIGHT;
+            
+            await sharp(backupPath)
+                .extract({
+                    left: 0,
+                    top: 0,
+                    width: metadata.width,
+                    height: newHeight
+                })
+                .toFile(imagePath);
+            
+            console.log(`  ✅ 已裁剪: ${metadata.width}x${metadata.height} -> ${metadata.width}x${newHeight}\n`);
+        } catch (error) {
+            console.error(`  ❌ 处理失败 ${imageFile}: ${error.message}\n`);
+        }
+    }
+    
+    console.log('✨ 所有图片处理完成！');
+}
+
+removeWatermark().catch(error => {
+    console.error('💥 处理过程出错:', error);
+    process.exit(1);
+});
--- 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);
--- a/.workbuddy/skills/product-main-image/SKILL.md
+++ b/.workbuddy/skills/product-main-image/SKILL.md
@@ -0,0 +1,49 @@
+---
+name: 商品主图设计
+description: 设计电商产品的主图。当用户需要为产品生成主图图片或海报时使用此技能。
+---
+
+# 商品主图设计
+
+## 概述
+
+-为每个产品生成主图图片
+-主图图片放到每个产品对应的`主图`目录下
+## 使用场景
+
+- 有产品主图需要更新
+
+## 工作流程
+
+### 步骤 1: 准备素材
+- 根据产品详情页，归纳出主图要展示的信息
+
+- 可以使用产品目录下`image`目录中的图片作为素材
+
+
+
+### 步骤 2: 设计主图html
+- 主图尺寸：800*800
+- 一个主图一个html
+
+
+### 步骤 3: 导出图片
+
+使用 `image-tools` 技能的 `convert-html-to-png.js` 脚本：
+
+## 主图规范
+
+
+
+## 配色参考
+
+
+
+## 字体规范
+
+
+
+## 示例模板
+
+
+
--- a/.workbuddy/skills/sku-designer/SKILL.md
+++ b/.workbuddy/skills/sku-designer/SKILL.md
@@ -0,0 +1,64 @@
+---
+name: sku设计
+description: 
+---
+
+# SKU 设计
+
+## Overview
+
+[TODO: 描述此技能的作用和使用场景]
+
+## SKU 编码规则
+
+[TODO: 定义 SKU 编码的命名规范和结构]
+
+## 产品配置模板
+
+[TODO: 定义不同产品类型的配置模板]
+
+## 设计流程
+
+[TODO: 描述 SKU 设计的标准流程]
+
+## 参考资源
+
+##  飞牛 NAS产设计原则
+### 3.5金属大配置原则
+-   3.5金属大，用于3盘位和4盘位，通过双sata转化器，主板单sata口就是3盘位，主板双sata口就是4盘位
+-   3.5金属大可安装cpu:j1900,j3160，i3-3217u,i3-5005u,3855u,1037u
+-   3.5金属大可安装内存和系统盘：  4G-32G，4G-64G，8G-64G，8G-128G
+### 3.5金属小配置原则
+-   3.5金属小可安装cpu:j1900,j3160，i3-3217u,i3-5005u,3855u,1037u
+-   3.5金属小，可安装一个2.5和一个3.5，配单sata口主板就是单3.5 ，双sata口主板就是 3.5+2.5
+-   3.5金属小可安装内存和系统盘：  4G-32G，4G-64G，8G-64G，8G-128G
+### 亚克力机箱配置原则
+-   亚克力机箱-单，可安装所有单sata口
+-   亚克力机箱-双，可安装所有双sata口
+-   亚克力机箱，可以使用2G-16G,2G-32G,4G-64G,4G-128G内存条
+-   亚克力机箱可以安装：n2840，n2930,amd-a4,1037u，j1900,j3160,i3
+## win 小主机产设计原则
+-  win小主机全部使用2.5存机箱
+### 龙虾盒子 
+- cpu 可使用：i3-5005u,3855u
+- 内存硬盘可使用：4G-64G,4G-128G,8G-128G
+- 标配无线网卡
+- 可以选装hd500G硬盘
+### win10 小主机
+- cpu 可使用：1037u,i3-3217u,i3-5005u,3855u
+- 内存硬盘可使用：4G-64G,4G-128G,8G-128G
+- 可选无线网卡
+- 可以选装hd500G硬盘
+### 挂机宝
+- 分为一拖一，和一拖三两种
+#### 一拖一
+- 可选cpu：1037u,i3-3217u,i3-5005u,3855u
+- 可选内存-系统盘：4G-64G,4G-128G,8G-128G
+- 可选硬盘：hd500G
+- 使用2.5 金属机箱
+- 可选无线网卡
+#### 一拖三
+- 可选cpu：1037u,i3-3217u,i3-5005u,3855u
+- 可选内存-系统盘：4G-64G,4G-128G,8G-128G
+- 使用一拖三亚克力机箱
+- 可选无线网卡