'; const style=document.createElement('style');style.textContent='#archify-route-editor{position:fixed;right:18px;bottom:18px;z-index:10000;font:13px system-ui;color:#172033}#archify-route-editor button,#archify-route-editor select{font:inherit;padding:7px 10px;border:1px solid #a6b5c7;border-radius:7px;background:#fff;color:#172033;cursor:pointer}#archify-route-editor section{margin-top:8px;width:300px;max-height:65vh;overflow:auto;padding:14px;background:#f8fafc;border:1px solid #94a3b8;border-radius:10px;box-shadow:0 6px 30px #0002}#archify-route-editor select{max-width:100%;margin:8px 0}#archify-route-editor .route-actions{display:flex;gap:6px;flex-wrap:wrap}#archify-route-editor .route-status{line-height:1.6}#archify-route-editor strong{display:block}.route-port{cursor:pointer;pointer-events:all} @media print{#archify-route-editor,.route-port-overlay{display:none!important}}'; style.id='archify-route-style';document.head.append(style);document.body.append(panel); const toggle=panel.querySelector('button'),section=panel.querySelector('section'),select=panel.querySelector('select'),status=panel.querySelector('.route-status'); toggle.textContent=t('布线编辑','Edit routes');section.querySelector('strong').textContent=t('选择连线，然后点框的四边连接点','Select a route, then click its ports'); let active=false,index=0,history=[],dirty=false; const overlay=document.createElementNS(NS,'g');overlay.classList.add('route-port-overlay');svg.append(overlay); const edgeElements=e=>Array.from(svg.querySelectorAll('[data-edge-from]')).filter(el=>e.id?el.getAttribute('data-edge-id')===e.id:el.getAttribute('data-edge-from')===e.from&&el.getAttribute('data-edge-to')===e.to); const specEdge=e=>data.workflow.edges.find(x=>e.id?x.id===e.id:x.from===e.from&&x.to===e.to); const node=id=>data.receipt.nodes.find(n=>n.id===id); const sides=['top','right','bottom','left'],names=zh?['上','右','下','左']:sides; const side=(n,p)=>Math.abs(p[1]-n.y)<.1?'top':Math.abs(p[1]-n.y-n.height)<.1?'bottom':Math.abs(p[0]-n.x)<.1?'left':'right'; function paint(e){ const elements=edgeElements(e),path=elements.find(el=>el.tagName.toLowerCase()==='path'); if(!path)return; path.setAttribute('d',e.points.map((p,i)=>(i?'L':'M')+' '+p.join(' ')).join(' '));path.setAttribute('data-composition-points',e.points.map(p=>p.join(',')).join(';')); const label=data.receipt.labels.find(l=>l.edge===e.id),group=elements.find(el=>el.tagName.toLowerCase()==='g'); if(label&&group){const rect=group.querySelector('rect'),text=group.querySelector('text');if(rect){rect.setAttribute('x',label.x-label.width/2);rect.setAttribute('y',label.y-10);}if(text){text.setAttribute('x',label.x);text.setAttribute('y',label.y);}} } function refresh(){ overlay.replaceChildren(); data.receipt.edges.forEach(e=>edgeElements(e).filter(el=>el.tagName.toLowerCase()==='path').forEach(el=>el.setAttribute('stroke-width',specEdge(e).width||(specEdge(e).variant==='emphasis'?1.8:1.4)))); if(!active)return; const e=data.receipt.edges[index],a=node(e.from),b=node(e.to); const fs=side(a,e.points[0]),ts=side(b,e.points.at(-1)); panel.querySelector('.route-sides').textContent=t('起点：','From: ')+names[sides.indexOf(fs)]+t(' → 终点：',' → To: ')+names[sides.indexOf(ts)]; [a,b].forEach((n,endpoint)=>sides.forEach((s,i)=>{ const p=s==='top'?[n.x+n.width/2,n.y]:s==='bottom'?[n.x+n.width/2,n.y+n.height]:s==='left'?[n.x,n.y+n.height/2]:[n.x+n.width,n.y+n.height/2]; const circle=document.createElementNS(NS,'circle');circle.setAttribute('cx',p[0]);circle.setAttribute('cy',p[1]);circle.setAttribute('r','5');circle.setAttribute('fill',s===(endpoint?ts:fs)?'#f97316':'#fff');circle.setAttribute('stroke',endpoint?'#8b5cf6':'#0284c7');circle.setAttribute('stroke-width','2');circle.setAttribute('tabindex','0');circle.setAttribute('role','button');circle.setAttribute('aria-label',(endpoint?t('终点','Target'):t('起点','Source'))+names[i]);circle.classList.add('route-port'); const action=ev=>{ev.preventDefault();ev.stopPropagation();change(endpoint?fs:s,endpoint?s:ts);};circle.addEventListener('click',action);circle.addEventListener('keydown',ev=>{if(ev.key==='Enter'||ev.key===' ')action(ev);});overlay.append(circle); })); edgeElements(e).filter(el=>el.tagName.toLowerCase()==='path').forEach(el=>{el.setAttribute('stroke-width','2.4');}); } function change(fs,ts){ const e=data.receipt.edges[index],a=node(e.from),b=node(e.to); const points=routeBetween(a,b,fs,ts,data.receipt.nodes,...data.receipt.viewBox); if(!points){status.textContent=t('这组连接点没有找到无穿框路线，请换一侧。','No clear route found for these ports. Choose another side.');return;} const spec=specEdge(e),label=data.receipt.labels.find(l=>l.edge===e.id); const segments=points.slice(1).map((p,i)=>({p,q:points[i],len:Math.abs(p[0]-points[i][0])+Math.abs(p[1]-points[i][1])})).sort((a,b)=>b.len-a.len); const candidate=segments.map(({p,q})=>({x:(p[0]+q[0])/2,y:(p[1]+q[1])/2+(p[0]===q[0]?3:-10)})).find(c=>!label||!data.receipt.nodes.some(n=>c.x+label.width/2>n.x&&c.x-label.width/2n.y&&c.y-10delete spec[k]); spec.fromSide=fs;spec.toSide=ts;spec.via=points.slice(1,-1); if(label){Object.assign(label,candidate);spec.labelAt=[label.x,label.y];} dirty=true;data.reviewStatus="pending";paint(e);refresh();status.textContent=t('已修改，尚未通过完整布局校验。下载 HTML 可保留当前效果；JSON 供重新生成和校验。','Modified; full layout validation pending. Download HTML to preserve this view, or JSON for regeneration and validation.'); } data.receipt.edges.forEach((e,i)=>{const option=document.createElement('option');option.value=i;option.textContent=(specEdge(e).label||'')+' · '+(data.workflow.nodes.find(n=>n.id===e.from)?.label||e.from)+' → '+(data.workflow.nodes.find(n=>n.id===e.to)?.label||e.to);select.append(option);}); select.addEventListener('change',()=>{index=Number(select.value);refresh();}); toggle.onclick=()=>{active=!active;section.hidden=!active;refresh();}; svg.addEventListener('click',ev=>{if(!active)return;const el=ev.target.closest('[data-edge-from]');if(!el)return;const i=data.receipt.edges.findIndex(e=>edgeElements(e).includes(el));if(i>=0){index=i;select.value=i;refresh();ev.stopPropagation();}},true); const button=(label,action)=>{const b=document.createElement('button');b.type='button';b.textContent=label;b.onclick=action;panel.querySelector('.route-actions').append(b);}; const restore=s=>{Object.assign(data,clone(s));data.receipt.edges.forEach(paint);refresh();}; button(t('撤销','Undo'),()=>{if(history.length){restore(history.pop());status.textContent=t('已撤销上一步。','Undone.');}}); button(t('恢复原始布线','Restore original'),()=>{history.push(clone(data));restore(baseline);dirty=false;status.textContent=t('已恢复生成时的布线。','Original generated routes restored.');}); const download=(name,body,type)=>{const url=URL.createObjectURL(new Blob([body],{type}));const a=document.createElement('a');a.href=url;a.download=name;a.click();setTimeout(()=>URL.revokeObjectURL(url),1000);}; button(t('下载 JSON','Download JSON'),()=>download('workflow-edited.json',JSON.stringify(data.workflow,null,2),'application/json')); button(t('下载 HTML','Download HTML'),()=>{ const copy=document.documentElement.cloneNode(true);copy.querySelector('#archify-route-editor')?.remove();copy.querySelector('#archify-route-style')?.remove();copy.querySelector('.route-port-overlay')?.remove(); copy.querySelector('#archify-route-data').textContent=JSON.stringify(data).replace(/\n'+copy.outerHTML,'text/html'); }); if(data.reviewStatus==='pending') status.textContent=t('此文件包含手动布线，尚未通过完整校验。','This file contains manual routes; full validation is pending.'); else status.textContent=t('蓝色为起点，紫色为终点，橙色为当前连接点。修改后请下载保存。','Blue: source. Purple: target. Orange: selected port. Download to save changes.'); window.addEventListener('beforeunload',ev=>{if(dirty){ev.preventDefault();ev.returnValue='';}}); })(function routeBetween(a, b, fromSide, toSide, rectangles, width, height) { const vector = {top:[0,-1],bottom:[0,1],left:[-1,0],right:[1,0]}; const anchor = (r,s) => s==='top'?[r.x+r.width/2,r.y]:s==='bottom'?[r.x+r.width/2,r.y+r.height]:s==='left'?[r.x,r.y+r.height/2]:[r.x+r.width,r.y+r.height/2]; const start=anchor(a,fromSide), end=anchor(b,toSide); const stub=(p,s)=>p.map((v,i)=>v+vector[s][i]*20); const u=stub(start,fromSide), v=stub(end,toSide); const clear=(p,q,r)=> p[0]===q[0] ? p[0]>r.x-0.01 && p[0]r.y && Math.min(p[1],q[1])r.y-0.01 && p[1]r.x && Math.min(p[0],q[0])[r.x-20,r.x+r.width+20])]; const ys=[u[1],v[1],(u[1]+v[1])/2,...rectangles.flatMap(r=>[r.y-20,r.y+r.height+20])]; const candidates=[[start,end],[start,u,[v[0],u[1]],v,end],[start,u,[u[0],v[1]],v,end],...xs.map(x=>[start,u,[x,u[1]],[x,v[1]],v,end]),...ys.map(y=>[start,u,[u[0],y],[v[0],y],v,end])]; const clean = points => { const out=[]; for (const p of points) { if(out.length && out.at(-1).every((v,i)=>v===p[i])) continue; while(out.length>1) { const c=out.at(-2),d=out.at(-1); if(!((c[0]===d[0]&&d[0]===p[0]&&(d[1]-c[1])*(p[1]-d[1])>=0)||(c[1]===d[1]&&d[1]===p[1]&&(d[0]-c[0])*(p[0]-d[0])>=0)))break; out.pop(); } out.push(p); } return out; }; const valid=points=> { if(points.length<2 || points.some(p=>p[0]<0||p[1]<0||p[0]>width||p[1]>height))return false; const direction=(p,q,s)=>{const d=vector[s];return (q[0]-p[0])*d[0]+(q[1]-p[1])*d[1]>0 && (d[0]===0?p[0]===q[0]:p[1]===q[1]);}; if(!direction(points[0],points[1],fromSide)||!direction(points.at(-1),points.at(-2),toSide))return false; return points.slice(1).every((q,i)=>{ const p=points[i],len=Math.abs(p[0]-q[0])+Math.abs(p[1]-q[1]); return (p[0]===q[0]||p[1]===q[1])&&len>=(i===0||i===points.length-2?8:16)&&!rectangles.some(r=>clear(p,q,r)); }); }; const cost=p=>p.slice(1).reduce((n,q,i)=>n+Math.abs(q[0]-p[i][0])+Math.abs(q[1]-p[i][1]),0)+(p.length-2)*24; return candidates.map(clean).filter(valid).sort((p,q)=>cost(p)-cost(q))[0]||null; }); ← 教研门户