40 lines
3.5 KiB
Markdown
40 lines
3.5 KiB
Markdown
# 27 张原图对应排版
|
|
|
|
本组发布 27 张原图一一对应的设计 post，加 1 篇 Router。替换此前的 12 套概括构图；原 Router ID 保持稳定，旧 12 篇 post ID 跳转 Router，不擅自映射到一张近似设计。
|
|
|
|
## 原图与编号
|
|
|
|
用户提供的 736×980 拼图中，排除左侧“高级感排版”说明栏；从上到下、每行从左到右编号 ref-01…ref-27。前 3 行各 5 张，后 2 行各 6 张，左下两张计入。`public/layout-reference/numbered-source.png` 给出准确位置；`index.json` 为机器入口。
|
|
|
|
## 识别流程
|
|
|
|
`segment-layout-reference.ts` 从外沿采样灰底，以 RGB 最大通道差 >19 建前景 mask，四邻域连通域按宽高范围筛选，自动检测 27 张。按 y 聚行、按 x 排序；没有手写外裁片表。
|
|
|
|
`recognize-layout-text.swift` 使用 macOS Vision 本地 OCR，证据保存在 `reference/ocr-evidence.json`。逐张人工复核的文字、图位、装饰区域记录在 `annotations.json`。图位依据局部颜色种子建立掩膜；文字按亮暗与背景颜色分离，保留未知微字，不把 OCR 候选当作确认内容。
|
|
|
|
`group-text.ts` 将与既有文字块在基线、间距和字高上相连的残余字形合并。ref-01 的末尾字符保持在 T01，不能再产生 T03；ref-21 的 03 日期与旋转英文保持独立。
|
|
|
|
T=文字，I=图片占位/色块，D=装饰，背景另存。每个构件有类型、角色、局部 box、原字形资产；文字可读则有 text，未知则为 null。27 张的 source SHA 与裁片绝对坐标持久保存。不同设计使用完整键，例如 ref-01/T01，运行时拒绝跨设计与跨类型替换。
|
|
|
|
## 输出和使用
|
|
|
|
每张 `public/layout-reference/ref-NN/` 包含原裁片、标注图、三类掩膜图、分离构件 PNG、图位替换 mask、文字下的近似填补层、背景、重组 PNG、构件 JSON 与交互检查器。`ReferenceLayout.tsx` 默认使用原始分类资产重组；替换文字时改为 DOM，替换图位时使用该构件的遮罩，坐标保持对应。原字形模式为像素保真；替换模式并非像素保真，不声称恢复了原字体。
|
|
|
|
`documents.ts` 为每张生成一篇独立教学 post：原图位置、构件表、文字方向、制作步骤、HTML、React、Next.js 和验收规则。Router 提供完整 27 项索引、识别方法、类型定义和严格调用协议。`package-reference-layouts.ts` 将 28 篇 Markdown、React/Next.js 代码和资产打包为 ZIP。
|
|
|
|
原图只有低分辨率拼图，无法恢复细字或确定字体。保留原字形不等于 OCR 全部正确；自动像素比较只验证重组一致，语义标注仍需人工查看。参考中灰绿区域为占位/色块，无可辨认真实照片。网页长文另提供正常可读正文。
|
|
|
|
## 重建与验证
|
|
|
|
从 apps/wiki 依次执行：
|
|
|
|
```
|
|
node --import tsx scripts/segment-layout-reference.ts
|
|
node --import tsx scripts/build-reference-layout-demos.ts
|
|
node --import tsx scripts/package-reference-layouts.ts
|
|
```
|
|
|
|
可选重新运行 Vision OCR：先将每张裁片等比放大，再运行 Swift 脚本，输出新证据，人工复核后更新 annotations；不可直接覆盖已核对语义。
|
|
|
|
`tests/layout-reference.test.tsx` 校验 27 个 ID 与行列、源 SHA、类型与资产归属、全部独立图层的真实合成像素、同词合并、日期独立、跨版面替换拒绝、React 渲染、三类代码示例与旧 post 跳转。生产构建和集成检查通过后，在指定服务器验收；不启动本地页面预览。
|