# 如何更新进度页面

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

---

## 📖 使用方法

### 查看进度页面

**方法1：直接在浏览器中打开**
```bash
# 在文件管理器中双击
docs/jianpu-renderer/progress.html
```

**方法2：通过VSCode打开**
```bash
# 右键文件 → Open with Live Server
# 或者在VSCode中安装Live Server扩展后预览
```

---

## 🔧 如何更新进度

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

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

**修改任务状态：**
```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>
```

**修改阶段进度：**
```html
<div class="stage-progress">0%</div>  ← 改为实际百分比，如 50%
```

**修改整体进度：**
```html
<!-- 在统计卡片中 -->
<div class="stat-value">10%</div>  ← 改为新的百分比

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

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

---

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

在浏览器控制台中运行：

```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（折叠所有阶段）