perf(report): load side wrinkle layers after report entry

This commit is contained in:
xsl
2026-10-16 16:34:11 +08:00
parent b19811f974
commit 9181069643
8 changed files with 256 additions and 8 deletions
+33
View File
@@ -133,6 +133,10 @@
currentScreen = id;
renderAccountStatus();
if (id === 's-report') resetReport(); // 每次进入报告页都还原初始状态
if (id === 's-report') {
// Let the report paint before initiating optional side annotation work.
requestAnimationFrame(function(){requestAnimationFrame(loadReportWrinkles);});
}
if (nav === 'push') history.pushState({ screen: id }, '');
else if (nav === 'replace') history.replaceState({ screen: id }, '');
}
@@ -1602,9 +1606,37 @@
refreshHeight();
}
var wrinklePhotoEpoch = 0;
var activeWrinkleReport = null;
function loadReportWrinkles() {
var report=activeWrinkleReport, job=report && report.payload && report.payload.wrinkle_job;
if(report && job && report.started && job.status!=='pending' && currentScreen==='s-report' && report.owner===(AccountClient.user()&&AccountClient.user().id)) {
renderWrinkleSides(report.photos,report.payload);return;
}
if (!report || !job || job.status!=='pending' || report.started || IS_MOCK || currentScreen!=='s-report' ||
report.owner!==(AccountClient.user() && AccountClient.user().id)) return;
report.started=true;
var controller=typeof AbortController!=='undefined'?new AbortController():null;
var timer=setTimeout(function(){if(controller)controller.abort();fail();},65000);
var finished=false;
function visible(){return report===activeWrinkleReport && currentScreen==='s-report' && report.owner===(AccountClient.user()&&AccountClient.user().id);}
function fail(){
if(finished)return;finished=true;clearTimeout(timer);job.status='unavailable';
if(visible())renderWrinkleSides(report.photos,report.payload);
}
fetch('api/wrinkle-views',{method:'POST',headers:{'Content-Type':'application/json'},
body:JSON.stringify({token:job.token}),signal:controller?controller.signal:undefined})
.then(function(res){if(!res.ok)throw Error('annotation unavailable');return res.json();})
.then(function(data){
if(finished)return;if(!data.ok||!data.wrinkle_views){fail();return;}
finished=true;clearTimeout(timer);job.status='complete';report.payload.wrinkle_views=data.wrinkle_views;
if(visible())renderWrinkleSides(report.photos,report.payload); // Images only: never re-score/rewrite conclusions.
}).catch(fail);
}
function renderWrinkleSides(reportPhotos, payload) {
var epoch = ++wrinklePhotoEpoch, wrap = $('#wrinkle-sides'), note = $('#wrinkle-layer-note');
function refresh() {
note.textContent=payload && payload.wrinkle_job && payload.wrinkle_job.status==='pending' ?
'侧脸皱纹标注加载中…' : '部分侧脸未获取皱纹标注,未标注的侧脸仅展示原图。';
var visible = Array.from(wrap.querySelectorAll('figure:not([hidden])'));
wrap.hidden = !visible.length;
note.hidden = !visible.some(function(f) { return f.querySelector('img').dataset.hasAnnotation !== 'true'; });
@@ -1633,6 +1665,7 @@
refresh();
}
function renderReport(vm, frontPhoto, sidePhoto, payload, reportPhotos) {
activeWrinkleReport={payload:payload,photos:reportPhotos || [frontPhoto,sidePhoto,null],owner:AccountClient.user()&&AccountClient.user().id,started:false};
renderContourSides(reportPhotos || [frontPhoto, sidePhoto, null]);
reportOwner = AccountClient.user() && AccountClient.user().id;
// Historical snapshots also use their saved dimensions, never the old API total.