113 lines
3.4 KiB
Markdown
113 lines
3.4 KiB
Markdown
# 更新日志弹窗组件使用说明
|
||
|
||
## 功能说明
|
||
|
||
`UpdateLogModal` 是一个符合苹果风格的更新日志弹窗组件，用于向用户展示系统的新功能、优化和修复。
|
||
|
||
## 特性
|
||
|
||
- ✅ 符合苹果设计风格（圆角、阴影、渐变）
|
||
- ✅ 自动检测用户是否已查看过当前版本
|
||
- ✅ 首次进入系统时自动弹出
|
||
- ✅ 支持深色模式
|
||
- ✅ 响应式设计
|
||
- ✅ 通俗易懂的更新说明
|
||
|
||
## 如何更新日志
|
||
|
||
### 1. 更新版本号
|
||
|
||
在 `components/UpdateLogModal.tsx` 文件中，找到 `CURRENT_VERSION` 常量：
|
||
|
||
```typescript
|
||
const CURRENT_VERSION = '1.0.0' // 更新这个版本号
|
||
```
|
||
|
||
如果项目没有正式发布版本号或 Git tag，也可以使用日期型版本号，例如 `2026.07.04`，但需要保证 `UPDATE_LOGS` 中存在同名版本记录。
|
||
|
||
### 2. 添加更新内容
|
||
|
||
在 `UPDATE_LOGS` 数组中添加新的更新日志：
|
||
|
||
```typescript
|
||
const UPDATE_LOGS: UpdateLog[] = [
|
||
{
|
||
version: '1.0.1', // 新版本号
|
||
date: '2025-12-07', // 更新日期
|
||
title: '系统更新', // 标题
|
||
items: [
|
||
{
|
||
type: 'feature', // 类型：'feature' | 'improvement' | 'fix'
|
||
title: '新功能标题',
|
||
description: '通俗易懂的功能描述，面向客户，避免技术术语。'
|
||
},
|
||
{
|
||
type: 'improvement',
|
||
title: '优化标题',
|
||
description: '优化说明，告诉用户这个优化能带来什么好处。'
|
||
},
|
||
{
|
||
type: 'fix',
|
||
title: '修复标题',
|
||
description: '修复说明，告诉用户修复了什么问题。'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
```
|
||
|
||
### 3. 更新类型说明
|
||
|
||
- **`feature`** (新功能) - 显示 ✨ 图标，蓝色背景
|
||
- **`improvement`** (优化) - 显示 🚀 图标，绿色背景
|
||
- **`fix`** (修复) - 显示 🔧 图标，橙色背景
|
||
|
||
### 4. 编写更新说明的注意事项
|
||
|
||
✅ **好的示例：**
|
||
- "优化了视频上传和转码流程，现在可以更稳定地上传和预览视频素材了。"
|
||
- "改进了文件上传机制，即使网络不稳定也能更可靠地完成上传。"
|
||
- "修复了视频预览播放时的卡顿问题，现在播放更流畅了。"
|
||
|
||
❌ **避免的写法：**
|
||
- "修复了 S3 上传 404 错误"（技术术语）
|
||
- "优化了 FFmpeg 转码参数"（用户不关心技术细节）
|
||
- "更新了依赖包版本"（对用户无意义）
|
||
|
||
## 工作原理
|
||
|
||
1. 用户首次进入系统时，组件会检查 `localStorage` 中存储的 `update_log_viewed_version`
|
||
2. 如果存储的版本号与 `CURRENT_VERSION` 不一致，则显示更新弹窗
|
||
3. 用户点击"知道了"按钮后，将当前版本号保存到 `localStorage`
|
||
4. 下次进入系统时，如果版本号相同，则不再显示弹窗
|
||
|
||
## 手动触发更新弹窗
|
||
|
||
如果需要手动触发显示更新日志（例如在设置页面添加"查看更新日志"按钮），可以使用：
|
||
|
||
```typescript
|
||
import { showUpdateLog } from '@/components/UpdateLogModal'
|
||
|
||
// 显示当前版本的更新日志
|
||
showUpdateLog()
|
||
|
||
// 显示指定版本的更新日志
|
||
showUpdateLog('1.0.0')
|
||
```
|
||
|
||
## 样式定制
|
||
|
||
组件使用了项目中的苹果风格样式：
|
||
- `rounded-2xl` - 圆角
|
||
- `shadow-apple-lg` - 阴影
|
||
- `bg-gradient-to-br` - 渐变背景
|
||
- 支持深色模式（`dark:` 前缀）
|
||
|
||
## 注意事项
|
||
|
||
- 每次有新功能或优化时，记得更新 `CURRENT_VERSION`
|
||
- 更新说明要通俗易懂，面向最终用户
|
||
- 避免使用技术术语，用用户能理解的语言描述
|
||
- 更新日期格式：`YYYY-MM-DD`
|
||
|