jiachenlong/docs/RELEASE_v1.0.1.md

327 lines
7.4 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 甲辰藏品管理系统 v1.0.1 发布说明
**发布日期**: 2026-03-16
**版本**: v1.0.1
**前置版本**: v1.0.0
**分支**: `main`
---
## 🎯 版本亮点
### 1. Logo 显示问题修复 🐉
**问题描述**:
- 藏品详情页面图片加载失败时显示 Logo导致所有无图片的藏品都显示 Logo
- 用户体验混淆,无法区分"无图片"和"图片加载失败"
**解决方案**:
- 修改 `frontend/src/pages/Detail.jsx``onError` 处理逻辑
- 图片加载失败时显示"无图片"占位符,不再显示 Logo
- Logo 仅在登录页、首页等指定位置显示
**代码变更**:
```jsx
// 修复前
onError={(e) => { e.target.src = '/static/images/jiachenlong-logo.png'; }}
// 修复后
onError={(e) => {
e.target.style.display = 'none';
e.target.parentElement.innerHTML = '<div>无图片</div>';
}}
```
**影响范围**:
- ✅ 藏品详情页图片显示
- ✅ 藏品列表页图片显示
- ✅ Logo 使用规范化
---
### 2. 图片代理问题修复 🔧
**问题描述**:
- 前端服务器 Nginx 配置中,图片扩展名 location 优先级高于 `/uploads`
- 导致 `.jpg/.jpeg` 文件在本地 `/var/www/html/` 查找,而不是代理到后端
- 所有藏品图片返回 404 错误
**根本原因**:
```nginx
# ❌ 错误配置(图片扩展名 location 优先级过高)
location /uploads {
proxy_pass http://backend:3000/uploads;
}
location ~* \.(jpg|jpeg|png)$ { # 这个优先级更高!
expires 1y;
}
```
**解决方案**:
- 调整 Nginx location 优先级,`/uploads` 移到图片扩展名 location 之前
- 图片扩展名 location 只处理字体文件woff、ttf 等)
- 前端静态图片使用 `/static/` 路径单独处理
**代码变更**:
```nginx
# ✅ 正确配置
# 1. 字体文件缓存(不影响图片)
location ~* \.(js|css|woff|woff2|ttf|eot)$ {
expires 1y;
}
# 2. 图片上传文件代理(优先级最高)
location /uploads {
proxy_pass http://47.110.37.129:3000/uploads;
client_max_body_size 20M;
}
# 3. 前端静态图片(/static/ 目录)
location ~* ^/static/.*\.(png|jpg|jpeg|gif|ico|svg)$ {
expires 1y;
}
```
**影响范围**:
- ✅ 藏品详情图片显示
- ✅ 图片预览弹窗
- ✅ 图片切换功能
---
### 3. 后端图片数据加载修复 📊
**问题描述**:
- `get_collections()` API 函数中 `'images': []` 是硬编码的空数组
- 藏品列表 API 不返回图片数据,导致前端无法显示缩略图
**解决方案**:
-`get_collections()` 函数中添加图片数据加载逻辑
- 查询 `collection_images` 表并返回图片信息
**代码变更**:
```python
# backend/app/routers/collections.py
# 修复前
'images': []
data_list.append(to_camel_case(item_dict))
# 修复后
'images': []
# 加载图片数据
from app.models.models import CollectionImage
images = db.query(CollectionImage).filter(
CollectionImage.collection_id == item.f99_90_id
).all()
for img in images:
item_dict['images'].append({
'id': img.id,
'filename': img.filename,
'original_name': img.original_name,
'path': img.path,
'created_at': img.created_at.isoformat() if img.created_at else None
})
data_list.append(to_camel_case(item_dict))
```
**影响范围**:
- ✅ 藏品列表 API
- ✅ 前端缩略图显示
- ✅ 所有依赖图片数据的页面
---
### 4. 前端图片路径修复 🔗
**问题描述**:
- 数据库中的 `path` 字段已包含 `uploads/` 前缀
- 前端代码又添加了 `/uploads/` 前缀,导致路径重复
- 最终 URL`/uploads/uploads/collections/xxx.jpg` (404 错误)
**解决方案**:
- 前端代码直接使用 `path` 字段,不添加额外前缀
**代码变更**:
```jsx
// frontend/src/pages/Detail.jsx
// 修复前
src={`/uploads/${img.path}`}
// 修复后
src={`/${img.path}`}
```
**影响范围**:
- ✅ 藏品详情页图片
- ✅ 图片预览弹窗
- ✅ 所有图片显示位置
---
### 5. 编辑页面图片预览修复 📝
**问题描述**:
- 编辑页面 `Edit.jsx` 中图片预览 URL 写死了错误的服务器地址
- 导致编辑页面无法显示图片预览
**解决方案**:
- 使用相对路径代替硬编码 URL
**代码变更**:
```jsx
// frontend/src/pages/Edit.jsx
// 修复前 (2 处)
preview: `http://120.26.133.10:3000/${img.path}`
// 修复后
preview: `/${img.path}`
```
**影响范围**:
- ✅ 编辑页面图片预览
- ✅ 图片上传后预览更新
---
## 📊 技术细节
### 图片访问流程
```
用户访问 http://8.149.137.26/uploads/collections/xxx.jpg
Nginx 接收请求(匹配 /uploads location
代理到 http://47.110.37.129:3000/uploads/collections/xxx.jpg
FastAPI 返回图片文件
用户看到图片 ✅
```
### 数据库存储
| 字段 | 示例值 |
|------|--------|
| `path` | `uploads/collections/admin-0001-J051963351.jpeg` |
| `filename` | `admin-0001-J051963351.jpeg` |
| `original_name` | `001.JPG` |
### 文件命名规则
**格式**: `用户名 - 藏品编号 - 冠字号。扩展名`
**示例**:
- `admin-0001-J051963351.jpeg`
- `admin-0002-J035161361.JPG`
---
## 📝 文件变更清单
### 前端文件
-`frontend/src/pages/Detail.jsx` - 图片路径和 onError 处理
-`frontend/src/pages/Home.jsx` - Logo 引用
-`frontend/src/pages/Login.jsx` - Logo 显示
-`frontend/package.json` - 版本号 1.0.1
### 后端文件
-`backend/app/routers/collections.py` - 图片数据加载
### 配置文件
-`config/VERSION` - 版本号 1.0.1
-`config/nginx.conf` - Nginx location 优先级调整
### 文档文件
-`docs/IMAGE_PROCESSING_FLOW.md` - 图片处理流程
-`docs/CLEANUP_REPORT.md` - 服务器清理报告
-`RELEASE_v1.0.1.md` - 本发布说明
---
## ✅ 测试验证
### 功能测试
| 测试项 | 状态 | 说明 |
|--------|------|------|
| Logo 显示 | ✅ 通过 | 仅在登录页、首页显示 |
| 藏品列表图片 | ✅ 通过 | 缩略图正常显示 |
| 藏品详情图片 | ✅ 通过 | 大图正常显示 |
| 图片预览弹窗 | ✅ 通过 | 点击可打开预览 |
| 图片切换 | ✅ 通过 | 左右按钮切换正常 |
| 无图片占位符 | ✅ 通过 | 显示"无图片"而非 Logo |
### API 测试
| 接口 | 状态 | 说明 |
|------|------|------|
| GET /api/collections | ✅ 200 | 返回图片数据 |
| GET /api/collections/:id | ✅ 200 | 返回图片详情 |
| POST /api/collections/upload-image | ✅ 200 | 图片上传正常 |
| GET /uploads/collections/xxx.jpg | ✅ 200 | 图片代理正常 |
---
## 🎯 升级建议
### 从 v1.0.0 升级
1. **拉取最新代码**
```bash
git pull origin main
```
2. **更新前端**
```bash
cd frontend
npm install
npm run build
```
3. **重启后端服务**
```bash
cd backend
pip install -r requirements.txt
pkill -f uvicorn
nohup python3 -m uvicorn app.main:app --port 3000 --host 0.0.0.0 &
```
4. **更新 Nginx 配置**
```bash
sudo cp config/nginx.conf /etc/nginx/conf.d/jiachenlong.conf
sudo nginx -s reload
```
---
## 📚 相关文档
- `docs/IMAGE_PROCESSING_FLOW.md` - 图片处理完整流程
- `static/images/LOGO_GUIDE.md` - Logo 使用规范
- `docs/CLEANUP_REPORT.md` - 服务器清理报告
---
## 🐛 已知问题
---
## 📞 技术支持
如有问题,请参考:
- 部署文档:`DEPLOYMENT_v1.0.0.md`
- 错误码文档:`ERROR_CODES.md`
- 后端服务指南:`BACKEND_SERVICE_GUIDE.md`
---
**甲辰藏品管理系统开发团队**
2026-03-16