// Version 1.2 - UI升级 + 上传自动填充 document.addEventListener('DOMContentLoaded', function() { // API 基础地址 const API_BASE = '/api'; // 全局状态 let currentSurveyId = null; let currentQuestions = []; // 显示对应板块 function showSection(sectionId) { document.querySelectorAll('main > section').forEach(s => s.style.display = 'none'); document.getElementById(sectionId).style.display = 'block'; if (sectionId === 'list') loadSurveys(); } // 导航点击 document.querySelectorAll('nav a').forEach(link => { link.addEventListener('click', e => { e.preventDefault(); const href = link.getAttribute('href').substring(1); showSection(href); // 全局语音测试函数(可在浏览器控制台调用) window.testVoice = function() { if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { console.log('❌ 浏览器不支持 SpeechRecognition API'); return false; } console.log('✅ 浏览器支持语音识别'); const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; const recognition = new SpeechRecognition(); recognition.lang = 'zh-CN'; recognition.interimResults = false; recognition.onresult = e => console.log('识别结果:', e.results[0][0].transcript); recognition.onerror = e => console.log('识别错误:', e.error); recognition.start(); console.log('🎤 语音识别已启动,请说话...'); return true; }; // 自动检测并提示 window.addEventListener('load', () => { if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { console.warn('⚠️ 当前浏览器不支持语音识别功能,请使用 Chrome 或 Edge 以获得完整体验。'); } }); }); // 全局语音测试函数(可在浏览器控制台调用) window.testVoice = function() { if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { console.log('❌ 浏览器不支持 SpeechRecognition API'); return false; } console.log('✅ 浏览器支持语音识别'); const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; const recognition = new SpeechRecognition(); recognition.lang = 'zh-CN'; recognition.interimResults = false; recognition.onresult = e => console.log('识别结果:', e.results[0][0].transcript); recognition.onerror = e => console.log('识别错误:', e.error); recognition.start(); console.log('🎤 语音识别已启动,请说话...'); return true; }; // 自动检测并提示 window.addEventListener('load', () => { if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { console.warn('⚠️ 当前浏览器不支持语音识别功能,请使用 Chrome 或 Edge 以获得完整体验。'); } }); }); // 加载问卷列表 async function loadSurveys() { const container = document.getElementById('survey-list'); container.innerHTML = '
加载中...
'; try { const res = await fetch(API_BASE + '/surveys'); const surveys = await res.json(); if (surveys.length === 0) { container.innerHTML = '

暂无问卷。

'; return; } container.innerHTML = ''; surveys.forEach(s => { const div = document.createElement('div'); div.className = 'survey-card'; div.innerHTML = `

${s.title}

${s.description || '无描述'}

创建于 ${new Date(s.created_at).toLocaleString()} `; container.appendChild(div); // 全局语音测试函数(可在浏览器控制台调用) window.testVoice = function() { if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { console.log('❌ 浏览器不支持 SpeechRecognition API'); return false; } console.log('✅ 浏览器支持语音识别'); const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; const recognition = new SpeechRecognition(); recognition.lang = 'zh-CN'; recognition.interimResults = false; recognition.onresult = e => console.log('识别结果:', e.results[0][0].transcript); recognition.onerror = e => console.log('识别错误:', e.error); recognition.start(); console.log('🎤 语音识别已启动,请说话...'); return true; }; // 自动检测并提示 window.addEventListener('load', () => { if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { console.warn('⚠️ 当前浏览器不支持语音识别功能,请使用 Chrome 或 Edge 以获得完整体验。'); } }); }); } catch (err) { container.innerHTML = '

加载失败,请检查网络。

'; console.error(err); } } // 查看问卷详情 async function viewSurvey(id) { currentSurveyId = id; const res = await fetch(API_BASE + '/surveys'); const surveys = await res.json(); const survey = surveys.find(s => s.id == id); if (!survey) { alert('问卷不存在'); return; } document.getElementById('survey-info').innerHTML = `

${survey.title}

${survey.description || ''}

`; // 获取问题 const qRes = await fetch(API_BASE + '/surveys/' + id + '/questions'); if (qRes.ok) { currentQuestions = await qRes.json(); } else { // 模拟问题 currentQuestions = [ { id: 1, text: '请填写您的反馈', type: 'text' }, { id: 2, text: '您是否推荐本产品?', type: 'radio' } ]; } const container = document.getElementById('questions-list'); container.innerHTML = ''; currentQuestions.forEach((q, idx) => { const div = document.createElement('div'); div.className = 'question-item'; div.innerHTML = `

${idx + 1}. ${q.text}

