<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TikTok 回复助手</title>
<style>
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 20px; background-color: #f0f2f5; }
.container { max-width: 600px; margin: 0 auto; background-color: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 20px; }
h1 { font-size: 24px; color: #333; }
#task-container { margin-top: 20px; padding: 15px; background-color: #fafafa; border: 1px solid #e8e8e8; border-radius: 5px; min-height: 100px; white-space: pre-wrap; word-wrap: break-word; }
#reply-area { margin-top: 20px; display: none; }
textarea { width: 100%; box-sizing: border-box; padding: 10px; border-radius: 5px; border: 1px solid #ccc; font-size: 16px; min-height: 120px; }
button { display: block; width: 100%; padding: 12px; font-size: 16px; font-weight: bold; color: white; background-color: #007bff; border: none; border-radius: 5px; cursor: pointer; margin-top: 10px; }
button:hover { background-color: #0056b3; }
#status { text-align: center; color: #888; margin-top: 20px; }
</style>
</head>
<body>
<div class="container">
<h1>TikTok 回复遥控器</h1>
<div id="task-container">正在等待PC端发送任务...</div>
<div id="reply-area">
<textarea id="reply-text" placeholder="在此输入回复内容..."></textarea>
<button id="submit-reply">发送回复</button>
</div>
<div id="status"></div>
</div>
<script>
// 【重要】请将下面的网址替换为你自己的Cloudflare Worker地址！
const API_BASE_URL = 'https://tiktok-reply-worker.1170731839.workers.dev';
const taskContainer = document.getElementById('task-container');
const replyArea = document.getElementById('reply-area');
const replyText = document.getElementById('reply-text');
const submitButton = document.getElementById('submit-reply');
const statusDiv = document.getElementById('status');
let currentTask = null;
async function fetchTask() {
try {
statusDiv.textContent = '正在检查任务...';
const response = await fetch(`${API_BASE_URL}/api/task`);
const data = await response.json();
if (data.success && data.task) {
currentTask = data.task;
const conversationText = currentTask.conversation.map(msg => `${msg.发言人} (${msg.时间}):\n${msg.内容}`).join('\n\n');
taskContainer.textContent = conversationText;
replyArea.style.display = 'block';
statusDiv.textContent = `收到新任务 (ID: ${currentTask.id})，等待回复。`;
clearInterval(pollingInterval); // 收到任务后停止轮询
} else {
taskContainer.textContent = '正在等待PC端发送任务...';
replyArea.style.display = 'none';
statusDiv.textContent = '暂无任务。';
}
} catch (error) {
console.error('Error fetching task:', error);
statusDiv.textContent = '获取任务失败，请检查网络和API地址。';
}
}
submitButton.addEventListener('click', async () => {
if (!currentTask || !replyText.value.trim()) {
alert('请输入回复内容！');
return;
}
try {
submitButton.disabled = true;
submitButton.textContent = '发送中...';
const response = await fetch(`${API_BASE_URL}/api/reply`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ reply: replyText.value.trim() })
});
const data = await response.json();
if (data.success) {
alert('回复成功！PC端将自动发送。');
replyText.value = '';
currentTask = null;
fetchTask(); // 重新开始检查
pollingInterval = setInterval(fetchTask, 5000); // 重新开始轮询
} else {
throw new Error(data.message || 'Unknown error');
}
} catch (error) {
console.error('Error submitting reply:', error);
alert('回复失败，请重试！');
} finally {
submitButton.disabled = false;
submitButton.textContent = '发送回复';
}
});
// 页面加载后立即检查一次，然后每5秒轮询一次
fetchTask();
let pollingInterval = setInterval(fetchTask, 5000);
</script>
</body>
</html>