# 更新日志弹窗组件使用说明

## 功能说明

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