${q.type === 'text' ? ` ` : ` `} `; container.appendChild(div); // 全局语音测试函数(可在浏览器控制台调用) window.testVoice = function() { if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { console.log('❌ 浏览器不支持 SpeechRecognition API'); return false; } console.log('✅ 浏览器支持语音识别'); const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; const recognition = new SpeechRecognition(); recognition.lang = 'zh-CN'; recognition.interimResults = false; recognition.onresult = e => console.log('识别结果:', e.results[0][0].transcript); recognition.onerror = e => console.log('识别错误:', e.error); recognition.start(); console.log('🎤 语音识别已启动,请说话...'); return true; }; // 自动检测并提示 window.addEventListener('load', () => { if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { console.warn('⚠️ 当前浏览器不支持语音识别功能,请使用 Chrome 或 Edge 以获得完整体验。'); } }); }); showSection('survey-detail'); } // 语音识别 - 增强版 function startSpeech(questionId) { // 检查浏览器支持 if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { alert('您的浏览器不支持语音识别,请使用 Chrome 25+ 或 Edge 79+ 版本。'); return; } // 检查麦克风权限 if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia({ audio: true }) .then(stream => { stream.getTracks().forEach(track => track.stop()); // 仅检查权限,立即释放 proceedSpeechRecognition(questionId); }) .catch(err => { console.error('麦克风权限被拒绝或不可用:', err); alert('请允许麦克风权限,否则无法使用语音输入。'); // 全局语音测试函数(可在浏览器控制台调用) window.testVoice = function() { if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { console.log('❌ 浏览器不支持 SpeechRecognition API'); return false; } console.log('✅ 浏览器支持语音识别'); const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; const recognition = new SpeechRecognition(); recognition.lang = 'zh-CN'; recognition.interimResults = false; recognition.onresult = e => console.log('识别结果:', e.results[0][0].transcript); recognition.onerror = e => console.log('识别错误:', e.error); recognition.start(); console.log('🎤 语音识别已启动,请说话...'); return true; }; // 自动检测并提示 window.addEventListener('load', () => { if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { console.warn('⚠️ 当前浏览器不支持语音识别功能,请使用 Chrome 或 Edge 以获得完整体验。'); } }); }); } else { proceedSpeechRecognition(questionId); } } function proceedSpeechRecognition(questionId) { const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; const recognition = new SpeechRecognition(); recognition.lang = 'zh-CN'; recognition.interimResults = false; recognition.maxAlternatives = 1; const status = document.getElementById('status-' + questionId); const answerInput = document.getElementById('answer-' + questionId); if (!status || !answerInput) { console.error('找不到状态或输入框'); return; } status.textContent = '🎤 聆听中...(请开始说话)'; status.classList.add('recording'); recognition.onresult = event => { if (event.results.length > 0 && event.results[0].length > 0) { const transcript = event.results[0][0].transcript; answerInput.value = transcript; status.textContent = '✅ 识别完成: ' + transcript.substring(0, 30) + (transcript.length > 30 ? '...' : ''); } else { status.textContent = '⚠️ 未检测到语音'; } status.classList.remove('recording'); }; recognition.onerror = event => { let errorMsg = '❌ 识别失败'; switch (event.error) { case 'no-speech': errorMsg = '未检测到语音,请重试'; break; case 'audio-capture': errorMsg = '麦克风不可用'; break; case 'not-allowed': errorMsg = '麦克风权限被拒绝'; break; default: errorMsg = '识别错误: ' + event.error; } status.textContent = errorMsg; status.classList.remove('recording'); console.error('Speech recognition error:', event.error); }; recognition.onend = () => { if (status.textContent.includes('聆听中')) { status.textContent = '🛑 识别超时'; status.classList.remove('recording'); } }; try { recognition.start(); setTimeout(() => { if (status.textContent.includes('聆听中')) { recognition.stop(); } }, 10000); // 超时 10 秒 } catch (err) { status.textContent = '❌ 启动语音识别失败'; console.error('recognition.start error:', err); } } // 提交答案 async function submitAnswers() { const answers = currentQuestions.map(q => { if (q.type === 'text') { return { questionId: q.id, answer: document.getElementById('answer-' + q.id).value }; } else { const selected = document.querySelector(`input[name="q${q.id}"]:checked`); return { questionId: q.id, answer: selected ? selected.value : '' }; } // 全局语音测试函数(可在浏览器控制台调用) window.testVoice = function() { if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { console.log('❌ 浏览器不支持 SpeechRecognition API'); return false; } console.log('✅ 浏览器支持语音识别'); const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; const recognition = new SpeechRecognition(); recognition.lang = 'zh-CN'; recognition.interimResults = false; recognition.onresult = e => console.log('识别结果:', e.results[0][0].transcript); recognition.onerror = e => console.log('识别错误:', e.error); recognition.start(); console.log('🎤 语音识别已启动,请说话...'); return true; }; // 自动检测并提示 window.addEventListener('load', () => { if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { console.warn('⚠️ 当前浏览器不支持语音识别功能,请使用 Chrome 或 Edge 以获得完整体验。'); } }); }); try { const res = await fetch(API_BASE + '/surveys/' + currentSurveyId + '/responses', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ answers }) // 全局语音测试函数(可在浏览器控制台调用) window.testVoice = function() { if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { console.log('❌ 浏览器不支持 SpeechRecognition API'); return false; } console.log('✅ 浏览器支持语音识别'); const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; const recognition = new SpeechRecognition(); recognition.lang = 'zh-CN'; recognition.interimResults = false; recognition.onresult = e => console.log('识别结果:', e.results[0][0].transcript); recognition.onerror = e => console.log('识别错误:', e.error); recognition.start(); console.log('🎤 语音识别已启动,请说话...'); return true; }; // 自动检测并提示 window.addEventListener('load', () => { if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { console.warn('⚠️ 当前浏览器不支持语音识别功能,请使用 Chrome 或 Edge 以获得完整体验。'); } }); }); if (res.ok) { alert('提交成功!'); showSection('list'); } else { alert('提交失败'); } } catch (err) { alert('网络错误'); } } // 创建问卷 let questionCount = 0; function addQuestion() { const container = document.getElementById('questions-container'); const div = document.createElement('div'); div.className = 'question-item'; div.innerHTML = ` `; container.appendChild(div); questionCount++; } document.getElementById('create-form').addEventListener('submit', async e => { e.preventDefault(); const title = document.getElementById('title').value; const description = document.getElementById('description').value; const questions = []; document.querySelectorAll('#questions-container .question-item').forEach(item => { const text = item.querySelector('.q-text').value; const type = item.querySelector('.q-type').value; if (text.trim()) { questions.push({ text, type // 全局语音测试函数(可在浏览器控制台调用) window.testVoice = function() { if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { console.log('❌ 浏览器不支持 SpeechRecognition API'); return false; } console.log('✅ 浏览器支持语音识别'); const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; const recognition = new SpeechRecognition(); recognition.lang = 'zh-CN'; recognition.interimResults = false; recognition.onresult = e => console.log('识别结果:', e.results[0][0].transcript); recognition.onerror = e => console.log('识别错误:', e.error); recognition.start(); console.log('🎤 语音识别已启动,请说话...'); return true; }; // 自动检测并提示 window.addEventListener('load', () => { if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { console.warn('⚠️ 当前浏览器不支持语音识别功能,请使用 Chrome 或 Edge 以获得完整体验。'); } }); }); } // 全局语音测试函数(可在浏览器控制台调用) window.testVoice = function() { if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { console.log('❌ 浏览器不支持 SpeechRecognition API'); return false; } console.log('✅ 浏览器支持语音识别'); const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; const recognition = new SpeechRecognition(); recognition.lang = 'zh-CN'; recognition.interimResults = false; recognition.onresult = e => console.log('识别结果:', e.results[0][0].transcript); recognition.onerror = e => console.log('识别错误:', e.error); recognition.start(); console.log('🎤 语音识别已启动,请说话...'); return true; }; // 自动检测并提示 window.addEventListener('load', () => { if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { console.warn('⚠️ 当前浏览器不支持语音识别功能,请使用 Chrome 或 Edge 以获得完整体验。'); } }); }); const payload = { title, description, questions }; try { const res = await fetch(API_BASE + '/surveys', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) // 全局语音测试函数(可在浏览器控制台调用) window.testVoice = function() { if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { console.log('❌ 浏览器不支持 SpeechRecognition API'); return false; } console.log('✅ 浏览器支持语音识别'); const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; const recognition = new SpeechRecognition(); recognition.lang = 'zh-CN'; recognition.interimResults = false; recognition.onresult = e => console.log('识别结果:', e.results[0][0].transcript); recognition.onerror = e => console.log('识别错误:', e.error); recognition.start(); console.log('🎤 语音识别已启动,请说话...'); return true; }; // 自动检测并提示 window.addEventListener('load', () => { if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { console.warn('⚠️ 当前浏览器不支持语音识别功能,请使用 Chrome 或 Edge 以获得完整体验。'); } }); }); if (res.ok) { alert('问卷创建成功!'); document.getElementById('create-form').reset(); document.getElementById('questions-container').innerHTML = ''; showSection('list'); } else { alert('创建失败'); } } catch (err) { alert('网络错误'); } // 全局语音测试函数(可在浏览器控制台调用) window.testVoice = function() { if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { console.log('❌ 浏览器不支持 SpeechRecognition API'); return false; } console.log('✅ 浏览器支持语音识别'); const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; const recognition = new SpeechRecognition(); recognition.lang = 'zh-CN'; recognition.interimResults = false; recognition.onresult = e => console.log('识别结果:', e.results[0][0].transcript); recognition.onerror = e => console.log('识别错误:', e.error); recognition.start(); console.log('🎤 语音识别已启动,请说话...'); return true; }; // 自动检测并提示 window.addEventListener('load', () => { if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { console.warn('⚠️ 当前浏览器不支持语音识别功能,请使用 Chrome 或 Edge 以获得完整体验。'); } }); }); // 文件上传 - 改进版:自动填充 async function uploadFile() { const input = document.getElementById('file-input'); if (!input.files.length) { alert('请先选择文件'); return; } const file = input.files[0]; const formData = new FormData(); formData.append('file', file); const resultDiv = document.getElementById('upload-result'); resultDiv.innerHTML = '
上传解析中...
'; try { const res = await fetch(API_BASE + '/upload-parse', { method: 'POST', body: formData // 全局语音测试函数(可在浏览器控制台调用) window.testVoice = function() { if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { console.log('❌ 浏览器不支持 SpeechRecognition API'); return false; } console.log('✅ 浏览器支持语音识别'); const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; const recognition = new SpeechRecognition(); recognition.lang = 'zh-CN'; recognition.interimResults = false; recognition.onresult = e => console.log('识别结果:', e.results[0][0].transcript); recognition.onerror = e => console.log('识别错误:', e.error); recognition.start(); console.log('🎤 语音识别已启动,请说话...'); return true; }; // 自动检测并提示 window.addEventListener('load', () => { if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { console.warn('⚠️ 当前浏览器不支持语音识别功能,请使用 Chrome 或 Edge 以获得完整体验。'); } }); }); const data = await res.json(); if (res.ok) { // 自动填充到创建问卷表单 document.getElementById('title').value = '文档导入问卷 ' + new Date().toLocaleString(); document.getElementById('description').value = '自动从文档生成'; document.getElementById('questions-container').innerHTML = ''; data.questions.forEach(q => { addQuestion(); const items = document.querySelectorAll('#questions-container .question-item'); const last = items[items.length - 1]; last.querySelector('.q-text').value = q.text; last.querySelector('.q-type').value = q.type || 'text'; // 全局语音测试函数(可在浏览器控制台调用) window.testVoice = function() { if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { console.log('❌ 浏览器不支持 SpeechRecognition API'); return false; } console.log('✅ 浏览器支持语音识别'); const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; const recognition = new SpeechRecognition(); recognition.lang = 'zh-CN'; recognition.interimResults = false; recognition.onresult = e => console.log('识别结果:', e.results[0][0].transcript); recognition.onerror = e => console.log('识别错误:', e.error); recognition.start(); console.log('🎤 语音识别已启动,请说话...'); return true; }; // 自动检测并提示 window.addEventListener('load', () => { if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { console.warn('⚠️ 当前浏览器不支持语音识别功能,请使用 Chrome 或 Edge 以获得完整体验。'); } }); }); // 跳转到创建问卷页面 showSection('create'); resultDiv.innerHTML = '
解析成功,已自动填充到创建表单!
'; } else { resultDiv.innerHTML = `
解析失败:${data.error}
`; } } catch (err) { resultDiv.innerHTML = '
上传失败,请检查网络。
'; } } // 初始化显示列表 showSection('list'); // 暴露全局函数 window.showSection = showSection; window.loadSurveys = loadSurveys; window.viewSurvey = viewSurvey; window.startSpeech = startSpeech; window.submitAnswers = submitAnswers; window.addQuestion = addQuestion; window.uploadFile = uploadFile; // 全局语音测试函数(可在浏览器控制台调用) window.testVoice = function() { if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { console.log('❌ 浏览器不支持 SpeechRecognition API'); return false; } console.log('✅ 浏览器支持语音识别'); const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; const recognition = new SpeechRecognition(); recognition.lang = 'zh-CN'; recognition.interimResults = false; recognition.onresult = e => console.log('识别结果:', e.results[0][0].transcript); recognition.onerror = e => console.log('识别错误:', e.error); recognition.start(); console.log('🎤 语音识别已启动,请说话...'); return true; }; // 自动检测并提示 window.addEventListener('load', () => { if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { console.warn('⚠️ 当前浏览器不支持语音识别功能,请使用 Chrome 或 Edge 以获得完整体验。'); } }); });