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

.codebuddy/skills/image-tools/scripts/convert-main-image-to-png.js

@@ -0,0 +1,60 @@
+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();
+    
+    // 主图尺寸 800x800
+    await page.setViewport({ width: 800, height: 800 });
+    
+    const mainImageDir = 'G:\\stonelan-workspace\\membank\\产品\\飞牛 NAS\\fyd-亚克力机箱 - 单\\主图';
+    
+    const htmlFiles = fs.readdirSync(mainImageDir)
+        .filter(file => file.endsWith('.html') && file.includes('主图'));
+    
+    console.log(`📁 找到 ${htmlFiles.length} 个主图 HTML 文件需要转换\n`);
+    
+    for (const htmlFile of htmlFiles) {
+        try {
+            const htmlPath = path.join(mainImageDir, htmlFile);
+            const pngFile = htmlFile.replace('.html', '.png');
+            const pngPath = path.join(mainImageDir, pngFile);
+            
+            console.log(`📄 正在转换: ${htmlFile}`);
+            
+            const fileUrl = `file:///${htmlPath.replace(/\\/g, '/')}`;
+            await page.goto(fileUrl, {
+                waitUntil: 'networkidle0',
+                timeout: 10000
+            });
+            
+            await page.screenshot({
+                path: pngPath,
+                fullPage: false,
+                type: 'png',
+                clip: { x: 0, y: 0, width: 800, height: 800 }
+            });
+            
+            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);
+});

.codebuddy/skills/product-main-image/SKILL.md

@@ -7,25 +7,29 @@ description: 设计电商产品的主图。当用户需要为产品生成主图
 
 ## 概述
 
-
+-为每个产品生成主图图片
-
+-主图图片放到每个产品对应的`主图`目录下
 ## 使用场景
 
-
+- 有产品主图需要更新
 
 ## 工作流程
 
 ### 步骤 1: 准备素材
+- 根据产品详情页，归纳出主图要展示的信息
+
+- 可以使用产品目录下`image`目录中的图片作为素材
 
 
 
-### 步骤 2: 设计主图
+### 步骤 2: 设计主图html
-
+- 主图尺寸：800*800
+- 一个主图一个html
 
 
 ### 步骤 3: 导出图片
 
-
+使用 `image-tools` 技能的 `convert-html-to-png.js` 脚本：
 
 ## 主图规范
 

.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 依赖配置

.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);
+});

.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);
+});

.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"
+  }
+}

.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);
+});

.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
+```

.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);

.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` 脚本：
+
+## 主图规范
+
+
+
+## 配色参考
+
+
+
+## 字体规范
+
+
+
+## 示例模板
+
+
+

.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
+- 使用一拖三亚克力机箱
+- 可选无线网卡

产品/飞牛 NAS/fyd-亚克力机箱 - 单/主图/主图1-正面展示.html

