輸入頁面路徑與密碼後按「載入」。
。");
}
box.innerHTML='診斷與改善建議
'+out.join("");
}
function render(){
const fr=$("frame"), ov=$("ov");
let doc; try{doc=fr.contentDocument;}catch(e){doc=null;}
unhidePreview(doc); renderOverlay(); renderClickList(); renderDiagnosis();
const w=fr.clientWidth;
const h=doc?Math.max(doc.body.scrollHeight,fr.clientHeight):(data?.pageMeta.pageHeight||fr.clientHeight);
$("stage").style.height=h+"px"; fr.style.height=h+"px";
ov.width=w; ov.height=h; ov.style.width=w+"px"; ov.style.height=h+"px";
const ctx=ov.getContext("2d");
if(!data){ctx.clearRect(0,0,w,h);return;}
if(mode==="click") drawHeat(ctx,w,h,data.clicks,30,.5);
else if(mode==="move") drawHeat(ctx,w,h,data.moves,46,.18);
else if(mode==="confetti") drawConfetti(ctx,w,h,data.clicks);
else if(mode==="scroll") drawAttention(ctx,w,h);
else ctx.clearRect(0,0,w,h); // 覆蓋報告只用標籤，不畫熱區
}
async function load(){
const page=$("page").value||"/", vwb=$("vwb").value, key=$("key").value;
const from=$("from").value||"2000-01-01", to=$("to").value||"2999-12-31";
$("msg").textContent="載入中…"; $("msg").style.display="block";
try{
const r=await fetch(`/hmReport?key=${encodeURIComponent(key)}&page=${encodeURIComponent(page)}&vwb=${vwb}&from=${from}&to=${to}`);
if(r.status===401){$("msg").textContent="密碼錯誤。";return;}
data=await r.json();
}catch(e){$("msg").textContent="讀取失敗，確認函式已部署。";return;}
$("msg").style.display="none";
$("stat").textContent=`訪客 ${data.sessions} · 點擊 ${data.clicks.length} · 有停留紀錄 ${data.dwellSessions ?? 0} 人`;
const fr=$("frame"); const width=WIDTHS[vwb];
$("stage").style.width=width+"px"; fr.style.width=width+"px";
fr.onload=()=>setTimeout(render,300);
fr.src=page; // 同網域，載入活的頁面當底圖
setTimeout(render,600);
}
document.querySelectorAll(".t").forEach(t=>t.onclick=()=>{
document.querySelectorAll(".t").forEach(x=>x.classList.remove("on"));
t.classList.add("on"); mode=t.dataset.m; render();
});
$("load").onclick=load;
// 預設日期：近 30 天
const d=new Date(),p=n=>String(n).padStart(2,"0");
$("to").value=`${d.getFullYear()}-${p(d.getMonth()+1)}-${p(d.getDate())}`;
const d0=new Date(Date.now()-30*864e5);
$("from").value=`${d0.getFullYear()}-${p(d0.getMonth()+1)}-${p(d0.getDate())}`;