music-score/docs/jianpu-renderer/HOW_TO_UPDATE_PROGRESS.md

如何更新进度页面

进度页面： progress.html
更新频率： 每完成一个任务后更新

---

📖 使用方法

查看进度页面

方法1：直接在浏览器中打开

# 在文件管理器中双击
docs/jianpu-renderer/progress.html

方法2：通过VSCode打开

# 右键文件 → Open with Live Server
# 或者在VSCode中安装Live Server扩展后预览

---

🔧 如何更新进度

方法1：手动编辑HTML（简单）

打开 progress.html，找到对应的任务，修改状态：

修改任务状态：

<!-- 将待开始改为进行中 -->
<div class="task pending">  ← 改为 in-progress
    ...
    <div class="task-status pending">待开始</div>  ← 改为 in-progress 和 进行中
</div>

<!-- 将进行中改为已完成 -->
<div class="task in-progress">  ← 改为 completed
    ...
    <div class="task-status in-progress">进行中</div>  ← 改为 completed 和 已完成
</div>

修改阶段进度：

<div class="stage-progress">0%</div>  ← 改为实际百分比，如 50%

修改整体进度：

<!-- 在统计卡片中 -->
<div class="stat-value">10%</div>  ← 改为新的百分比

<!-- 在进度条中 -->
<div class="progress-bar" style="width: 10%;">10%</div>  ← 改为新的百分比

<!-- 在已完成任务数中 -->
<div class="stat-value">6/60+</div>  ← 改为新的数量

---

方法2：使用JavaScript更新（高级）

在浏览器控制台中运行：

// 更新阶段进度
updateProgress(0, 75);  // 阶段0进度设为75%
updateProgress(1, 25);  // 阶段0.5进度设为25%

// 刷新页面查看效果

---

📊 进度计算公式

阶段进度

阶段进度 = (已完成任务数 / 该阶段总任务数) × 100%

示例：
阶段0有5个任务，完成了4个
阶段0进度 = (4 / 5) × 100% = 80%

整体进度

整体进度 = (已完成总任务数 / 所有任务总数) × 100%

当前：
整体进度 = (6 / 60) × 100% ≈ 10%

---

🎨 页面功能

交互功能

• ✅ 点击阶段标题可展开/折叠任务列表
• ✅ 按 E 键展开所有阶段
• ✅ 按 C 键折叠所有阶段
• ✅ 鼠标悬停卡片有动画效果

状态标识

• 🚧 进行中（黄色）
• ✅ 已完成（绿色）
• ⏸️ 待开始（灰色）

---

📝 更新检查清单

每次完成任务后：

• 打开 progress.html
• 找到对应的任务
• 修改状态为"completed"
• 更新阶段进度百分比
• 更新整体进度
• 保存文件
• 刷新浏览器查看效果

---

💡 提示

1. 及时更新：每完成一个任务就更新，保持进度同步
2. 截图记录：定期截图保存进度状态
3. 版本控制：进度页面也要提交到Git
4. 团队共享：部署到内网服务器供团队查看

---

快捷键：

• E - Expand（展开所有阶段）
• C - Collapse（折叠所有阶段）