@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>亚克力机箱-单 - 正面展示</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            width: 800px;
+            height: 800px;
+            font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
+            background: linear-gradient(135deg, #1a5f2a 0%, #2d8a3e 50%, #1a5f2a 100%);
+            position: relative;
+            overflow: hidden;
+        }
+        .container {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+        }
+        /* 顶部标题 */
+        .header {
+            position: absolute;
+            top: 30px;
+            left: 0;
+            right: 0;
+            text-align: center;
+        }
+        .title {
+            font-size: 48px;
+            font-weight: bold;
+            color: #fff;
+            text-shadow: 3px 3px 6px rgba(0,0,0,0.3);
+            letter-spacing: 4px;
+        }
+        .subtitle {
+            font-size: 24px;
+            color: #90ee90;
+            margin-top: 10px;
+            letter-spacing: 2px;
+        }
+        /* 产品图片区域 */
+        .product-area {
+            width: 500px;
+            height: 400px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-top: 40px;
+        }
+        .product-img {
+            max-width: 100%;
+            max-height: 100%;
+            object-fit: contain;
+            filter: drop-shadow(0 10px 30px rgba(0,0,0,0.4));
+        }
+        /* 卖点标签 */
+        .features {
+            position: absolute;
+            bottom: 120px;
+            display: flex;
+            gap: 20px;
+        }
+        .feature-tag {
+            background: rgba(255,255,255,0.95);
+            padding: 12px 24px;
+            border-radius: 30px;
+            font-size: 20px;
+            color: #1a5f2a;
+            font-weight: bold;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+        }
+        /* 底部信息 */
+        .footer {
+            position: absolute;
+            bottom: 40px;
+            text-align: center;
+        }
+        .brand {
+            font-size: 32px;
+            color: #fff;
+            font-weight: bold;
+            letter-spacing: 3px;
+        }
+        .slogan {
+            font-size: 18px;
+            color: #90ee90;
+            margin-top: 8px;
+        }
+        /* 装饰元素 */
+        .deco-circle {
+            position: absolute;
+            border: 3px solid rgba(255,255,255,0.2);
+            border-radius: 50%;
+        }
+        .deco-1 {
+            width: 600px;
+            height: 600px;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+        .deco-2 {
+            width: 700px;
+            height: 700px;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            border-style: dashed;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- 装饰圆圈 -->
+        <div class="deco-circle deco-1"></div>
+        <div class="deco-circle deco-2"></div>
+        
+        <!-- 顶部标题 -->
+        <div class="header">
+            <div class="title">飞牛 NAS 亚克力机箱</div>
+            <div class="subtitle">单盘位 · 迷你静音 · DIY组装</div>
+        </div>
+        
+        <!-- 产品图片 -->
+        <div class="product-area">
+            <img src="../image/正面.jpg" alt="亚克力机箱正面" class="product-img">
+        </div>
+        
+        <!-- 卖点 -->
+        <div class="features">
+            <div class="feature-tag">亚克力透明</div>
+            <div class="feature-tag">迷你便携</div>
+            <div class="feature-tag">静音散热</div>
+        </div>
+        
+        <!-- 底部品牌 -->
+        <div class="footer">
+            <div class="brand">飞牛 NAS</div>
+            <div class="slogan">专业NAS存储解决方案</div>
+        </div>
+    </div>
+</body>
+</html>

产品/飞牛 NAS/fyd-亚克力机箱 - 单/主图/主图2-配置展示.html

@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>亚克力机箱-单 - 配置展示</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            width: 800px;
+            height: 800px;
+            font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
+            background: linear-gradient(135deg, #f8fff8 0%, #e8f5e9 100%);
+            position: relative;
+            overflow: hidden;
+        }
+        .container {
+            width: 100%;
+            height: 100%;
+            padding: 40px;
+            position: relative;
+        }
+        /* 顶部标题 */
+        .header {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+        .title {
+            font-size: 42px;
+            font-weight: bold;
+            color: #1a5f2a;
+            letter-spacing: 3px;
+        }
+        .subtitle {
+            font-size: 22px;
+            color: #4a8f5a;
+            margin-top: 8px;
+        }
+        /* 配置列表 */
+        .config-section {
+            display: flex;
+            gap: 30px;
+            margin-top: 20px;
+        }
+        .config-card {
+            flex: 1;
+            background: #fff;
+            border-radius: 20px;
+            padding: 30px;
+            box-shadow: 0 8px 30px rgba(26, 95, 42, 0.15);
+            border: 2px solid #2d8a3e;
+        }
+        .config-title {
+            font-size: 28px;
+            font-weight: bold;
+            color: #1a5f2a;
+            text-align: center;
+            margin-bottom: 25px;
+            padding-bottom: 15px;
+            border-bottom: 3px solid #90ee90;
+        }
+        .config-item {
+            display: flex;
+            align-items: center;
+            margin-bottom: 18px;
+            font-size: 20px;
+            color: #333;
+        }
+        .config-label {
+            width: 100px;
+            font-weight: bold;
+            color: #2d8a3e;
+        }
+        .config-value {
+            flex: 1;
+            color: #555;
+        }
+        .config-tag {
+            display: inline-block;
+            background: #e8f5e9;
+            color: #1a5f2a;
+            padding: 4px 12px;
+            border-radius: 15px;
+            font-size: 16px;
+            margin-right: 8px;
+            margin-bottom: 8px;
+        }
+        /* 底部强调 */
+        .footer {
+            position: absolute;
+            bottom: 40px;
+            left: 40px;
+            right: 40px;
+            background: linear-gradient(90deg, #1a5f2a, #2d8a3e);
+            border-radius: 15px;
+            padding: 20px;
+            text-align: center;
+        }
+        .footer-text {
+            font-size: 26px;
+            color: #fff;
+            font-weight: bold;
+            letter-spacing: 2px;
+        }
+        /* 装饰 */
+        .deco-line {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 8px;
+            background: linear-gradient(90deg, #1a5f2a, #90ee90, #1a5f2a);
+        }
+    </style>
+</head>
+<body>
+    <div class="deco-line"></div>
+    <div class="container">
+        <!-- 顶部标题 -->
+        <div class="header">
+            <div class="title">亚克力机箱-单</div>
+            <div class="subtitle">灵活配置 · 满足多样需求</div>
+        </div>
+        
+        <!-- 配置展示 -->
+        <div class="config-section">
+            <div class="config-card">
+                <div class="config-title">支持 CPU</div>
+                <div class="config-item">
+                    <span class="config-value">
+                        <span class="config-tag">N2840</span>
+                        <span class="config-tag">N2930</span>
+                        <span class="config-tag">AMD A4</span>
+                        <span class="config-tag">1037U</span>
+                        <span class="config-tag">J1900</span>
+                        <span class="config-tag">J3160</span>
+                        <span class="config-tag">i3</span>
+                    </span>
+                </div>
+            </div>
+            <div class="config-card">
+                <div class="config-title">内存配置</div>
+                <div class="config-item">
+                    <span class="config-value">
+                        <span class="config-tag">2G-16G</span>
+                        <span class="config-tag">2G-32G</span>
+                        <span class="config-tag">4G-64G</span>
+                        <span class="config-tag">4G-128G</span>
+                    </span>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 底部强调 -->
+        <div class="footer">
+            <div class="footer-text">单 SATA 接口 · 适配所有单盘位主板</div>
+        </div>
+    </div>
+</body>
+</html>

产品/飞牛 NAS/fyd-亚克力机箱 - 单/主图/主图3-细节展示.html

@@ -0,0 +1,195 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>亚克力机箱-单 - 细节展示</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            width: 800px;
+            height: 800px;
+            font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
+            background: #fff;
+            position: relative;
+            overflow: hidden;
+        }
+        .container {
+            width: 100%;
+            height: 100%;
+            position: relative;
+        }
+        /* 顶部绿色条 */
+        .top-bar {
+            height: 120px;
+            background: linear-gradient(90deg, #1a5f2a, #2d8a3e);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .top-title {
+            font-size: 40px;
+            color: #fff;
+            font-weight: bold;
+            letter-spacing: 4px;
+        }
+        /* 中间内容区 */
+        .content {
+            display: flex;
+            height: 560px;
+            padding: 30px;
+            gap: 30px;
+        }
+        /* 左侧图片区 */
+        .image-section {
+            flex: 1.2;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        .main-image {
+            flex: 1;
+            background: #f5f5f5;
+            border-radius: 15px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            border: 3px solid #e0e0e0;
+        }
+        .main-image img {
+            max-width: 90%;
+            max-height: 90%;
+            object-fit: contain;
+        }
+        .sub-images {
+            display: flex;
+            gap: 15px;
+            height: 120px;
+        }
+        .sub-image {
+            flex: 1;
+            background: #f5f5f5;
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            border: 2px solid #e0e0e0;
+        }
+        .sub-image img {
+            max-width: 85%;
+            max-height: 85%;
+            object-fit: contain;
+        }
+        /* 右侧卖点区 */
+        .features-section {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        .feature-box {
+            background: linear-gradient(135deg, #f8fff8, #e8f5e9);
+            border-radius: 15px;
+            padding: 25px;
+            border-left: 5px solid #2d8a3e;
+        }
+        .feature-icon {
+            width: 50px;
+            height: 50px;
+            background: #2d8a3e;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #fff;
+            font-size: 24px;
+            font-weight: bold;
+            margin-bottom: 12px;
+        }
+        .feature-title {
+            font-size: 22px;
+            font-weight: bold;
+            color: #1a5f2a;
+            margin-bottom: 8px;
+        }
+        .feature-desc {
+            font-size: 16px;
+            color: #555;
+            line-height: 1.6;
+        }
+        /* 底部 */
+        .bottom-bar {
+            height: 120px;
+            background: #f8f8f8;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-top: 3px solid #2d8a3e;
+        }
+        .bottom-text {
+            font-size: 28px;
+            color: #1a5f2a;
+            font-weight: bold;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- 顶部标题 -->
+        <div class="top-bar">
+            <div class="top-title">精工细作 · 品质看得见</div>
+        </div>
+        
+        <!-- 中间内容 -->
+        <div class="content">
+            <!-- 左侧图片 -->
+            <div class="image-section">
+                <div class="main-image">
+                    <img src="../image/侧面.jpg" alt="侧面展示">
+                </div>
+                <div class="sub-images">
+                    <div class="sub-image">
+                        <img src="../image/俯视图.jpg" alt="俯视图">
+                    </div>
+                    <div class="sub-image">
+                        <img src="../image/底面.jpg" alt="底面">
+                    </div>
+                    <div class="sub-image">
+                        <img src="../image/接口.jpg" alt="接口">
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 右侧卖点 -->
+            <div class="features-section">
+                <div class="feature-box">
+                    <div class="feature-icon">1</div>
+                    <div class="feature-title">透明亚克力材质</div>
+                    <div class="feature-desc">高透光率，内部硬件一目了然，科技感十足</div>
+                </div>
+                <div class="feature-box">
+                    <div class="feature-icon">2</div>
+                    <div class="feature-title">精密开孔设计</div>
+                    <div class="feature-desc">接口布局合理，散热孔位科学，使用更便捷</div>
+                </div>
+                <div class="feature-box">
+                    <div class="feature-icon">3</div>
+                    <div class="feature-title">DIY组装乐趣</div>
+                    <div class="feature-desc">附赠安装视频，轻松组装，享受动手乐趣</div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 底部 -->
+        <div class="bottom-bar">
+            <div class="bottom-text">飞牛 NAS · 专业品质保障</div>
+        </div>
+    </div>
+</body>
+</html>

产品/飞牛 NAS/fyd-亚克力机箱 - 单/主图/主图4-包装展示.html

@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>亚克力机箱-单 - 包装展示</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            width: 800px;
+            height: 800px;
+            font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
+            background: linear-gradient(180deg, #1a5f2a 0%, #2d8a3e 40%, #f8fff8 40%, #f8fff8 100%);
+            position: relative;
+            overflow: hidden;
+        }
+        .container {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            padding: 40px;
+        }
+        /* 顶部标题区 */
+        .header {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+        .title {
+            font-size: 44px;
+            font-weight: bold;
+            color: #fff;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+            letter-spacing: 4px;
+        }
+        .subtitle {
+            font-size: 24px;
+            color: #90ee90;
+            margin-top: 10px;
+        }
+        /* 包装内容区 */
+        .package-section {
+            display: flex;
+            gap: 30px;
+            margin-top: 20px;
+        }
+        /* 左侧包装图 */
+        .package-image {
+            flex: 1;
+            background: #fff;
+            border-radius: 20px;
+            padding: 25px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.15);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .package-img-container {
+            width: 100%;
+            height: 300px;
+            background: #f5f5f5;
+            border-radius: 15px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            margin-bottom: 20px;
+        }
+        .package-img-container img {
+            max-width: 90%;
+            max-height: 90%;
+            object-fit: contain;
+        }
+        .package-label {
+            font-size: 24px;
+            font-weight: bold;
+            color: #1a5f2a;
+        }
+        /* 右侧清单 */
+        .checklist {
+            flex: 1;
+            background: #fff;
+            border-radius: 20px;
+            padding: 30px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.15);
+        }
+        .checklist-title {
+            font-size: 28px;
+            font-weight: bold;
+            color: #1a5f2a;
+            text-align: center;
+            margin-bottom: 25px;
+            padding-bottom: 15px;
+            border-bottom: 3px solid #90ee90;
+        }
+        .checklist-item {
+            display: flex;
+            align-items: center;
+            margin-bottom: 20px;
+            font-size: 22px;
+            color: #333;
+        }
+        .check-icon {
+            width: 32px;
+            height: 32px;
+            background: #2d8a3e;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #fff;
+            font-weight: bold;
+            margin-right: 15px;
+            font-size: 18px;
+        }
+        /* 底部保障 */
+        .guarantee {
+            position: absolute;
+            bottom: 40px;
+            left: 40px;
+            right: 40px;
+            background: linear-gradient(90deg, #1a5f2a, #2d8a3e);
+            border-radius: 15px;
+            padding: 25px;
+            display: flex;
+            justify-content: space-around;
+        }
+        .guarantee-item {
+            text-align: center;
+            color: #fff;
+        }
+        .guarantee-icon {
+            font-size: 36px;
+            margin-bottom: 8px;
+        }
+        .guarantee-text {
+            font-size: 18px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- 顶部标题 -->
+        <div class="header">
+            <div class="title">专业包装 · 安全送达</div>
+            <div class="subtitle">配件齐全 · 安装无忧</div>
+        </div>
+        
+        <!-- 包装内容 -->
+        <div class="package-section">
+            <!-- 包装图 -->
+            <div class="package-image">
+                <div class="package-img-container">
+                    <img src="../image/包装1.jpg" alt="产品包装">
+                </div>
+                <div class="package-label">精美包装</div>
+            </div>
+            
+            <!-- 配件清单 -->
+            <div class="checklist">
+                <div class="checklist-title">包装清单</div>
+                <div class="checklist-item">
+                    <div class="check-icon">✓</div>
+                    <span>亚克力机箱主体</span>
+                </div>
+                <div class="checklist-item">
+                    <div class="check-icon">✓</div>
+                    <span>安装螺丝包</span>
+                </div>
+                <div class="checklist-item">
+                    <div class="check-icon">✓</div>
+                    <span>SATA数据线</span>
+                </div>
+                <div class="checklist-item">
+                    <div class="check-icon">✓</div>
+                    <span>电源适配器（选配）</span>
+                </div>
+                <div class="checklist-item">
+                    <div class="check-icon">✓</div>
+                    <span>安装说明书+视频教程</span>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 底部保障 -->
+        <div class="guarantee">
+            <div class="guarantee-item">
+                <div class="guarantee-icon">🚚</div>
+                <div class="guarantee-text">顺丰包邮</div>
+            </div>
+            <div class="guarantee-item">
+                <div class="guarantee-icon">🛡️</div>
+                <div class="guarantee-text">破损包赔</div>
+            </div>
+            <div class="guarantee-item">
+                <div class="guarantee-icon">📞</div>
+                <div class="guarantee-text">技术支持</div>
+            </div>
+            <div class="guarantee-item">
+                <div class="guarantee-icon">↩️</div>
+                <div class="guarantee-text">7天退换</div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>

产品/飞牛 NAS/fyd-亚克力机箱 - 单/主图/主图5-场景展示.html

@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>亚克力机箱-单 - 场景展示</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            width: 800px;
+            height: 800px;
+            font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
+            background: linear-gradient(135deg, #0d3320 0%, #1a5f2a 50%, #2d8a3e 100%);
+            position: relative;
+            overflow: hidden;
+        }
+        .container {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            padding: 50px;
+        }
+        /* 背景装饰 */
+        .bg-pattern {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-image: 
+                radial-gradient(circle at 20% 80%, rgba(255,255,255,0.05) 0%, transparent 50%),
+                radial-gradient(circle at 80% 20%, rgba(255,255,255,0.05) 0%, transparent 50%);
+        }
+        /* 主标题 */
+        .main-title {
+            text-align: center;
+            margin-bottom: 40px;
+        }
+        .title {
+            font-size: 52px;
+            font-weight: bold;
+            color: #fff;
+            text-shadow: 3px 3px 6px rgba(0,0,0,0.4);
+            letter-spacing: 5px;
+        }
+        .subtitle {
+            font-size: 26px;
+            color: #90ee90;
+            margin-top: 15px;
+        }
+        /* 应用场景网格 */
+        .scenarios {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 30px;
+            margin-top: 30px;
+        }
+        .scenario-card {
+            background: rgba(255,255,255,0.95);
+            border-radius: 20px;
+            padding: 35px;
+            text-align: center;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+            transition: transform 0.3s;
+        }
+        .scenario-icon {
+            width: 80px;
+            height: 80px;
+            background: linear-gradient(135deg, #1a5f2a, #2d8a3e);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 20px;
+            font-size: 40px;
+            color: #fff;
+        }
+        .scenario-title {
+            font-size: 28px;
+            font-weight: bold;
+            color: #1a5f2a;
+            margin-bottom: 12px;
+        }
+        .scenario-desc {
+            font-size: 18px;
+            color: #555;
+            line-height: 1.6;
+        }
+        /* 底部CTA */
+        .cta {
+            position: absolute;
+            bottom: 50px;
+            left: 50px;
+            right: 50px;
+            background: linear-gradient(90deg, #fff, #f0f8f0);
+            border-radius: 15px;
+            padding: 25px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 30px;
+            box-shadow: 0 8px 30px rgba(0,0,0,0.3);
+        }
+        .cta-text {
+            font-size: 32px;
+            font-weight: bold;
+            color: #1a5f2a;
+        }
+        .cta-badge {
+            background: #ff6b35;
+            color: #fff;
+            padding: 12px 30px;
+            border-radius: 30px;
+            font-size: 24px;
+            font-weight: bold;
+        }
+    </style>
+</head>
+<body>
+    <div class="bg-pattern"></div>
+    <div class="container">
+        <!-- 主标题 -->
+        <div class="main-title">
+            <div class="title">多场景应用</div>
+            <div class="subtitle">满足您的各种存储需求</div>
+        </div>
+        
+        <!-- 应用场景 -->
+        <div class="scenarios">
+            <div class="scenario-card">
+                <div class="scenario-icon">🏠</div>
+                <div class="scenario-title">家庭NAS</div>
+                <div class="scenario-desc">家庭影音中心<br>照片备份存储<br>文件共享管理</div>
+            </div>
+            <div class="scenario-card">
+                <div class="scenario-icon">💼</div>
+                <div class="scenario-title">办公存储</div>
+                <div class="scenario-desc">文档集中管理<br>团队协作共享<br>数据安全备份</div>
+            </div>
+            <div class="scenario-card">
+                <div class="scenario-icon">🔧</div>
+                <div class="scenario-title">开发测试</div>
+                <div class="scenario-desc">开发环境搭建<br>服务器测试<br>学习实验平台</div>
+            </div>
+            <div class="scenario-card">
+                <div class="scenario-icon">🎮</div>
+                <div class="scenario-title">个人工作室</div>
+                <div class="scenario-desc">小型工作室存储<br>自媒体素材库<br>轻量级服务器</div>
+            </div>
+        </div>
+        
+        <!-- 底部CTA -->
+        <div class="cta">
+            <div class="cta-text">开启您的私有云存储之旅</div>
+            <div class="cta-badge">立即选购</div>
+        </div>
+    </div>
+</body>
+</html>