import {readFile,writeFile,mkdir} from 'node:fs/promises'; import path from 'node:path'; import layouts from '../src/content/layouts/reference/manifest.json'; const root=path.resolve(import.meta.dirname,'..'),target=path.join(root,'public/layout-reference'); const esc=(s:string)=>s.replaceAll('&','&').replaceAll('<','<').replaceAll('"','"'); async function main(){ await writeFile(path.join(target,'manifest.json'),JSON.stringify(layouts,null,2)+'\n'); const runtime=await readFile(path.join(root,'src/content/layouts/reference/ReferenceLayout.tsx'),'utf8');await writeFile(path.join(target,'ReferenceLayout.tsx'),runtime); for(const l of layouts){ const layers=l.elements.map(e=>{const[x,y,w,h]=e.box;return ` ${esc(e.kind==='text'?e.text||e.role+'（未辨识原字形）':'')}

${esc(e.kind==='text'?e.text||e.role+'（未辨识原字形）':'')}

`}).join('\n'); const html=`\n${l.id} · ${l.name}

${l.id} / ${l.name}

原图纸底与画框

\n${layers}\n 构件标注

构件标注

原图第 ${l.source.row} 行、第 ${l.source.column} 列；${l.width}×${l.height} 像素。显示为原始构件重组，无新生成图形。放大不增加细节。

按类型检查文字 T图片/色块 I装饰 D显示边界

点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。

${l.elements.map(e=>``).join('')}

ID	分类与用途	文字内容
${e.id}	${e.kind==='text'?'文字':e.kind==='image'?'图片占位/色块':'装饰'} / ${esc(e.role)}	${esc(e.kind==='text'?e.text??'待核对，保留原字形':'—')}

构件 JSON · 原裁片 · 标注图 · 27 张索引

修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。

\n`; await writeFile(path.join(target,l.id,'index.html'),html); } await writeFile(path.join(target,'index.html'),`27 张原图版面索引

27 张原图版面 · 一一对应

按原图从上到下、每行从左到右编号，排除左侧说明栏。点击每张可分开检查文字、图片占位/色块与装饰。

查看编号原图 · 机器索引

\n`); console.log('Built 27 layer inspectors and the source ID index.'); } main().catch(e=>{console.error(e);process.exitCode=1});