更新产品配置和技能定义
This commit is contained in:
12600k-rog-d4
88
.trae/skills/product-detail-designer/SKILL.md
Normal file
88
.trae/skills/product-detail-designer/SKILL.md
Normal file
@@ -0,0 +1,88 @@
|
||||
---
|
||||
name: product-detail-designer
|
||||
description: 设计电商产品的详情页。当用户需要为产品生成详情页HTML、批量渲染SKU页面、或处理产品图片时使用此技能。
|
||||
---
|
||||
|
||||
# Product Detail Designer
|
||||
|
||||
## 概述
|
||||
|
||||
根据产品的 SKU 和配置规范，生成对应的产品详情页 HTML，并转换为 PNG 图片。自动化处理从配置数据到最终展示页面的完整流程。
|
||||
|
||||
## 使用场景
|
||||
|
||||
- 有产品种类或 SKU 变化，需要重新生成详情页
|
||||
- 有产品图片变化，需要更新详情页
|
||||
- 需要批量为多个 SKU 生成对应的详情页
|
||||
|
||||
## 工作流程
|
||||
|
||||
### 步骤 1: 读取 SKU 配置
|
||||
|
||||
从 `产品` 目录下找到对应的产品目录
|
||||
|
||||
|
||||
### 步骤 2: 生成 HTML 文件
|
||||
|
||||
#### 详情页组成部分
|
||||
- 购买须知 （不需要二级标题）
|
||||
- 亚克力机箱需要自己组装，店铺会提供安装视频
|
||||
- 受成本限制，产品无法做到十全十美，完美主义者慎拍
|
||||
- 配置清单
|
||||
1. 以表格的形式展示
|
||||
2. cpu 内存 系统盘，网口，
|
||||
3. 内存体现容量和ddr3，内存插槽数量
|
||||
4. 支持硬盘数量，尺寸， 容量
|
||||
- 使用场景
|
||||
1. 手机扩容
|
||||
照片视频备份，自动同步，远程同步
|
||||
2. 小型办公/团队协作
|
||||
远程文件访问，多人协作，权限分级，文件共享，文件归档，在线编辑
|
||||
3. 监控视频存储
|
||||
小米摄像头存储，onvif协议支持
|
||||
4. 家庭影院打造
|
||||
流畅播放4k视频，硬解4k
|
||||
5. 微信聊天记录备份
|
||||
支持微信聊天记录备份
|
||||
6. 远程访问
|
||||
远程访问照片，视频，文件等内容
|
||||
- 产品特点
|
||||
1. 体积小，容量大，功能强
|
||||
2. 低耗静音
|
||||
3. 支持远程访问
|
||||
4. 支持wifi联网
|
||||
5. 来电自启
|
||||
6. 远程开关机
|
||||
- 产品实拍图
|
||||
- 飞牛系统截图
|
||||
- 配件清单
|
||||
- 包装展示
|
||||
- 常见问题
|
||||
|
||||
|
||||
- 严格按照详情页组成生成详情页，多余的删除掉
|
||||
- 需要用的产品图片，都放在对应产品目录的image目录下
|
||||
- html 按照宽1500的分辨率生成
|
||||
- 一个产品有多个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
|
||||
```
|
||||
133
.trae/skills/product-detail-designer/scripts/render.js
Normal file
133
.trae/skills/product-detail-designer/scripts/render.js
Normal file
@@ -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);
|
||||
Reference in New Issue
Block a user