课程资源
设备收到 UPDATE_MANIFEST 后会保存索引并逐个下载资源，同名文件会被覆盖。
```
- [ ] **Step 2: Add JS element references near upload references**
```javascript
const manifestCourseIdEl = document.getElementById('manifestCourseId');
const manifestMp3FilesEl = document.getElementById('manifestMp3Files');
const manifestTargetDirEl = document.getElementById('manifestTargetDir');
const manifestUploadResultEl = document.getElementById('manifestUploadResult');
const manifestUploadInfoEl = document.getElementById('manifestUploadInfo');
```
- [ ] **Step 3: Add state variable near `latestUpload`**
```javascript
let latestManifestUpload = null;
```
- [ ] **Step 4: Add helper functions near `uploadMp3()`**
```javascript
function joinBusinessPath(dir, name) {
const cleanDir = (dir || '/data').trim().replace(/\/+$/, '') || '/data';
return `${cleanDir}/${name}`;
}
async function uploadManifestMp3Batch() {
const files = manifestMp3FilesEl.files;
if (!files || files.length === 0) {
alert('请选择至少一个 MP3 文件');
return;
}
const courseId = manifestCourseIdEl.value.trim();
if (!courseId) {
alert('请填写课程 ID');
return;
}
const form = new FormData();
Array.from(files).forEach(file => form.append('file', file));
const res = await fetch('/api/upload-mp3-batch', {method: 'POST', body: form});
const data = await res.json();
if (!res.ok) {
alert(data.error || '上传失败');
return;
}
latestManifestUpload = {
course_id: courseId,
files: data.files.map(file => ({
...file,
target_path: joinBusinessPath(manifestTargetDirEl.value, file.original_name)
}))
};
manifestUploadResultEl.style.display = 'block';
manifestUploadInfoEl.textContent = JSON.stringify(latestManifestUpload, null, 2);
fillManifestPayload();
}
function fillManifestPayload() {
if (!latestManifestUpload) {
alert('请先上传课程 MP3 文件');
return;
}
actionEl.value = 'UPDATE_MANIFEST';
updateTemplate();
payloadEl.value = JSON.stringify({
course_id: latestManifestUpload.course_id,
assets: latestManifestUpload.files.map(file => ({
url: file.url,
md5: file.md5,
target_path: file.target_path
}))
}, null, 2);
}
```
- [ ] **Step 5: Add event listeners near existing upload listeners**
```javascript
document.getElementById('uploadManifestMp3Btn').addEventListener('click', uploadManifestMp3Batch);
document.getElementById('fillManifestBtn').addEventListener('click', fillManifestPayload);
```
- [ ] **Step 6: Ensure progress panel tracks UPDATE_MANIFEST**
Find:
```javascript
if (!msg || !['DOWNLOAD', 'OTA_UPDATE'].includes(msg.action) || !msg.header || !msg.header.req_id) return;
```
Change to:
```javascript
if (!msg || !['DOWNLOAD', 'OTA_UPDATE', 'UPDATE_MANIFEST'].includes(msg.action) || !msg.header || !msg.header.req_id) return;
```
- [ ] **Step 7: Run Python syntax check**
Run:
```bash
python -m py_compile "main/boards/sening-xiaozhi-s3/MQTT_Web/local_mqtt_test_server.py"
```
Expected: no output.
---
### Task 6: End-to-end validation commands
**Files:**
- No code changes.
- [ ] **Step 1: Build firmware**
Run:
```bash
cmd.exe //c "set MSYSTEM=& idf.py build"
```
Expected:
```text
Project build complete.
Generated D:/Project/xiaozhi-esp32/build/xiaozhi.bin
```
- [ ] **Step 2: Start local MQTT web server manually**
Run the existing launcher from Windows Explorer or command prompt:
```bat
main\boards\sening-xiaozhi-s3\start_mqtt_test_server.bat
```
Expected: browser opens local test page.
- [ ] **Step 3: Web UI manual test**
Use the new “批量导入课程 MP3” section:
1. Set course ID to `course_001`.
2. Select two MP3 files.
3. Keep target dir `/data/course_001`.
4. Click “上传并生成 UPDATE_MANIFEST”.
5. Verify generated payload shape:
```json
{
"course_id": "course_001",
"assets": [
{
"url": "http://