From f7d9ebe1ab2e53179f5591a7d668d8937fdcaf8e Mon Sep 17 00:00:00 2001 From: chenpei Date: Sun, 26 Oct 2025 16:32:28 +0800 Subject: [PATCH] docs: Update PROJECT_INTRODUCTION.md with PSD auto-preview and dimension updates - Add v2.6.0 changelog for PSD auto-preview and 300x500 dimensions - Update upload flow to include PSD auto-preview generation - Update card display specs to 300x500 vertical format - Add ag-psd to technology stack - Update image processing documentation - Update user guide for PSD file uploads --- PROJECT_INTRODUCTION.md | 125 +++++++++++++++++++++++++++++++++------- 1 file changed, 105 insertions(+), 20 deletions(-) diff --git a/PROJECT_INTRODUCTION.md b/PROJECT_INTRODUCTION.md index 46d335b0..80cf1a03 100644 --- a/PROJECT_INTRODUCTION.md +++ b/PROJECT_INTRODUCTION.md @@ -88,19 +88,24 @@ #### 智能上传功能 - 🎯 **拖拽上传** - 全窗口拖拽，自动识别文件类型 - 📸 **预览图上传** - 支持JPG、PNG、WebP等格式 +- 🤖 **PSD自动预览** - PSD文件无需手动上传预览图 + - 自动从PSD文件提取预览图 + - 智能裁剪长图（保留顶部1200px） + - 自动压缩优化到300KB以内 + - 转换为WebP格式节省空间 - 📦 **文件上传** - 支持压缩包和源文件 - 压缩包格式：ZIP、RAR、7Z - 源文件格式：MAX、PSD、AI、CAD、DWG、C4D - 🤖 **智能识别** - 根据文件扩展名自动识别素材类型 - .max → 自动设置为3DMAX - - .psd → 自动设置为PSD + - .psd → 自动设置为PSD并自动生成预览图 - .ai → 自动设置为AI - .cad/.dwg → 自动设置为CAD - .c4d → 自动设置为C4D - 压缩包 → 需手动选择类型 - 📊 **实时进度** - 上传进度和网络速度实时显示 - 🚀 **大文件支持** - 最高支持10GB文件上传 -- 🔄 **智能压缩** - 预览图自动优化（最大1000x700px） +- 🔄 **智能压缩** - 预览图自动优化（最大600x1000px） - 🏷️ **多类型支持** - 支持3DMAX、PSD、AI、CAD、C4D等多种素材类型 - 🎨 **条件显示** - 根据素材类型智能显示相关选项 @@ -120,23 +125,36 @@ #### 上传流程 ``` -1. 选择/拖拽预览图 → 自动上传到MinIO S3 -2. 输入商品型号 → SPU标识 -3. 选择使用店铺 → 支持新建分类 -4. 选择场景类别 → 支持新建场景 -5. 选择/拖拽文件 → 支持压缩包或源文件 +1. 输入商品型号 → SPU标识 +2. 选择使用店铺 → 支持新建分类 +3. 选择场景类别 → 支持新建场景 +4. 选择/拖拽文件 → 支持压缩包或源文件 ↓ 智能识别文件格式： - .max → 自动识别为3DMAX，显示渲染器选项 - - .psd → 自动识别为PSD + - .psd → 自动识别为PSD，预览图可选（自动生成） - .ai → 自动识别为AI - .cad/.dwg → 自动识别为CAD - .c4d → 自动识别为C4D - .zip/.rar/.7z → 需手动选择素材类型 ↓ +5. 上传预览图（根据文件类型）： + - PSD文件 → 可选（系统自动从PSD提取） + - 其他文件 → 必选（手动上传预览图） + ↓ 6. 选择素材类型 → 已自动识别或手动选择 7. 选择渲染器 → CR/VR/其它（仅3DMAX类型显示） 8. 开始上传 → 实时显示进度和速度 + ↓ + 如果是PSD文件且未上传预览图： + - 保存PSD临时文件 + - 使用ag-psd解析PSD + - 提取合成图像 + - 裁剪长图（>1200px保留顶部） + - 压缩优化（600x1000px, 300KB） + - 上传到MinIO S3 + - 清理临时文件 + ↓ 9. 上传完成 → 自动返回首页展示 ``` @@ -167,7 +185,7 @@ ``` ┌──────────────────────────┐ -│ [预览图 300x300px] │ +│ [预览图 300x500px] │ │ SPU标签 (左上角) │ │ 放大提示 (hover) │ ├──────────────────────────┤ @@ -184,6 +202,12 @@ └──────────────────────────┘ ``` +**显示特性** +- 📐 **3:5竖版比例** - 更适合展示纵向素材 +- 🖼️ **高质量预览** - 自动优化至600x1000像素 +- 📏 **等比缩放** - 保持原图比例，无变形 +- 🎨 **响应式布局** - 网格自动适配屏幕尺寸 + --- ### 4. 互动功能 @@ -382,6 +406,11 @@ ├── PostgreSQL # 关系型数据库 └── NextAuth.js 4.24 # 认证系统 +图像处理 +├── Sharp 0.34.4 # 高性能图像处理 +├── ag-psd 28.4.1 # PSD文件解析 +└── WebP压缩 # 图片格式优化 + 存储方案 ├── MinIO S3 # 对象存储（预览图） └── 本地文件系统 # 压缩包存储 @@ -835,6 +864,45 @@ WHERE [筛选条件]; ## 📝 更新日志 +### v2.6.0 - PSD自动预览与尺寸优化 (2025-10-26) + +**新增功能** +- 🎨 **PSD自动预览生成**：上传PSD文件自动生成预览图 + - 使用ag-psd库解析PSD文件 + - 自动提取合成图像作为预览图 + - 无需手动截图或导出预览图 + - 节省用户操作时间 +- ✂️ **长图智能裁剪**：PSD长图自动裁剪优化 + - 检测PSD文件高度 + - 超过1200px自动裁剪顶部区域 + - 保留最重要的顶部内容 + - 减少文件大小提升加载速度 +- 📐 **预览图尺寸优化**：调整为300x500竖版显示 + - 卡片高度从300px增加到500px + - 显示比例调整为3:5 + - 更适合展示纵向素材 + - 细节保留更加丰富 + +**技术改进** +- 新增psd-processor处理器（lib/psd-processor.ts） +- 图片处理器支持maxHeight参数 +- 优化图片压缩算法（最大600x1000px） +- 完善错误处理和临时文件清理 +- Docker镜像包含ag-psd依赖 + +**用户体验** +- PSD文件上传更便捷（预览图可选） +- 首页卡片展示效果更佳 +- 纵向素材显示更完整 +- 智能提示用户操作 + +**性能优化** +- 预览图文件更小，加载更快 +- PSD长图裁剪减少存储占用 +- 优化图片处理流程 + +--- + ### v2.5.0 - 系统设置与部门管理 (2025-10-26) **新增功能** @@ -1306,27 +1374,33 @@ module.exports = { #### 上传素材 ``` 1. 点击右上角"上传素材"按钮 -2. 上传预览图： - - 方式1：点击选择文件 - - 方式2：拖拽图片到窗口 -3. 填写素材信息： +2. 填写素材信息： - SPU：商品型号 - 使用店铺：选择或新建 - 场景类别：选择或新建 -4. 上传文件（支持源文件和压缩包）： +3. 上传文件（支持源文件和压缩包）： - 方式1：点击选择文件 - 方式2：拖拽文件到窗口 - 📌 智能识别： * 上传.max文件 → 自动识别为3DMAX - * 上传.psd文件 → 自动识别为PSD + * 上传.psd文件 → 自动识别为PSD，预览图自动生成 * 上传.ai文件 → 自动识别为AI * 上传.cad/.dwg文件 → 自动识别为CAD * 上传.c4d文件 → 自动识别为C4D * 上传压缩包 → 需手动选择类型 +4. 上传预览图（根据文件类型）： + - PSD文件：预览图显示"(可选)" + * 💡 系统会自动从PSD提取预览图 + * 也可以手动上传自定义预览图 + - 其他文件：预览图显示"*"（必填） + * 方式1：点击选择图片 + * 方式2：拖拽图片到窗口 5. 确认素材类型（已自动识别或手动调整） 6. 选择渲染器（仅3DMAX类型显示）：CR/VR/其它 -7. 点击"开始上传" +7. 点击"上传"按钮 8. 等待上传完成（查看进度和速度） + - PSD自动预览：系统后台自动处理 + - 手动预览图：即时上传到MinIO ``` #### 下载素材 @@ -1847,16 +1921,27 @@ await upload.done() ```typescript import sharp from 'sharp' +// 普通图片压缩（最大600x1000px） const compressedBuffer = await sharp(file.filepath) - .resize(1000, 700, { + .resize(600, 1000, { fit: 'inside', withoutEnlargement: true }) - .jpeg({ - quality: 85, - progressive: true + .webp({ + quality: 80, + effort: 4 }) .toBuffer() + +// PSD预览图生成（自动裁剪长图） +import { generatePsdPreview } from '@/lib/psd-processor' + +const result = await generatePsdPreview( + psdFilePath, // PSD文件路径 + outputPath, // 输出路径 + 800, // 最大宽度 + 1200 // 长图裁剪高度 +) ``` ### 缓存策略