Ai_GirlFriend/修改前端代码说明.md

# 前端代码修改说明

## 🎯 问题

点击音乐库音乐时显示"功能开发中..."，因为前端代码还没有修改。

## 🔧 解决方案

需要修改 `xuniYou/pages/index/index.vue` 文件。

## 📝 修改步骤

### 步骤 1: 打开文件

使用编辑器打开：`xuniYou/pages/index/index.vue`

### 步骤 2: 找到要修改的代码

搜索 `selectMusicFromLibrary`，找到约第 2387 行的这段代码：

```javascript
selectMusicFromLibrary(music) {
	// 记录播放次数
	uni.request({
		url: baseURLPy + '/music/' + music.id + '/play',
		method: 'POST',
		header: {
			'Authorization': 'Bearer ' + uni.getStorageSync("token")
		}
	});
	
	// 使用音乐库的歌曲生成视频
	if (this.singGenerating) {
		uni.showToast({ title: '视频生成中，请稍候...', icon: 'none', duration: 2000 });
		return;
	}
	
	// 这里需要调用唱歌API，传入音乐库的音乐URL
	uni.showModal({
		title: '提示',
		content: `确定让她唱《${music.title}》吗？`,
		success: (modalRes) => {
			if (modalRes.confirm) {
				// TODO: 调用唱歌API，使用 music.music_url
				uni.showToast({ title: '功能开发中...', icon: 'none' });  // ← 这里是问题
			}
		}
	});
},
```

### 步骤 3: 删除旧代码

删除从 `// 这里需要调用唱歌API` 到 `});` 的整段代码（包括 showModal）。

### 步骤 4: 添加新代码

在原位置添加以下代码：

```javascript
// 检查音乐类型
if (music.upload_type === 'external') {
	uni.showModal({
		title: '提示',
		content: '外部平台音乐无法生成视频，请使用直链或上传的音乐',
		showCancel: false
	});
	return;
}

// 确认生成
uni.showModal({
	title: '生成唱歌视频',
	content: `确定让她唱《${music.title}》吗？`,
	success: (modalRes) => {
		if (modalRes.confirm) {
			this.generateSingVideoFromLibrary(music);
		}
	}
});
```

### 步骤 5: 添加两个新方法

在 `selectMusicFromLibrary` 方法后面（在 `toggleMusicLike` 方法前面），添加两个新方法：

```javascript
// 生成唱歌视频（从音乐库）
generateSingVideoFromLibrary(music) {
	const that = this;
	
	// 显示加载
	uni.showLoading({ title: '准备中...' });
	
	// 第 1 步：转换为系统歌曲
	uni.request({
		url: baseURLPy + '/music/convert-to-song',
		method: 'POST',
		header: {
			'Authorization': 'Bearer ' + uni.getStorageSync("token")
		},
		data: {
			music_id: music.id
		},
		success: (res) => {
			if (res.data && res.data.code === 1) {
				const songId = res.data.data.song_id;
				
				// 第 2 步：调用现有的唱歌生成 API
				that.generateSingVideoWithSongId(songId, music.title);
			} else {
				uni.hideLoading();
				uni.showModal({
					title: '转换失败',
					content: res.data.message || '未知错误',
					showCancel: false
				});
			}
		},
		fail: (err) => {
			uni.hideLoading();
			console.error('转换失败:', err);
			uni.showModal({
				title: '转换失败',
				content: '网络错误，请重试',
				showCancel: false
			});
		}
	});
},

// 使用 song_id 生成唱歌视频
generateSingVideoWithSongId(songId, songTitle) {
	const that = this;
	
	uni.showLoading({ title: '生成中...' });
	
	uni.request({
		url: baseURLPy + '/sing/generate',
		method: 'POST',
		header: {
			'Authorization': 'Bearer ' + uni.getStorageSync("token")
		},
		data: {
			song_id: songId
		},
		success: (res) => {
			uni.hideLoading();
			
			if (res.data && res.data.code === 1) {
				const data = res.data.data;
				
				if (data.status === 'succeeded') {
					// 立即成功（有缓存）
					uni.showToast({
						title: '生成成功',
						icon: 'success'
					});
					
					// 刷新历史记录
					that.getSingHistory();
					
					// 切换到历史记录 tab
					that.switchSingTab('history');
					
					// 播放视频
					if (data.video_url) {
						that.openVideoPlayer(data.video_url);
					}
				} else {
					// 生成中
					that.singGenerating = true;
					that.singGeneratingTaskId = data.generation_task_id;
					
					uni.showToast({
						title: '视频生成中...',
						icon: 'loading',
						duration: 2000
					});
					
					// 开始轮询
					that.getSingGenerateTask(data.generation_task_id);
					
					// 切换到历史记录 tab
					that.switchSingTab('history');
				}
			} else {
				uni.showModal({
					title: '生成失败',
					content: res.data.message || '未知错误',
					showCancel: false
				});
			}
		},
		fail: (err) => {
			uni.hideLoading();
			console.error('生成失败:', err);
			uni.showModal({
				title: '生成失败',
				content: '网络错误，请重试',
				showCancel: false
			});
		}
	});
},
```

### 步骤 6: 保存文件

保存 `xuniYou/pages/index/index.vue` 文件。

### 步骤 7: 重新编译

重新编译前端项目。

## ✅ 完成后的效果

1. 点击音乐库音乐 → 弹出"生成唱歌视频"确认框
2. 确认后 → 显示"准备中..." → "生成中..."
3. 生成完成 → 自动切换到"历史记录" tab
4. 显示并播放生成的视频

## ⚠️ 注意事项

1. 确保后端服务已启动（运行 `启动后端服务.bat`）
2. 外部链接音乐会提示无法生成
3. 生成过程中会自动切换到历史记录 tab

## 🔍 如果还是不行

1. 检查后端服务是否运行：访问 http://localhost:30101/docs
2. 检查浏览器控制台是否有错误
3. 检查 API 地址是否正确（baseURLPy）
4. 检查 TOKEN 是否有效

---

**修改说明版本**: 1.0  
**创建时间**: 2026-02-04