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
This commit is contained in:
chenpei
parent
f17f0922a4
commit
f7d9ebe1ab
@ -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 // 长图裁剪高度
|
||||
)
|
||||
```
|
||||
|
||||
### 缓存策略
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user