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

功能说明

UpdateLogModal 是一个符合苹果风格的更新日志弹窗组件，用于向用户展示系统的新功能、优化和修复。

特性

✅ 符合苹果设计风格（圆角、阴影、渐变）
✅ 自动检测用户是否已查看过当前版本
✅ 首次进入系统时自动弹出
✅ 支持深色模式
✅ 响应式设计
✅ 通俗易懂的更新说明

如何更新日志

1. 更新版本号

在 components/UpdateLogModal.tsx 文件中，找到 CURRENT_VERSION 常量：

const CURRENT_VERSION = '1.0.0'  // 更新这个版本号

如果项目没有正式发布版本号或 Git tag，也可以使用日期型版本号，例如 2026.07.04，但需要保证 UPDATE_LOGS 中存在同名版本记录。

2. 添加更新内容

在 UPDATE_LOGS 数组中添加新的更新日志：

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 转码参数"（用户不关心技术细节）
"更新了依赖包版本"（对用户无意义）

工作原理

用户首次进入系统时，组件会检查 localStorage 中存储的 update_log_viewed_version
如果存储的版本号与 CURRENT_VERSION 不一致，则显示更新弹窗
用户点击"知道了"按钮后，将当前版本号保存到 localStorage
下次进入系统时，如果版本号相同，则不再显示弹窗

手动触发更新弹窗

如果需要手动触发显示更新日志（例如在设置页面添加"查看更新日志"按钮），可以使用：

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

3.4 KiB Raw Permalink Blame History Unescape Escape